@ryanhelsing/ry-ui 1.0.13 → 1.0.15

package/dist/themes/ocean.css

@@ -6,39 +6,39 @@
 
 [data-ry-theme="ocean"] {
   /* Primary - ocean blues */
-  --ry-color-primary: oklch(0.685 0.148 237.3);
-  --ry-color-primary-hover: oklch(0.588 0.139 242);
-  --ry-color-primary-active: oklch(0.5 0.119 242.8);
+  --ry-color-primary: light-dark(oklch(0.685 0.148 237.3), oklch(0.835 0.148 237.3));
+  --ry-color-primary-hover: light-dark(oklch(0.588 0.139 242), oklch(0.738 0.139 242.0));
+  --ry-color-primary-active: light-dark(oklch(0.5 0.119 242.8), oklch(0.650 0.119 242.8));
 
   /* Secondary - teal */
-  --ry-color-secondary: oklch(0.715 0.126 215.2);
-  --ry-color-secondary-hover: oklch(0.609 0.111 221.7);
-  --ry-color-secondary-active: oklch(0.52 0.094 223.1);
+  --ry-color-secondary: light-dark(oklch(0.715 0.126 215.2), oklch(0.286 0.063 215.2));
+  --ry-color-secondary-hover: light-dark(oklch(0.609 0.111 221.7), oklch(0.317 0.056 221.7));
+  --ry-color-secondary-active: light-dark(oklch(0.52 0.094 223.1), oklch(0.344 0.047 223.1));
 
   /* Text */
-  --ry-color-text: oklch(0.391 0.085 240.9);
-  --ry-color-text-muted: oklch(0.554 0.041 257.4);
-  --ry-color-text-inverse: oklch(1 0 0);
+  --ry-color-text: light-dark(oklch(0.391 0.085 240.9), oklch(0.911 0.085 240.9));
+  --ry-color-text-muted: light-dark(oklch(0.554 0.041 257.4), oklch(0.684 0.029 257.4));
+  --ry-color-text-inverse: light-dark(oklch(1 0 0), oklch(0.16 0.04 240));
 
-  /* Background - light blues */
-  --ry-color-bg: oklch(0.977 0.013 236.8);
-  --ry-color-bg-subtle: oklch(0.951 0.025 236.9);
-  --ry-color-bg-muted: oklch(0.901 0.056 230.9);
+  /* Background - light blues / dark deep blues */
+  --ry-color-bg: light-dark(oklch(0.977 0.013 236.8), oklch(0.16 0.04 240));
+  --ry-color-bg-subtle: light-dark(oklch(0.951 0.025 236.9), oklch(0.19 0.05 238));
+  --ry-color-bg-muted: light-dark(oklch(0.901 0.056 230.9), oklch(0.23 0.06 235));
 
   /* Border */
-  --ry-color-border: oklch(0.828 0.101 230.3);
-  --ry-color-border-strong: oklch(0.753 0.139 232.7);
+  --ry-color-border: light-dark(oklch(0.828 0.101 230.3), oklch(0.203 0.061 230.3));
+  --ry-color-border-strong: light-dark(oklch(0.753 0.139 232.7), oklch(0.248 0.083 232.7));
 
   /* Shadows with blue tint */
-  --ry-shadow-sm: 0 1px 2px 0 oklch(0.685 0.148 237.3 / 0.1);
-  --ry-shadow-md: 0 4px 6px -1px oklch(0.685 0.148 237.3 / 0.15);
-  --ry-shadow-lg: 0 10px 15px -3px oklch(0.685 0.148 237.3 / 0.15);
-  --ry-shadow-xl: 0 20px 25px -5px oklch(0.685 0.148 237.3 / 0.2);
+  --ry-shadow-sm: light-dark(0 1px 2px 0 oklch(0.685 0.148 237.3 / 0.1), 0 1px 2px 0 oklch(0.352 0.148 237.3 / 0.1));
+  --ry-shadow-md: light-dark(0 4px 6px -1px oklch(0.685 0.148 237.3 / 0.15), 0 4px 6px -1px oklch(0.352 0.148 237.3 / 0.15));
+  --ry-shadow-lg: light-dark(0 10px 15px -3px oklch(0.685 0.148 237.3 / 0.15), 0 10px 15px -3px oklch(0.352 0.148 237.3 / 0.15));
+  --ry-shadow-xl: light-dark(0 20px 25px -5px oklch(0.685 0.148 237.3 / 0.2), 0 20px 25px -5px oklch(0.352 0.148 237.3 / 0.2));
 
   /* Focus */
-  --ry-focus-ring: 0 0 0 3px oklch(0.685 0.148 237.3 / 0.5);
+  --ry-focus-ring: light-dark(0 0 0 3px oklch(0.685 0.148 237.3 / 0.5), 0 0 0 3px oklch(0.352 0.148 237.3 / 0.5));
 
   /* Alerts */
-  --ry-color-info-bg: oklch(0.951 0.025 236.9);
-  --ry-color-info-text: oklch(0.5 0.119 242.8);
+  --ry-color-info-bg: light-dark(oklch(0.951 0.025 236.9), oklch(0.175 0.010 236.9));
+  --ry-color-info-text: light-dark(oklch(0.5 0.119 242.8), oklch(0.900 0.119 242.8));
 }

