npm - @ryanhelsing/ry-ui - Versions diffs - 1.0.0 - Mend

@ryanhelsing/ry-ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/README.md +223 -0
package/dist/components/ry-accordion.d.ts +24 -0
package/dist/components/ry-accordion.d.ts.map +1 -0
package/dist/components/ry-alert.d.ts +19 -0
package/dist/components/ry-alert.d.ts.map +1 -0
package/dist/components/ry-button.d.ts +19 -0
package/dist/components/ry-button.d.ts.map +1 -0
package/dist/components/ry-code.d.ts +27 -0
package/dist/components/ry-code.d.ts.map +1 -0
package/dist/components/ry-color-input.d.ts +28 -0
package/dist/components/ry-color-input.d.ts.map +1 -0
package/dist/components/ry-color-picker.d.ts +52 -0
package/dist/components/ry-color-picker.d.ts.map +1 -0
package/dist/components/ry-drawer.d.ts +28 -0
package/dist/components/ry-drawer.d.ts.map +1 -0
package/dist/components/ry-dropdown.d.ts +24 -0
package/dist/components/ry-dropdown.d.ts.map +1 -0
package/dist/components/ry-example.d.ts +23 -0
package/dist/components/ry-example.d.ts.map +1 -0
package/dist/components/ry-field.d.ts +18 -0
package/dist/components/ry-field.d.ts.map +1 -0
package/dist/components/ry-icon.d.ts +27 -0
package/dist/components/ry-icon.d.ts.map +1 -0
package/dist/components/ry-knob.d.ts +27 -0
package/dist/components/ry-knob.d.ts.map +1 -0
package/dist/components/ry-modal.d.ts +23 -0
package/dist/components/ry-modal.d.ts.map +1 -0
package/dist/components/ry-select.d.ts +29 -0
package/dist/components/ry-select.d.ts.map +1 -0
package/dist/components/ry-slider.d.ts +30 -0
package/dist/components/ry-slider.d.ts.map +1 -0
package/dist/components/ry-switch.d.ts +22 -0
package/dist/components/ry-switch.d.ts.map +1 -0
package/dist/components/ry-tabs.d.ts +21 -0
package/dist/components/ry-tabs.d.ts.map +1 -0
package/dist/components/ry-theme-toggle.d.ts +21 -0
package/dist/components/ry-theme-toggle.d.ts.map +1 -0
package/dist/components/ry-toast.d.ts +31 -0
package/dist/components/ry-toast.d.ts.map +1 -0
package/dist/components/ry-toggle-button.d.ts +31 -0
package/dist/components/ry-toggle-button.d.ts.map +1 -0
package/dist/components/ry-tooltip.d.ts +23 -0
package/dist/components/ry-tooltip.d.ts.map +1 -0
package/dist/core/ry-element.d.ts +66 -0
package/dist/core/ry-element.d.ts.map +1 -0
package/dist/core/ry-icons.d.ts +38 -0
package/dist/core/ry-icons.d.ts.map +1 -0
package/dist/core/ry-transform.d.ts +35 -0
package/dist/core/ry-transform.d.ts.map +1 -0
package/dist/css/ry-base.css +155 -0
package/dist/css/ry-components.css +1195 -0
package/dist/css/ry-layout.css +240 -0
package/dist/css/ry-structure.css +1737 -0
package/dist/css/ry-theme.css +1433 -0
package/dist/css/ry-tokens.css +145 -0
package/dist/css/ry-ui.css +1207 -0
package/dist/ry-ui.d.ts +54 -0
package/dist/ry-ui.d.ts.map +1 -0
package/dist/ry-ui.js +2433 -0
package/dist/ry-ui.js.map +1 -0
package/dist/types.d.ts +33 -0
package/dist/types.d.ts.map +1 -0
package/package.json +40 -0

package/README.md ADDED Viewed

