@ryanhelsing/ry-ui 1.0.10 → 1.0.12

package/examples/themes/skeuomorphic/led-controls/src/style.scss

@@ -1,253 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-
-// mixins
-@mixin coords-to-property($pixel-size,$coord-array,$property) {
-	$value-sets: ();
-
-	@each $coords in $coord-array {
-		$x: $pixel-size * map.get($coords,"x");
-		$y: $pixel-size * map.get($coords,"y");
-		$value-sets: list.append($value-sets,($x $y),comma);
-	}
-	@if $property == "box-shadow" {
-		box-shadow: $value-sets;
-	}
-	@else if $property == "clip-path" {
-		clip-path: polygon($value-sets);
-	}
-}
-@mixin range-thumb($pixel-size) {
-	background-color: transparent;
-	border: 0;
-	border-radius: 0;
-	box-shadow: none;
-	cursor: pointer;
-	width: $pixel-size * 5;
-	height: $pixel-size * 21;
-}
-
-// normal styles
-* {
-	border: 0;
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-:root {
-	--hue: 223;
-	--sat: 10%;
-	--bg: hsl(var(--hue),var(--sat),30%);
-	--fg: hsl(var(--hue),var(--sat),90%);
-	font-size: 12px;
-}
-body,
-input {
-	font: 1em/1.5 sans-serif;
-}
-body {
-	background-color: var(--bg);
-	color: var(--fg);
-	display: flex;
-	height: 100vh;
-}
-input {
-	outline: transparent;
-	-webkit-appearance: none;
-	appearance: none;
-	-webkit-tap-highlight-color: transparent;
-}
-main {
-	display: flex;
-	overflow-x: hidden;
-	padding: 1.5em 0;
-	width: 100vw;
-	height: 100vh;
-}
-.grid {
-	display: grid;
-	gap: 1.5em;
-	grid-template-columns: repeat(2,1fr);
-	margin: auto;
-}
-.led-control {
-	$border:
-		("x": 2, "y": 0),
-		("x": 19, "y": 0),
-		("x": 19, "y": 1),
-		("x": 20, "y": 1),
-		("x": 20, "y": 2),
-		("x": 21, "y": 2),
-		("x": 21, "y": 42),
-		("x": 20, "y": 42),
-		("x": 20, "y": 42),
-		("x": 20, "y": 43),
-		("x": 19, "y": 43),
-		("x": 19, "y": 44),
-		("x": 2, "y": 44),
-		("x": 2, "y": 43),
-		("x": 1, "y": 43),
-		("x": 1, "y": 42),
-		("x": 0, "y": 42),
-		("x": 0, "y": 2),
-		("x": 1, "y": 2),
-		("x": 1, "y": 1),
-		("x": 2, "y": 1);
-	$sprites: (
-		"audio":
-			("x": 5, "y": 1)
-			("x": 4, "y": 2)
-			("x": 5, "y": 2)
-			("x": 3, "y": 3)
-			("x": 4, "y": 3)
-			("x": 5, "y": 3)
-			("x": 9, "y": 3)
-			("x": 1, "y": 4)
-			("x": 2, "y": 4)
-			("x": 3, "y": 4)
-			("x": 4, "y": 4)
-			("x": 5, "y": 4)
-			("x": 8, "y": 4)
-			("x": 1, "y": 5)
-			("x": 2, "y": 5)
-			("x": 3, "y": 5)
-			("x": 4, "y": 5)
-			("x": 5, "y": 5)
-			("x": 9, "y": 5)
-			("x": 1, "y": 6)
-			("x": 2, "y": 6)
-			("x": 3, "y": 6)
-			("x": 4, "y": 6)
-			("x": 5, "y": 6)
-			("x": 8, "y": 6)
-			("x": 3, "y": 7)
-			("x": 4, "y": 7)
-			("x": 5, "y": 7)
-			("x": 9, "y": 7)
-			("x": 4, "y": 8)
-			("x": 5, "y": 8)
-			("x": 5, "y": 9),
-		"sun":
-			("x": 5, "y": 0)
-			("x": 1, "y": 1)
-			("x": 5, "y": 1)
-			("x": 9, "y": 1)
-			("x": 2, "y": 2)
-			("x": 4, "y": 2)
-			("x": 5, "y": 2)
-			("x": 6, "y": 2)
-			("x": 8, "y": 2)
-			("x": 3, "y": 3)
-			("x": 7, "y": 3)
-			("x": 2, "y": 4)
-			("x": 8, "y": 4)
-			("x": 0, "y": 5)
-			("x": 1, "y": 5)
-			("x": 2, "y": 5)
-			("x": 8, "y": 5)
-			("x": 9, "y": 5)
-			("x": 10, "y": 5)
-			("x": 2, "y": 6)
-			("x": 8, "y": 6)
-			("x": 3, "y": 7)
-			("x": 7, "y": 7)
-			("x": 2, "y": 8)
-			("x": 4, "y": 8)
-			("x": 5, "y": 8)
-			("x": 6, "y": 8)
-			("x": 8, "y": 8)
-			("x": 1, "y": 9)
-			("x": 5, "y": 9)
-			("x": 9, "y": 9)
-			("x": 5, "y": 10)
-	);
-	$pixel-size: 0.5em;
-	margin: auto;
-	position: relative;
-	width: $pixel-size * 21;
-	height: $pixel-size * 44;
-
-	&__icon {
-		color: #eee;
-		bottom: $pixel-size * 5;
-		left: $pixel-size * 5;
-		width: $pixel-size * 11;
-		height: $pixel-size * 11;
-
-		&,
-		&:before {
-			position: absolute;
-		}
-		&:before {
-			$dot-size: $pixel-size * 0.75;
-			$dot-margin: $pixel-size * 0.125;
-			border-radius: 50%;
-			content: "";
-			display: block;
-			// clean up artifacts on non-retina screens caused by layer overlap
-			filter:
-				drop-shadow(1px 1px var(--bg))
-				drop-shadow(-1px 0 var(--bg))
-				drop-shadow(0 -1px var(--bg));
-			top: $dot-margin;
-			left: $dot-margin;
-			width: $dot-size;
-			height: $dot-size;
-		}
-		@each $name, $pixels in $sprites {
-			&--#{$name} {
-				&:before {
-					@include coords-to-property($pixel-size,$pixels,"box-shadow");
-				}
-			}
-		}
-	}
-	&__input,
-	&__label,
-	&__layer,
-	&__layer-wrap {
-		position: absolute;
-	}
-	&__input {
-		background-color: transparent;
-		box-shadow: 0 0 0 0.25em transparent;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%,-50%) rotate(-90deg);
-		width: $pixel-size * 44;
-		height: $pixel-size * 21;
-
-		&:focus-visible {
-			box-shadow: 0 0 0 0.25em var(--fg);
-		}
-		&::-webkit-slider-thumb {
-			@include range-thumb($pixel-size);
-			-webkit-appearance: none;
-		}
-		&::-moz-range-thumb {
-			@include range-thumb($pixel-size);
-		}
-	}
-	&__label {
-		overflow: hidden;
-		width: 1px;
-		height: 1px;
-	}
-	&__layer {
-		background: url("data:image/svg+xml,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle fill='%23111' cx='4' cy='4' r='3' /></svg>") (0 0) / ($pixel-size $pixel-size);
-
-		&,
-		&-wrap {
-			inset: 0;
-		}
-		&-wrap {
-			@include coords-to-property($pixel-size,$border,"clip-path");
-		}
-	}
-	&__layer--inverted {
-		background-image: url("data:image/svg+xml,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle fill='%23eee' cx='4' cy='4' r='3' /></svg>");
-	}
-	&__layer--inverted &__icon {
-		color: #111;
-	}
-}