package/docs/components/dropdown.md

@@ -2,14 +2,14 @@
 
 ## `<ry-dropdown>`
 
-Use `slot="trigger"` on the trigger element. Menu items go inside `<ry-menu>`.
+The first child element is the trigger. Menu items go inside `<ry-menu>`.
 
 Events: `ry:select` — `e.detail.value`
 API: `.open()`, `.close()`
 
 ```html
 <ry-dropdown>
-  <ry-button slot="trigger">Options</ry-button>
+  <ry-button>Options</ry-button>
   <ry-menu>
     <ry-menu-item>Edit</ry-menu-item>
     <ry-menu-item>Duplicate</ry-menu-item>

package/docs/components/modal.md

@@ -17,10 +17,10 @@ API: `.open()`, `.close()`, `.state`
 
 <ry-modal id="demo" title="Confirm">
   <p>Are you sure?</p>
-  <ry-actions slot="footer">
+  <footer>
     <ry-button variant="ghost" close>Cancel</ry-button>
     <ry-button>OK</ry-button>
-  </ry-actions>
+  </footer>
 </ry-modal>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanhelsing/ry-ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Framework-agnostic, Light DOM web components. CSS is the source of truth.",
   "type": "module",
   "main": "./dist/ry-ui.js",
@@ -29,11 +29,13 @@
     "build:css": "mkdir -p dist/css && node -e \"const fs=require('fs'); const files=['src/css/ry-tokens.css','src/css/ry-structure.css','src/css/ry-theme.css']; const out=files.map(f=>fs.readFileSync(f,'utf8')).join('\\n'); fs.writeFileSync('dist/css/ry-ui.css',out);\" && cp src/css/ry-tokens.css src/css/ry-structure.css src/css/ry-theme.css dist/css/ && mkdir -p dist/themes && cp src/themes/*.css dist/themes/",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
+    "darkify": "node scripts/theme-darkify.mjs",
     "prepack": "cp README.md .readme-backup && cp CDN_README.md README.md",
     "postpack": "mv .readme-backup README.md",
     "release": "npm run build && git add -A && git diff-index --quiet HEAD || git commit -m 'new build' && npm version patch && npm publish --access public"
   },
   "devDependencies": {
+    "playwright": "^1.58.2",
     "typescript": "^5.7.2",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.4.0"

package/docs/components/button-group.md

@@ -1,36 +0,0 @@
-# Button Group
-
-## `<ry-button-group>`
-
-Segmented control with radio-group behavior. Only one child button can be selected at a time.
-
-| Attribute | Values | Description |
-|-----------|--------|-------------|
-| `name` | string | Optional group name |
-| `value` | string | Currently selected button value |
-
-Events: `ry:change` — `e.detail.value`
-
-Child buttons must have a `value` attribute to participate. Clicking a button sets `pressed` + `aria-pressed="true"` on it and clears the others.
-
-```html
-<ry-button-group name="billing" value="monthly">
-  <ry-button value="monthly">Monthly</ry-button>
-  <ry-button value="annually">Annually</ry-button>
-</ry-button-group>
-
-<ry-button-group name="mode" value="terminal">
-  <ry-button value="direct">Direct</ry-button>
-  <ry-button value="terminal">Terminal</ry-button>
-  <ry-button value="release">Release</ry-button>
-</ry-button-group>
-```
-
-JS:
-```js
-const group = document.querySelector('ry-button-group');
-group.addEventListener('ry:change', (e) => {
-  console.log(e.detail.value); // "monthly" | "annually"
-});
-group.value = 'annually'; // programmatic selection
-```