@@ -0,0 +1,223 @@
+# ry-ui
+Framework-agnostic, Light DOM web components. CSS is the source of truth.
+## North Star
+There are only so many types of things we do in any app. There should be one opinionated default way to do each of them. Invent all the wheels once, then never again.
+Every app is a composition of the same finite primitives: layout, navigation, data display, data entry, feedback, actions, auth, state. The patterns are solved. The industry just keeps re-solving them because engineers enjoy the puzzle.
+ry-ui normalizes this. No decisions to make. No architecture to debate. An LLM can leverage these primitives to build any app, anywhere, with a structure that is grokkable, dumb, and repeatable. Over-engineering becomes irrelevant when there's nothing left to over-engineer.
+**The goal:** Write once in HTML/CSS/JS. Deploy to web, iOS, Android, desktop. The primitives are portable because they're universal.
+---
+- [x] separate the css minimal structure from the theme
+- [x] separate the component behavior from the design (see `docs/arch/behavior-style-separation.md`)
+- [ ] Slider, Knob, Menu, Placeholder, Step/Wizard, Loader/Progress, Breadcrumb, Comment/Feed,  Statistic/Graph, Hero, Calendar, Rating , Search, Shape, Sticky, color-picker, dialog/alert, tree, carousel, qr-code, diff, split-panel, format-bytes-number-currency(rails things), mutation-observer and resize observer,
+- [ ] bring in examples and extract and normalize - Flat Clean (accord/tailwind) / Flat Fun Waves (zevo) / Game (mario/astrobot/stardew/animal crossing) / Brute (square game) / Skeuomorphic / Glass ( dark and light, color sets 1,2,3 )
+- [ ] cross-platform transpiler - Swift/SwiftUI (see `docs/arch/cross-platform-transpiler.md`)
+- [ ] animation system with GSAP (see `docs/plans/animation-system.md`)
+- [ ] could use to write apps on ry-os lol.. rust based linux DE with html/js/css -> Dioxus -> rust apps / with an llm on device
+## Quick Start
+```html
+<link rel="stylesheet" href="https://cdn.example.com/ry-ui.css">
+<script type="module" src="https://cdn.example.com/ry-ui.js"></script>
+```
+## Components
+### Layout (CSS-only)
+- `<ry-page>` - Page container
+- `<ry-header>` / `<ry-footer>` - Page sections
+- `<ry-main>` / `<ry-section>` - Content areas
+- `<ry-grid cols="3">` - Responsive grid
+- `<ry-stack>` / `<ry-cluster>` - Flex layouts
+### Interactive
+- `<ry-button>` - Buttons with variants
+- `<ry-modal>` - Modal dialogs
+- `<ry-drawer>` - Slide-out panels
+- `<ry-accordion>` - Collapsible sections
+- `<ry-tabs>` - Tabbed content
+- `<ry-dropdown>` - Dropdown menus
+- `<ry-select>` - Custom select
+- `<ry-switch>` - Toggle switch
+- `<ry-tooltip>` - Hover tooltips
+- `<ry-toast>` - Notifications
+### Display
+- `<ry-card>` - Card containers
+- `<ry-badge>` - Status badges
+- `<ry-alert>` - Alert messages
+## Clean Syntax
+Use `<ry>` wrapper to write unprefixed markup:
+```html
+<ry>
+  <accordion>
+    <accordion-item title="FAQ" open>
+      No ry- prefix needed inside the wrapper.
+    </accordion-item>
+  </accordion>
+</ry>
+```
+## Examples
+```html
+<!-- Modal -->
+<ry-button modal="demo">Open Modal</ry-button>
+<ry-modal id="demo" title="Hello">Content here</ry-modal>
+<!-- Drawer -->
+<ry-button drawer="menu">Open</ry-button>
+<ry-drawer id="menu" side="left">Menu content</ry-drawer>
+<!-- Select -->
+<ry-select placeholder="Country" name="country">
+  <ry-option value="us">United States</ry-option>
+  <ry-option value="uk">United Kingdom</ry-option>
+</ry-select>
+<!-- Toast (programmatic) -->
+<script>
+RyToast.success('Saved!');
+RyToast.error('Failed');
+</script>
+```
+## Themes
+```html
+<html data-ry-theme="dark">
+```
+Available: `light`, `dark`, `ocean`
+## CSS Architecture
+ry-ui separates **structure** (layout/behavior) from **theme** (visual styling):
+```
+ry-tokens.css     # Design tokens (CSS variables)
+ry-structure.css  # Pure layout - no colors, shadows, or borders
+ry-theme.css      # All visual styling
+ry-ui.css         # Bundled (all three combined)
+```
+### Custom Themes
+For completely custom styling, load only structure + your own theme:
+```html
+<!-- Use default look -->
+<link rel="stylesheet" href="ry-ui.css">
+<!-- OR: Custom theme -->
+<link rel="stylesheet" href="ry-structure.css">
+<link rel="stylesheet" href="your-tokens.css">
+<link rel="stylesheet" href="your-theme.css">
+```
+Structure CSS contains only:
+- Display modes, positioning, flexbox, grid
+- Sizing, padding, margins, gaps
+- State transitions (opacity, visibility, transform)
+Theme CSS contains:
+- Colors, backgrounds, borders
+- Shadows, border-radius
+- Typography styling
+- Focus rings
+---
+## Development
+```bash
+npm install
+npm run dev      # Dev server with HMR
+npm run build    # Production build
+npm run typecheck
+```
+## TypeScript Philosophy
+ry-ui is written in strict TypeScript with a "vanilla-first" approach:
+### No Decorators, No Magic
+We use plain class syntax with private fields (`#field`) instead of decorators. The code reads like standard JavaScript with type annotations.
+```typescript
+// What we do
+class RySelect extends RyElement {
+  #highlightedIndex = -1;
+  #typeahead = '';
+  setup(): void { ... }
+}
+// What we avoid
+@customElement('ry-select')
+class RySelect extends LitElement {
+  @property() value = '';
+  @state() private _open = false;
+}
+```
+### Strict Mode, No Exceptions
+```json
+{
+  "strict": true,
+  "noUncheckedIndexedAccess": true,
+  "noImplicitReturns": true
+}
+```
+### Type Patterns
+**Explicit over inferred for public APIs:**
+```typescript
+get value(): string { return this.getAttribute('value') ?? ''; }
+emit<T = void>(name: string, detail?: T): boolean { ... }
+```
+**Union types for constrained values:**
+```typescript
+type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+static observedAttributes = ['value', 'disabled'] as const;
+```
+**Extend globals for custom events:**
+```typescript
+declare global {
+  interface HTMLElementEventMap {
+    'ry:change': CustomEvent<{ value: string }>;
+  }
+}
+```
+### Build Output
+Single bundled ESM file for CDN simplicity:
+```
+dist/
+├── ry-ui.js      # 32KB (7KB gzip)
+├── ry-ui.js.map  # Source maps
+└── ry-ui.d.ts    # Type declarations
+```
+Vite builds with esbuild for speed, Rollup for optimization, and generates `.d.ts` for library consumers.
+---
+See [CLAUDE.md](CLAUDE.md) for component development guide.