package/llms.txt

@@ -1,346 +0,0 @@
-# ry-ui
-
-> Framework-agnostic Light DOM web components. Zero dependencies. CSS is the source of truth.
-
-## Setup (2 lines)
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
-<script type="module" src="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/ry-ui.js"></script>
-```
-
-Set theme on `<html>`: `data-ry-theme="light"` or `"dark"`. Omit for OS preference.
-Set body colors: `<body style="background: var(--ry-color-bg); color: var(--ry-color-text);">`
-
-## DON'T / DO
-
-DON'T write flexbox/grid CSS for page layout.
-DO: `<ry-page><ry-header>H</ry-header><ry-main>M</ry-main><ry-footer>F</ry-footer></ry-page>`
-
-DON'T write a custom modal with backdrop, focus trap, escape handling.
-DO: `<ry-button modal="m">Open</ry-button><ry-modal id="m" title="T">Content</ry-modal>`
-
-DON'T write a slide-out drawer with CSS transforms.
-DO: `<ry-button drawer="d">Open</ry-button><ry-drawer id="d" side="left">Content</ry-drawer>`
-
-DON'T write tab switching logic or CSS.
-DO: `<ry-tabs><ry-tab title="A" active>A</ry-tab><ry-tab title="B">B</ry-tab></ry-tabs>`
-
-DON'T write a custom select dropdown with keyboard navigation.
-DO: `<ry-select placeholder="Pick"><ry-option value="a">A</ry-option></ry-select>`
-
-DON'T write CSS variables for colors, spacing, shadows.
-DO: Use `--ry-color-*`, `--ry-space-*`, `--ry-radius-*`, `--ry-shadow-*` tokens.
-
-DON'T write button styles with hover/active/focus states.
-DO: `<ry-button variant="primary">Click</ry-button>`
-
-DON'T write toast/notification CSS and JS.
-DO: `RyToast.success('Saved!')` / `RyToast.error('Failed')`
-
-DON'T write accordion expand/collapse logic.
-DO: `<ry-accordion><ry-accordion-item title="Q" open>A</ry-accordion-item></ry-accordion>`
-
-DON'T write a toggle switch from scratch.
-DO: `<ry-switch name="notify" checked></ry-switch>`
-
-## Full Page Template
-
-```html
-<!DOCTYPE html>
-<html lang="en" data-ry-theme="light">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>My App</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/css/ry-ui.css">
-</head>
-<body style="background: var(--ry-color-bg); color: var(--ry-color-text);">
-  <ry-page>
-    <ry-header sticky>
-      <ry-cluster>
-        <strong>My App</strong>
-        <ry-nav>
-          <a href="/" aria-current="page">Home</a>
-          <a href="/about">About</a>
-        </ry-nav>
-      </ry-cluster>
-      <ry-actions>
-        <ry-theme-toggle themes="light,dark"></ry-theme-toggle>
-      </ry-actions>
-    </ry-header>
-
-    <ry-main>
-      <ry-section>
-        <h1>Hello World</h1>
-        <p>Your content here.</p>
-      </ry-section>
-    </ry-main>
-
-    <ry-footer>Built with ry-ui</ry-footer>
-  </ry-page>
-
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ryanhelsing/ry-ui/dist/ry-ui.js"></script>
-</body>
-</html>
-```
-
-## Components — Copy-Paste Reference
-
-### Layout (CSS-only, no JS needed)
-
-```html
-<ry-page>
-  <ry-header sticky>Header</ry-header>
-  <ry-main><ry-section>Content</ry-section></ry-main>
-  <ry-footer>Footer</ry-footer>
-</ry-page>
-
-<ry-grid cols="3">
-  <div>1</div><div>2</div><div>3</div>
-</ry-grid>
-
-<!-- Responsive: cols-sm="1" cols-md="2" cols-lg="3" -->
-<ry-grid cols="4" cols-sm="1" cols-md="2">...</ry-grid>
-
-<ry-stack gap="md">Vertical stack</ry-stack>
-<ry-cluster gap="sm">Horizontal row, wraps</ry-cluster>
-<ry-center>Centered both axes</ry-center>
-<ry-card>Card container (lifts on hover)</ry-card>
-<ry-divider></ry-divider>
-```
-
-### Buttons
-
-```html
-<ry-button>Default</ry-button>
-<ry-button variant="primary">Primary</ry-button>
-<ry-button variant="secondary">Secondary</ry-button>
-<ry-button variant="outline">Outline</ry-button>
-<ry-button variant="ghost">Ghost</ry-button>
-<ry-button variant="danger">Danger</ry-button>
-<ry-button variant="accent">Accent</ry-button>
-<ry-button size="sm">Small</ry-button>
-<ry-button size="lg">Large</ry-button>
-<ry-button disabled>Disabled</ry-button>
-<ry-button modal="modal-id">Opens modal</ry-button>
-<ry-button drawer="drawer-id">Opens drawer</ry-button>
-```
-
-### Modal
-
-```html
-<ry-button modal="my-modal">Open Modal</ry-button>
-<ry-modal id="my-modal" title="Confirm">
-  <p>Are you sure?</p>
-  <ry-cluster>
-    <ry-button variant="danger">Delete</ry-button>
-    <ry-button variant="ghost">Cancel</ry-button>
-  </ry-cluster>
-</ry-modal>
-```
-
-### Drawer
-
-```html
-<ry-button drawer="my-drawer">Open Drawer</ry-button>
-<ry-drawer id="my-drawer" side="left" title="Menu">
-  <!-- side: left | right | bottom -->
-  <nav>Navigation content</nav>
-</ry-drawer>
-```
-
-### Tabs
-
-```html
-<ry-tabs>
-  <ry-tab title="Overview" active>First tab content</ry-tab>
-  <ry-tab title="Settings">Second tab content</ry-tab>
-  <ry-tab title="Logs">Third tab content</ry-tab>
-</ry-tabs>
-```
-
-### Accordion
-
-```html
-<ry-accordion>
-  <ry-accordion-item title="Section One" open>Content</ry-accordion-item>
-  <ry-accordion-item title="Section Two">Content</ry-accordion-item>
-</ry-accordion>
-```
-
-### Select
-
-```html
-<ry-select placeholder="Choose country" name="country">
-  <ry-option value="us">United States</ry-option>
-  <ry-option value="uk">United Kingdom</ry-option>
-  <ry-option value="ca">Canada</ry-option>
-</ry-select>
-```
-
-### Forms
-
-```html
-<ry-field label="Email" hint="We'll never share it">
-  <input type="email" placeholder="you@example.com">
-</ry-field>
-
-<ry-field label="Password" error="Must be at least 8 characters">
-  <input type="password">
-</ry-field>
-
-<ry-switch name="notifications" checked></ry-switch>
-```
-
-### Dropdown Menu
-
-```html
-<ry-dropdown>
-  <ry-button slot="trigger">Actions</ry-button>
-  <ry-menu>
-    <ry-menu-item>Edit</ry-menu-item>
-    <ry-menu-item>Duplicate</ry-menu-item>
-    <ry-menu-item>Delete</ry-menu-item>
-  </ry-menu>
-</ry-dropdown>
-```
-
-### Toast (JS only — no HTML needed)
-
-```javascript
-RyToast.success('Saved successfully!');
-RyToast.error('Something went wrong');
-RyToast.info('FYI...');
-RyToast.warning('Be careful');
-RyToast.show({ message: 'Custom', variant: 'info', duration: 5000 });
-```
-
-### Display
-
-```html
-<ry-alert type="info">Informational message</ry-alert>
-<ry-alert type="success">Operation completed</ry-alert>
-<ry-alert type="warning">Proceed with caution</ry-alert>
-<ry-alert type="danger" dismissible>Something went wrong</ry-alert>
-
-<ry-badge>Default</ry-badge>
-<ry-badge variant="success">Active</ry-badge>
-<ry-badge variant="danger">Error</ry-badge>
-
-<ry-tooltip content="Help text" position="top">
-  <span>Hover me</span>
-</ry-tooltip>
-```
-
-### Slider & Knob
-
-```html
-<ry-slider min="0" max="100" value="50" step="1"></ry-slider>
-<ry-slider range start="20" end="80"></ry-slider>
-<ry-knob min="0" max="100" value="50" label="Volume"></ry-knob>
-```
-
-### Split Layout (resizable sidebar)
-
-```html
-<ry-split resizable persist="sidebar">
-  <div>Main content</div>
-  <div>Sidebar</div>
-</ry-split>
-```
-
-### Button Group (segmented control)
-
-```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>
-```
-
-### Nav Bar Pattern
-
-```html
-<ry-header sticky>
-  <ry-cluster>
-    <ry-logo>MyApp</ry-logo>
-    <ry-divider vertical></ry-divider>
-    <ry-nav>
-      <a href="/" aria-current="page">Home</a>
-      <a href="/docs">Docs</a>
-    </ry-nav>
-  </ry-cluster>
-  <ry-actions>
-    <ry-button variant="ghost" size="sm">Login</ry-button>
-    <ry-button size="sm">Sign Up</ry-button>
-  </ry-actions>
-</ry-header>
-```
-
-### Interactive Card Grid
-
-```html
-<ry-grid cols="3">
-  <ry-card interactive>
-    <h3>Feature A</h3>
-    <p>Description of feature A</p>
-  </ry-card>
-  <ry-card interactive>
-    <h3>Feature B</h3>
-    <p>Description of feature B</p>
-  </ry-card>
-</ry-grid>
-```
-
-## Events
-
-All events are prefixed with `ry:`:
-
-```javascript
-element.addEventListener('ry:change', (e) => console.log(e.detail));
-element.addEventListener('ry:open', () => {});
-element.addEventListener('ry:close', () => {});
-element.addEventListener('ry:click', () => {});
-```
-
-## Programmatic Control
-
-```javascript
-document.querySelector('ry-modal').open();
-document.querySelector('ry-modal').close();
-document.querySelector('ry-drawer').toggle();
-document.querySelector('ry-select').value = 'new-value';
-```
-
-## Theming
-
-Override tokens in your own CSS — no build step needed:
-
-```css
-:root {
-  --ry-color-primary: oklch(0.541 0.218 293);
-  --ry-color-primary-hover: oklch(0.491 0.234 292);
-  --ry-radius-md: 0;
-}
-```
-
-Key tokens: `--ry-color-{primary,secondary,accent,success,warning,danger,info}`,
-`--ry-color-{text,text-muted,bg,bg-subtle,border}`, `--ry-space-{1-20}`,
-`--ry-radius-{sm,md,lg,xl,full}`, `--ry-shadow-{sm,md,lg,xl}`,
-`--ry-font-{sans,mono}`, `--ry-text-{xs,sm,base,lg,xl,2xl,3xl,4xl}`
-
-## Vendoring (no npm required)
-
-Copy files into your project instead of using CDN:
-
-```bash
-npm pack @ryanhelsing/ry-ui && tar -xf ryanhelsing-ry-ui-*.tgz
-cp -r package/dist ./vendor/ry-ui && rm -rf package ryanhelsing-ry-ui-*.tgz
-```
-
-Then use local paths:
-```html
-<link rel="stylesheet" href="/vendor/ry-ui/css/ry-ui.css">
-<script type="module" src="/vendor/ry-ui/ry-ui.js"></script>
-```