@ryanhelsing/ry-ui 1.0.0

package/dist/components/ry-slider.d.ts

@@ -0,0 +1,30 @@
+/**
+ * <ry-slider>
+ *
+ * Range slider component with single or dual handles.
+ *
+ * Usage:
+ * <ry-slider min="0" max="100" value="50"></ry-slider>
+ * <ry-slider min="0" max="100" start="25" end="75" range labeled></ry-slider>
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RySlider extends RyElement {
+    #private;
+    static observedAttributes: readonly ["min", "max", "step", "value", "start", "end", "disabled"];
+    setup(): 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 start(): number;
+    set start(val: number);
+    get end(): number;
+    set end(val: number);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+}
+//# sourceMappingURL=ry-slider.d.ts.map

package/dist/components/ry-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-slider.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,qBAAa,QAAS,SAAQ,SAAS;;IAQrC,MAAM,CAAC,kBAAkB,uEAAwE;IAEjG,KAAK,IAAI,IAAI;IAoYb,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,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAElB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAMxB;CACF"}

package/dist/components/ry-switch.d.ts

@@ -0,0 +1,22 @@
+/**
+ * <ry-switch>
+ *
+ * Toggle switch component.
+ *
+ * Usage:
+ * <ry-switch name="darkMode">Dark mode</ry-switch>
+ * <ry-switch name="notifications" checked>Enable notifications</ry-switch>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RySwitch extends RyElement {
+    #private;
+    static observedAttributes: readonly ["checked", "disabled"];
+    setup(): void;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get value(): string;
+    set value(val: string);
+}
+//# sourceMappingURL=ry-switch.d.ts.map

package/dist/components/ry-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-switch.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-switch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKlD,qBAAa,QAAS,SAAQ,SAAS;;IAGrC,MAAM,CAAC,kBAAkB,mCAAoC;IAE7D,KAAK,IAAI,IAAI;IAqEb,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAWzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAIpB;CACF"}

package/dist/components/ry-tabs.d.ts

@@ -0,0 +1,21 @@
+/**
+ * <ry-tabs>
+ *
+ * Tab interface with keyboard navigation.
+ *
+ * Minimal markup (recommended):
+ * <ry-tabs>
+ *   <ry-tab title="Tab 1" active>Content 1</ry-tab>
+ *   <ry-tab title="Tab 2">Content 2</ry-tab>
+ * </ry-tabs>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyTabs extends RyElement {
+    #private;
+    setup(): void;
+    select(index: number): void;
+    get selectedIndex(): number;
+}
+//# sourceMappingURL=ry-tabs.d.ts.map

package/dist/components/ry-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-tabs.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAQlD,qBAAa,MAAO,SAAQ,SAAS;;IACnC,KAAK,IAAI,IAAI;IAiIb,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IA8B3B,IAAI,aAAa,IAAI,MAAM,CAG1B;CACF"}

package/dist/components/ry-theme-toggle.d.ts

@@ -0,0 +1,21 @@
+/**
+ * <ry-theme-toggle>
+ *
+ * Simple theme switcher button.
+ * Cycles through available themes or toggles light/dark.
+ *
+ * Usage:
+ * <ry-theme-toggle></ry-theme-toggle>
+ * <ry-theme-toggle themes="light,dark,ocean"></ry-theme-toggle>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyThemeToggle extends RyElement {
+    #private;
+    setup(): void;
+    toggle(): void;
+    get theme(): string;
+    set theme(value: string);
+}
+//# sourceMappingURL=ry-theme-toggle.d.ts.map

package/dist/components/ry-theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-theme-toggle.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-theme-toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,qBAAa,aAAc,SAAQ,SAAS;;IAI1C,KAAK,IAAI,IAAI;IAiCb,MAAM,IAAI,IAAI;IAed,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAWtB;CACF"}

package/dist/components/ry-toast.d.ts

@@ -0,0 +1,31 @@
+/**
+ * <ry-toast>
+ *
+ * Toast notification component with static API.
+ *
+ * Usage (declarative):
+ * <ry-toast variant="success">Saved successfully!</ry-toast>
+ *
+ * Usage (programmatic):
+ * RyToast.success('Saved!');
+ * RyToast.error('Failed to save');
+ * RyToast.info('Processing...');
+ * RyToast.warning('Are you sure?');
+ *
+ * JS and structure CSS use data-ry-target, theme CSS uses classes.
+ */
+import { RyElement } from '../core/ry-element.js';
+import type { ToastOptions } from '../types.js';
+export declare class RyToast extends RyElement {
+    #private;
+    static observedAttributes: readonly ["variant", "duration"];
+    static show(options: ToastOptions): RyToast;
+    static success(message: string, duration?: number): RyToast;
+    static error(message: string, duration?: number): RyToast;
+    static info(message: string, duration?: number): RyToast;
+    static warning(message: string, duration?: number): RyToast;
+    setup(): void;
+    dismiss(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=ry-toast.d.ts.map

package/dist/components/ry-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-toast.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,EAAgB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI9D,qBAAa,OAAQ,SAAQ,SAAS;;IAGpC,MAAM,CAAC,kBAAkB,mCAAoC;IAgB7D,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO;IAe3C,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO;IAI3D,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO;IAIzD,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO;IAIxD,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO;IAI3D,KAAK,IAAI,IAAI;IAgDb,OAAO,IAAI,IAAI;IAgBf,QAAQ,IAAI,IAAI;CAKjB"}

package/dist/components/ry-toggle-button.d.ts

@@ -0,0 +1,31 @@
+/**
+ * <ry-toggle-button>
+ *
+ * Standalone toggle button that works as part of a group via shared `name` attribute.
+ * Buttons with the same name behave like radio buttons - only one can be pressed at a time.
+ *
+ * Usage:
+ * <ry-toggle-button name="view" value="list" icon="list"></ry-toggle-button>
+ * <ry-toggle-button name="view" value="grid" icon="grid" pressed></ry-toggle-button>
+ *
+ * Conflict detection:
+ * Warns in console if same-name buttons span different form/section/fieldset containers.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyToggleButton extends RyElement {
+    #private;
+    static observedAttributes: readonly ["pressed", "disabled", "name", "value"];
+    setup(): void;
+    teardown(): void;
+    get pressed(): boolean;
+    set pressed(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get value(): string;
+    set value(val: string);
+    get icon(): string;
+    set icon(val: string);
+}
+//# sourceMappingURL=ry-toggle-button.d.ts.map

package/dist/components/ry-toggle-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-toggle-button.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-toggle-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAgElD,qBAAa,cAAe,SAAQ,SAAS;;IAC3C,MAAM,CAAC,kBAAkB,oDAAqD;IAI9E,KAAK,IAAI,IAAI;IAiBb,QAAQ,IAAI,IAAI;IAmEhB,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAmBzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAU1B;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAYrB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAEnB;CACF"}

package/dist/components/ry-tooltip.d.ts

@@ -0,0 +1,23 @@
+/**
+ * <ry-tooltip>
+ *
+ * Tooltip component that shows on hover/focus.
+ *
+ * Usage:
+ * <ry-tooltip content="Save your changes">
+ *   <ry-button>Save</ry-button>
+ * </ry-tooltip>
+ *
+ * <ry-tooltip content="Delete item" position="bottom">
+ *   <ry-button variant="danger">Delete</ry-button>
+ * </ry-tooltip>
+ *
+ * JS uses data-ry-target for queries, CSS uses classes for styling.
+ */
+import { RyElement } from '../core/ry-element.js';
+export declare class RyTooltip extends RyElement {
+    #private;
+    setup(): void;
+    teardown(): void;
+}
+//# sourceMappingURL=ry-tooltip.d.ts.map

package/dist/components/ry-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-tooltip.d.ts","sourceRoot":"","sources":["../../src/ts/components/ry-tooltip.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,qBAAa,SAAU,SAAQ,SAAS;;IAKtC,KAAK,IAAI,IAAI;IAuEb,QAAQ,IAAI,IAAI;CAKjB"}

package/dist/core/ry-element.d.ts

@@ -0,0 +1,66 @@
+/**
+ * RyElement - Base class for all ry-ui components
+ *
+ * Provides:
+ * - Lifecycle hooks with auto-cleanup
+ * - Event helper methods
+ * - State management via data attributes
+ * - DOM query helpers
+ */
+export declare class RyElement extends HTMLElement {
+    #private;
+    constructor();
+    /**
+     * Called when element is added to DOM.
+     * Override setup() in subclass instead of this.
+     */
+    connectedCallback(): void;
+    /**
+     * Called when element is removed from DOM.
+     * Automatically cleans up event listeners and observers.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Override in subclass for component initialization
+     */
+    setup?(): void;
+    /**
+     * Override in subclass for cleanup
+     */
+    teardown?(): void;
+    /**
+     * Add event listener with automatic cleanup on disconnect.
+     */
+    on<K extends keyof HTMLElementEventMap>(target: EventTarget, event: K, handler: (e: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): (e: HTMLElementEventMap[K]) => void;
+    on(target: EventTarget, event: string, handler: EventListener, options?: AddEventListenerOptions): EventListener;
+    /**
+     * Emit a custom event with ry: prefix.
+     */
+    emit<T = void>(name: string, detail?: T, options?: CustomEventInit): boolean;
+    /**
+     * Get/set component state via data attribute.
+     */
+    get state(): string;
+    set state(value: string);
+    /**
+     * Query within this element.
+     */
+    $<E extends Element = Element>(selector: string): E | null;
+    /**
+     * Query all within this element.
+     */
+    $$<E extends Element = Element>(selector: string): E[];
+    /**
+     * Setup a MutationObserver on this element.
+     */
+    observe(callback: MutationCallback, options?: MutationObserverInit): void;
+    /**
+     * Wait for next animation frame.
+     */
+    nextFrame(): Promise<number>;
+    /**
+     * Trap focus within a container (for modals, dropdowns).
+     */
+    trapFocus(container: HTMLElement): void;
+}
+//# sourceMappingURL=ry-element.d.ts.map

package/dist/core/ry-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-element.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,qBAAa,SAAU,SAAQ,WAAW;;;IAWxC;;;OAGG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;;OAGG;IACH,oBAAoB,IAAI,IAAI;IAe5B;;OAEG;IACH,KAAK,CAAC,IAAI,IAAI;IAEd;;OAEG;IACH,QAAQ,CAAC,IAAI,IAAI;IAEjB;;OAEG;IACH,EAAE,CAAC,CAAC,SAAS,MAAM,mBAAmB,EACpC,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC5C,OAAO,CAAC,EAAE,uBAAuB,GAChC,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,IAAI;IAEtC,EAAE,CACA,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,aAAa,EACtB,OAAO,CAAC,EAAE,uBAAuB,GAChC,aAAa;IAkBhB;;OAEG;IACH,IAAI,CAAC,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,EAAE,OAAO,GAAE,eAAoB,GAAG,OAAO;IAUhF;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED;;OAEG;IACH,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAI1D;;OAEG;IACH,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE;IAItD;;OAEG;IACH,OAAO,CACL,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,GAAE,oBAAyD,GACjE,IAAI;IASP;;OAEG;IACH,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC;IAI5B;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;CAmCxC"}

package/dist/core/ry-icons.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ry-ui Icon Registry
+ *
+ * System icons used by ry-ui components.
+ * Users can override any icon by calling registerIcon() or registerIcons().
+ *
+ * Usage:
+ * import { getIcon, registerIcon } from 'ry-ui';
+ *
+ * // Get an icon
+ * const svg = getIcon('close');
+ *
+ * // Override a system icon
+ * registerIcon('close', '<svg>...custom...</svg>');
+ *
+ * // Override multiple icons
+ * registerIcons({
+ *   'close': '<svg>...</svg>',
+ *   'check': '<svg>...</svg>',
+ * });
+ */
+/**
+ * Get an icon SVG string by name
+ */
+export declare function getIcon(name: string): string;
+/**
+ * Register or override a single icon
+ */
+export declare function registerIcon(name: string, svg: string): void;
+/**
+ * Register or override multiple icons at once
+ */
+export declare function registerIcons(newIcons: Record<string, string>): void;
+/**
+ * Get all registered icon names
+ */
+export declare function getIconNames(): string[];
+//# sourceMappingURL=ry-icons.d.ts.map

package/dist/core/ry-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-icons.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAmFH;;GAEG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAEpE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,MAAM,EAAE,CAEvC"}

package/dist/core/ry-transform.d.ts

@@ -0,0 +1,35 @@
+/**
+ * <ry> Transform Wrapper
+ *
+ * Allows clean, unprefixed markup inside <ry> tags.
+ * Converts <accordion> to <ry-accordion>, etc.
+ *
+ * Usage:
+ * <ry>
+ *   <accordion>
+ *     <accordion-item title="Foo">Content</accordion-item>
+ *   </accordion>
+ * </ry>
+ *
+ * Or with <template ry>:
+ * <template ry>
+ *   <accordion>...</accordion>
+ * </template>
+ *
+ * Both prefixed and unprefixed work together:
+ * <ry>
+ *   <accordion>
+ *     <ry-accordion-item>Already prefixed, unchanged</ry-accordion-item>
+ *     <accordion-item>Gets transformed</accordion-item>
+ *   </accordion>
+ * </ry>
+ */
+/**
+ * Transform unprefixed markup to ry- prefixed
+ */
+export declare function transform(html: string): string;
+/**
+ * Process all <ry> wrappers and <template ry> blocks
+ */
+export declare function processTransforms(): void;
+//# sourceMappingURL=ry-transform.d.ts.map

package/dist/core/ry-transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ry-transform.d.ts","sourceRoot":"","sources":["../../src/ts/core/ry-transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAwCH;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAgBxC"}

package/dist/css/ry-base.css

@@ -0,0 +1,155 @@
+/**
+ * ry-ui Base Styles
+ *
+ * Reset and base element defaults.
+ * Custom element display modes.
+ */
+
+/* ═══════════════════════════════════════════════════════════════
+   TRANSFORM WRAPPER (FOUC prevention)
+   The <ry> wrapper is hidden until JS transforms and removes it.
+   CSS loads before JS, so content stays hidden until ready.
+   ═══════════════════════════════════════════════════════════════ */
+
+ry {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   MINIMAL RESET
+   ═══════════════════════════════════════════════════════════════ */
+
+html {
+  background-color: var(--ry-color-bg);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BOX SIZING RESET (scoped to ry- elements)
+   ═══════════════════════════════════════════════════════════════ */
+
+[class^="ry-"],
+[class*=" ry-"],
+ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
+ry-grid, ry-stack, ry-cluster, ry-split, ry-center,
+ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown,
+ry-button, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
+ry-accordion-item, ry-tab, ry-menu, ry-menu-item, ry-divider,
+ry-theme-toggle {
+  box-sizing: border-box;
+}
+
+[class^="ry-"] *,
+[class*=" ry-"] *,
+ry-page *, ry-header *, ry-main *, ry-footer *, ry-section *,
+ry-card *, ry-accordion *, ry-modal *, ry-tabs *, ry-dropdown * {
+  box-sizing: inherit;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   CUSTOM ELEMENT DISPLAY DEFAULTS
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Block elements */
+ry-page,
+ry-header,
+ry-main,
+ry-footer,
+ry-section,
+ry-aside,
+ry-card,
+ry-accordion,
+ry-accordion-item,
+ry-tabs,
+ry-tab,
+ry-alert,
+ry-field {
+  display: block;
+}
+
+/* Flex containers */
+ry-grid,
+ry-stack,
+ry-cluster,
+ry-split,
+ry-center,
+ry-nav,
+ry-actions {
+  display: flex;
+}
+
+/* Inline elements */
+ry-badge,
+ry-logo {
+  display: inline-flex;
+}
+
+/* Contents (wrapper doesn't affect layout) */
+ry-modal,
+ry-dropdown {
+  display: contents;
+}
+
+/* Button-like elements */
+ry-button,
+ry-menu-item {
+  display: inline-flex;
+}
+
+/* Note: We don't use :not(:defined) because our layout
+   primitives are CSS-only and never get registered as
+   custom elements. They work without JavaScript. */
+
+/* ═══════════════════════════════════════════════════════════════
+   FOCUS STYLES
+   ═══════════════════════════════════════════════════════════════ */
+
+[class^="ry-"]:focus-visible,
+[class*=" ry-"]:focus-visible,
+ry-button:focus-visible,
+.ry-btn:focus-visible,
+.ry-input:focus-visible {
+  outline: none;
+  box-shadow: var(--ry-focus-ring);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BASE TYPOGRAPHY (when inside ry-page)
+   ═══════════════════════════════════════════════════════════════ */
+
+ry-page {
+  font-family: var(--ry-font-sans);
+  font-size: var(--ry-text-base);
+  line-height: var(--ry-leading-normal);
+  color: var(--ry-color-text);
+  background-color: var(--ry-color-bg);
+}
+
+ry-page h1, ry-page h2, ry-page h3, ry-page h4, ry-page h5, ry-page h6 {
+  margin: 0 0 var(--ry-space-4) 0;
+  font-weight: var(--ry-font-semibold);
+  line-height: var(--ry-leading-tight);
+  color: var(--ry-color-text);
+}
+
+ry-page h1 { font-size: var(--ry-text-4xl); }
+ry-page h2 { font-size: var(--ry-text-3xl); }
+ry-page h3 { font-size: var(--ry-text-2xl); }
+ry-page h4 { font-size: var(--ry-text-xl); }
+
+ry-page p {
+  margin: 0 0 var(--ry-space-4) 0;
+}
+
+ry-page a {
+  color: var(--ry-color-primary);
+  text-decoration: none;
+}
+
+ry-page a:hover {
+  text-decoration: underline;
+}