package/dist/components/ry-accordion.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+/**
+ * <ry-accordion>
+ *
+ * Collapsible accordion component.
+ *
+ * Minimal markup (recommended):
+ * <ry-accordion>
+ *   <ry-accordion-item title="Title" open>Content</ry-accordion-item>
+ * </ry-accordion>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ * This decouples behavior from visual design.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyAccordion extends RyElement {
+    #private;
+    setup(): void;
+    toggle(item: HTMLElement): void;
+    open(item: HTMLElement): void;
+    close(item: HTMLElement): void;
+    openAll(): void;
+    closeAll(): void;
+}
+//# sourceMappingURL=ry-accordion.d.ts.map

package/dist/components/ry-accordion.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ry-accordion.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,qBAAa,WAAY,SAAQ,SAAS;;IACxC,KAAK,IAAI,IAAI;IAqGb,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAU/B,IAAI,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAkB7B,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAS9B,OAAO,IAAI,IAAI;IAIf,QAAQ,IAAI,IAAI;CAGjB"}

package/dist/components/ry-alert.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * <ry-alert>
+ *
+ * Alert message component.
+ *
+ * Usage:
+ * <ry-alert>Default info alert</ry-alert>
+ * <ry-alert variant="success">Success!</ry-alert>
+ * <ry-alert variant="warning" dismissible>Warning with close button</ry-alert>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyAlert extends RyElement {
+    #private;
+    setup(): void;
+    dismiss(): void;
+}
+//# sourceMappingURL=ry-alert.d.ts.map

package/dist/components/ry-alert.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-alert.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,OAAQ,SAAQ,SAAS;;IACpC,KAAK,IAAI,IAAI;IA6Bb,OAAO,IAAI,IAAI;CAUhB"}

package/dist/components/ry-button.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * <ry-button>
+ *
+ * Button component that renders as a native button.
+ * Supports variant and size attributes.
+ *
+ * Usage:
+ * <ry-button>Click me</ry-button>
+ * <ry-button variant="ghost" size="sm">Small ghost</ry-button>
+ * <ry-button modal="my-modal">Open modal</ry-button>
+ *
+ * No data-ry-target needed - button has no internal structure.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyButton extends RyElement {
+    #private;
+    setup(): void;
+}
+//# sourceMappingURL=ry-button.d.ts.map

package/dist/components/ry-button.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-button.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,QAAS,SAAQ,SAAS;;IACrC,KAAK,IAAI,IAAI;CA+Bd"}

package/dist/components/ry-code.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * <ry-code>
+ *
+ * Code display component with syntax highlighting.
+ *
+ * Usage:
+ * <ry-code language="css" title="styles.css">
+ * .button {
+ *   background: #3b82f6;
+ *   border-radius: 8px;
+ * }
+ * </ry-code>
+ *
+ * Attributes:
+ * - language: css | js | html | json (for syntax highlighting)
+ * - title: optional title shown in header
+ * - line-numbers: show line numbers
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyCode extends RyElement {
+    #private;
+    static get observedAttributes(): string[];
+    setup(): void;
+    get code(): string;
+    set code(value: string);
+}
+//# sourceMappingURL=ry-code.d.ts.map

package/dist/components/ry-code.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-code.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-code.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAWlD,qBAAa,MAAO,SAAQ,SAAS;;IAGnC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,KAAK,IAAI,IAAI;IA8db,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrB;CACF"}

package/dist/components/ry-color-input.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/**
+ * <ry-color-input>
+ *
+ * Input-style color picker with swatch preview and editable hex value.
+ * Composes ry-color-picker internally for the picker panel.
+ *
+ * Usage:
+ * <ry-color-input value="#ff0000"></ry-color-input>
+ * <ry-color-input value="#ff0000" opacity></ry-color-input>
+ */
+import { RyElement } from '../core/ry-element.js';
+import type { RGB, HSL, HSV } from './ry-color-picker.js';
+export declare class RyColorInput extends RyElement {
+    #private;
+    static observedAttributes: readonly ["value", "format", "opacity", "disabled", "placeholder"];
+    setup(): void;
+    open(): void;
+    close(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get value(): string;
+    set value(val: string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get rgb(): RGB;
+    get hsl(): HSL;
+    get hsv(): HSV;
+}
+//# sourceMappingURL=ry-color-input.d.ts.map

package/dist/components/ry-color-input.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ry-color-input.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-color-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,EAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAEzE,qBAAa,YAAa,SAAQ,SAAS;;IAMzC,MAAM,CAAC,kBAAkB,qEAAsE;IAE/F,KAAK,IAAI,IAAI;IAoMb,IAAI,IAAI,IAAI;IAKZ,KAAK,IAAI,IAAI;IAoDb,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IA0B9F,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAQpB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAMxB;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;CACF"}

package/dist/components/ry-color-picker.d.ts ADDED Viewed

@@ -0,0 +1,52 @@
+/**
+ * <ry-color-picker>
+ *
+ * Color picker component with HSV grid, hue slider, and optional alpha slider.
+ * Shows as a dropdown trigger by default; add `inline` for always-visible picker.
+ *
+ * Usage:
+ * <ry-color-picker value="#ff0000"></ry-color-picker>
+ * <ry-color-picker value="#ff0000" inline></ry-color-picker>
+ * <ry-color-picker value="hsl(200, 100%, 50%)" format="hsl" opacity></ry-color-picker>
+ */
+import { RyElement } from '../core/ry-element.js';
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export declare class RyColorPicker extends RyElement {
+    #private;
+    static observedAttributes: readonly ["value", "format", "opacity", "disabled", "swatches", "inline"];
+    setup(): void;
+    open(): void;
+    close(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get value(): string;
+    set value(val: string);
+    get format(): ColorFormat;
+    set format(val: ColorFormat);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get hsv(): HSV;
+    get rgb(): RGB;
+    get hsl(): HSL;
+    get alpha(): number;
+    set alpha(val: number);
+    /** Set color from any valid color string */
+    setColor(colorString: string): boolean;
+    /** Get color in specific format */
+    getFormattedValue(format: ColorFormat): string;
+}
+//# sourceMappingURL=ry-color-picker.d.ts.map

package/dist/components/ry-color-picker.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ry-color-picker.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-color-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAoKD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhD,qBAAa,aAAc,SAAQ,SAAS;;IAqB1C,MAAM,CAAC,kBAAkB,4EAA6E;IAEtG,KAAK,IAAI,IAAI;IA+Kb,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAqYb,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IA6B9F,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAWpB;IAED,IAAI,MAAM,IAAI,WAAW,CAExB;IAED,IAAI,MAAM,CAAC,GAAG,EAAE,WAAW,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAMxB;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAGpB;IAED,4CAA4C;IAC5C,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO;IAetC,mCAAmC;IACnC,iBAAiB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM;CAO/C"}

package/dist/components/ry-drawer.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/**
+ * <ry-drawer>
+ *
+ * Slide-out drawer/panel component.
+ *
+ * Usage:
+ * <ry-button drawer="menu">Open Menu</ry-button>
+ * <ry-drawer id="menu" side="left">
+ *   <h2>Menu</h2>
+ *   <nav>...</nav>
+ * </ry-drawer>
+ *
+ * Attributes:
+ * - id: Required for trigger binding
+ * - side: left (default), right, bottom
+ * - open: Initially open
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyDrawer extends RyElement {
+    #private;
+    setup(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}
+//# sourceMappingURL=ry-drawer.d.ts.map

package/dist/components/ry-drawer.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-drawer.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,QAAS,SAAQ,SAAS;;IAIrC,KAAK,IAAI,IAAI;IAiEb,IAAI,IAAI,IAAI;IAwBZ,KAAK,IAAI,IAAI;IAmBb,MAAM,IAAI,IAAI;CAOf"}

package/dist/components/ry-dropdown.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+/**
+ * <ry-dropdown>
+ *
+ * Dropdown menu with click-outside handling.
+ *
+ * Minimal markup (recommended):
+ * <ry-dropdown>
+ *   <ry-button slot="trigger">Options</ry-button>
+ *   <ry-menu>
+ *     <ry-menu-item>Edit</ry-menu-item>
+ *   </ry-menu>
+ * </ry-dropdown>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyDropdown extends RyElement {
+    #private;
+    setup(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}
+//# sourceMappingURL=ry-dropdown.d.ts.map

package/dist/components/ry-dropdown.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-dropdown.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,UAAW,SAAQ,SAAS;;IACvC,KAAK,IAAI,IAAI;IAmFb,IAAI,IAAI,IAAI;IAgBZ,KAAK,IAAI,IAAI;IAUb,MAAM,IAAI,IAAI;CAOf"}

package/dist/components/ry-example.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * <ry-example>
+ *
+ * Displays code and live rendered output side-by-side from a single source.
+ * Code is shown on the left using ry-code, live preview on the right.
+ *
+ * Usage:
+ * <ry-example title="Accordion">
+ *   <template>
+ *     <accordion>
+ *       <accordion-item title="FAQ" open>
+ *         Content here
+ *       </accordion-item>
+ *     </accordion>
+ *   </template>
+ * </ry-example>
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyExample extends RyElement {
+    #private;
+    setup(): void;
+}
+//# sourceMappingURL=ry-example.d.ts.map

package/dist/components/ry-example.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-example.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-example.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,SAAU,SAAQ,SAAS;;IACtC,KAAK,IAAI,IAAI;CA8Dd"}

package/dist/components/ry-field.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * <ry-field>
+ *
+ * Form field wrapper with label.
+ *
+ * Usage:
+ * <ry-field label="Email">
+ *   <input type="email" placeholder="you@example.com">
+ * </ry-field>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyField extends RyElement {
+    #private;
+    setup(): void;
+}
+//# sourceMappingURL=ry-field.d.ts.map

package/dist/components/ry-field.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-field.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-field.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,OAAQ,SAAQ,SAAS;;IACpC,KAAK,IAAI,IAAI;CA2Bd"}

package/dist/components/ry-icon.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * <ry-icon>
+ *
+ * Renders an icon from the icon registry.
+ *
+ * Usage:
+ * <ry-icon name="close"></ry-icon>
+ * <ry-icon name="check" size="16"></ry-icon>
+ * <ry-icon name="heart" size="32"></ry-icon>
+ *
+ * Attributes:
+ * - name: icon name from registry (required)
+ * - size: icon size in pixels (default: 24)
+ * - label: accessible label (for screen readers)
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyIcon extends RyElement {
+    #private;
+    static get observedAttributes(): string[];
+    setup(): void;
+    attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+    get name(): string;
+    set name(value: string);
+    get size(): number;
+    set size(value: number);
+}
+//# sourceMappingURL=ry-icon.d.ts.map

package/dist/components/ry-icon.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ry-icon.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,qBAAa,MAAO,SAAQ,SAAS;;IACnC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,KAAK,IAAI,IAAI;IAIb,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAoC/F,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;CACF"}

package/dist/components/ry-knob.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * <ry-knob>
+ *
+ * Rotary knob component with drag/wheel interaction.
+ *
+ * Usage:
+ * <ry-knob min="0" max="100" value="50" label="Volume"></ry-knob>
+ * <ry-knob min="0" max="3" step="1" labels="Off,Low,Med,High"></ry-knob>
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyKnob extends RyElement {
+    #private;
+    static observedAttributes: readonly ["min", "max", "step", "value", "disabled", "label", "labels", "description"];
+    setup(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get min(): number;
+    set min(val: number);
+    get max(): number;
+    set max(val: number);
+    get step(): number;
+    set step(val: number);
+    get value(): number;
+    set value(val: number);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+}
+//# sourceMappingURL=ry-knob.d.ts.map

package/dist/components/ry-knob.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ry-knob.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-knob.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,MAAO,SAAQ,SAAS;;IAQnC,MAAM,CAAC,kBAAkB,yFAA0F;IAEnH,KAAK,IAAI,IAAI;IAkNb,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAS9F,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAElB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAElB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAEnB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAMxB;CACF"}

package/dist/components/ry-modal.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * <ry-modal>
+ *
+ * Modal dialog with focus trapping and backdrop.
+ *
+ * Minimal markup (recommended):
+ * <ry-button modal="my-modal">Open</ry-button>
+ * <ry-modal id="my-modal" title="Title">
+ *   Content
+ *   <ry-actions slot="footer">...</ry-actions>
+ * </ry-modal>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyModal extends RyElement {
+    #private;
+    setup(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}
+//# sourceMappingURL=ry-modal.d.ts.map

package/dist/components/ry-modal.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ry-modal.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,OAAQ,SAAQ,SAAS;;IAIpC,KAAK,IAAI,IAAI;IA0Eb,IAAI,IAAI,IAAI;IAwBZ,KAAK,IAAI,IAAI;IAmBb,MAAM,IAAI,IAAI;CAOf"}

package/dist/components/ry-select.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+/**
+ * <ry-select>
+ *
+ * Custom select dropdown component.
+ *
+ * Usage:
+ * <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" disabled>Canada</ry-option>
+ * </ry-select>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+import type { SelectOption } from '../types.js';
+export declare class RySelect extends RyElement {
+    #private;
+    _options: SelectOption[];
+    static observedAttributes: readonly ["value", "disabled"];
+    setup(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    get value(): string;
+    set value(val: string);
+    teardown(): void;
+}
+//# sourceMappingURL=ry-select.d.ts.map

package/dist/components/ry-select.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ry-select.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,aAAa,CAAC;AAI9D,qBAAa,QAAS,SAAQ,SAAS;;IAOrC,QAAQ,EAAE,YAAY,EAAE,CAAM;IAE9B,MAAM,CAAC,kBAAkB,iCAAkC;IAE3D,KAAK,IAAI,IAAI;IA6Qb,IAAI,IAAI,IAAI;IA+CZ,KAAK,IAAI,IAAI;IAmBb,MAAM,IAAI,IAAI;IAQd,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAKpB;IAED,QAAQ,IAAI,IAAI;CAKjB"}