release v0.1.0

Author: good-lly

dist/README.md

@@ -3,18 +3,39 @@
 (Forked [Oat UI](https://github.com/knadh/oat))
 See [CHANGELOG](CHANGELOG.md) for changes and updates.
 
-> Semantic, minimal, zero dependencies. ~10KB CSS and JS.
+> Semantic, minimal, zero dependencies. ~11KB CSS and JS.
 
-Oat Glassed is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.
+Oat Glassed is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements. Forked from Oat UI, it is now built with a glassmorphism design and has a few new components.
 
 Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.
 
-I wrote this to use in my own projects after getting sick of the ridiculous bloat, dependencies, and rug-pulls in Javascript UI/component libraries.
-
 See live demo and docs at [**https://good-lly.github.io/oat-glassed**](https://good-lly.github.io/oat-glassed)
 
-**IMPORTANT:** The lib is currently sub v1 and is likely to have breaking changes until it hits v1.
-
 ---
 
-<img width="739" height="735" alt="image" src="https://github.com/user-attachments/assets/b0a2f55c-659d-4aab-922c-b13d89eeab36" />
+<img width="739" alt="image" src="https://github.com/good-lly/oat-glassed/blob/main/docs/static/screenshot.png?raw=true" />
+
+## Installation
+
+### CDN
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/oat-glassed@1.0.0/dist/oat-glassed.min.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/oat-glassed@1.0.0/dist/oat-glassed.min.js"></script>
+```
+
+### NPM
+
+```bash
+npm install oat-glassed
+```
+
+```js
+import "oat-glassed/dist/oat-glassed.min.css";
+import "oat-glassed/dist/oat-glassed.min.js";
+```
+
+## License is licensed under [MIT](LICENSE).

dist/css/card.css

@@ -9,5 +9,13 @@
     padding: var(--space-6);
     overflow: hidden;
     contain: paint;
+
+    > * + * {
+      margin-block-start: var(--space-4);
+    }
+
+    > header > * + * {
+      margin-block-start: var(--space-2);
+    }
   }
 }

dist/css/dialog.css

@@ -11,16 +11,50 @@
     background-image: var(--glass-highlight);
     border: 1px solid var(--glass-border);
     border-radius: var(--radius-large);
-    box-shadow: var(--shadow-large);
+    box-shadow: var(--glass-edge), var(--shadow-large);
     backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
     -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-    will-change: transform;
+    will-change: transform, opacity;
     contain: layout style paint;
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+    transition:
+      opacity 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+      transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+      display 250ms allow-discrete,
+      overlay 250ms allow-discrete;
+
+    &[open] {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: translateY(8px) scale(0.97);
+      }
+    }
 
     &::backdrop {
       background-color: light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.45));
       backdrop-filter: blur(6px) saturate(var(--glass-saturate));
       -webkit-backdrop-filter: blur(6px) saturate(var(--glass-saturate));
+      opacity: 0;
+      transition:
+        opacity 250ms ease,
+        display 250ms allow-discrete,
+        overlay 250ms allow-discrete;
+    }
+
+    &[open]::backdrop {
+      opacity: 1;
+    }
+
+    @starting-style {
+      &[open]::backdrop {
+        opacity: 0;
+      }
     }
 
     & > header,

dist/css/dropdown.css

@@ -4,9 +4,11 @@
       position: fixed;
       margin: 0;
       min-width: 12rem;
-      background-color: var(--card);
+      background-color: light-dark(rgb(255 255 255 / 0.72), rgb(17 24 39 / 0.65));
       background-image: var(--glass-highlight);
-      border: 1px solid var(--glass-border);
+      backdrop-filter: blur(16px) saturate(140%);
+      -webkit-backdrop-filter: blur(16px) saturate(140%);
+      border: 1px solid light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.12));
       border-radius: var(--radius-medium);
       box-shadow: var(--glass-edge), var(--shadow-large);
       will-change: transform, opacity;

dist/oat-glassed.min.css.gz

@@ -1,6 +1,6 @@
 {
   "name": "oat-glassed",
-  "version": "",
+  "version": "0.1.0",
   "license": "MIT",
   "author": "good-lly | Originally created by Kailash Nadh @kailashnadh",
   "homepage": "https://github.com/good-lly/oat-glassed",