agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.4

package/README.md

@@ -23,41 +23,75 @@ AgnosticUI uses a **Minimalist & Highly Themeable** architecture where component
 
 ```
 src/components/
-├── Accordion/
-│   ├── core/
-│   │   ├── _Accordion.ts          # Immutable core
-│   │   └── _Accordion.spec.ts     # Core tests
-│   ├── react/
-│   │   ├── ReactAccordion.tsx     # React wrapper
-│   │   └── useAccordion.ts        # React hooks
-│   ├── extensions/
-│   │   └── AnimatedAccordion.ts   # Enhanced version
-│   ├── styled/
-│   │   └── MinimalAccordion.ts    # Pre-styled variants
-│   ├── helpers/
-│   │   └── accordion-state.ts     # Shared utilities
-│   └── Accordion.ts               # Public exports
+└── Accordion/
+    ├── core/
+    │   ├── _Accordion.ts             # Core Lit Component
+    │   ├── Accordion.ts              # Public interface
+    │   ├── AccordionGroup.ts         # Group component
+    │   └── README.md                 # Documentation
+    ├── react/
+    │   ├── index.ts                  # React exports
+    │   └── ReactAccordion.tsx        # React wrapper
+    └── vue/
+        ├── index.ts                  # Vue exports
+        ├── VueAccordion.vue          # Main component
+        ├── VueAccordionContent.vue   # Content component
+        ├── VueAccordionHeader.vue    # Header component
+        └── VueAccordionItem.vue      # Item component
 ```
 
-## Key Principles
-
-### Minimalist & Highly Themeable Philosophy
-- ✅ **Minimal Visual Styling**: Clean defaults via `--ag-*` design tokens
-- ✅ **Functional CSS**: Layout, positioning, component structure
-- 🎨 **Complete Customization**: Override any design token for white-labeling
-- 🎯 **Result**: Production-ready components with enterprise-grade theming
-
-### Upgrade Safety: Encapsulated Core with Adapter Pattern
-- **Immutable Core**: `_Component.ts` files are canonical and upgrade-safe
-- **Adapter Layer**: Framework wrappers absorb breaking changes between versions
-- **Isolated Customization**: Extensions and styled variants evolve independently
-- **Safe Overrides**: Customize via design tokens without touching core implementations
-- **Result**: Your customizations survive library upgrades seamlessly
-
-### Framework Agnostic
-- Web Components work in any framework
-- Framework-specific wrappers provide optimal DX
-- Progressive enhancement from vanilla JS to framework-specific features
+## Why AgnosticUI?
+
+### The Local UI Kit - A New Category
+**The UI kit that lives in your codebase, not node_modules.**
+
+Traditional UI libraries live in `node_modules/` as black boxes. Copy/paste approaches give you code but no reference. AgnosticUI Local gives you **both**: a complete reference library in your project plus owned copies of components you use.
+
+```bash
+npx ag init                    # Full library in ./agnosticui/ (reference)
+npx ag add button              # Component in ./src/components/ag/ (yours to modify)
+npx ag sync                    # Update reference, preserve your customizations
+```
+
+### AI-First Development
+**The only UI kit designed for AI-assisted development.**
+
+- **Full Context**: AI tools (Cursor, Windsurf, Claude) see your entire component library
+- **Better Assistance**: "Make this button work like the Combobox" - AI sees both
+- **Reference + Customization**: AI understands the source AND your modifications
+- **Offline & Local**: No API calls, no rate limits, no black boxes
+
+### Complete Ownership
+**Copy, modify, and own your components.**
+
+- Components copied to your project - modify structure, behavior, styling
+- No vendor lock-in or "black box" frustration
+- You control the dependency graph and update schedule
+- Review diffs before accepting updates via `npx ag sync`
+
+### Zero Dependencies
+**Only Lit (5KB runtime) - nothing else.**
+
+- No bloated node_modules
+- Components work standalone
+- Production bundle includes only what you use
+- Framework wrappers via @lit/react and Vue 3 composition API
+
+### Minimalist & Themeable
+**Beautiful defaults, infinite customization.**
+
+- Production-ready styling out of the box
+- Everything customizable via `--ag-*` design tokens
+- Enterprise white-labeling capability
+- Light/dark mode built-in
+
+### Multi-Framework Support
+**React, Vue, Lit - one component library, all frameworks.**
+
+- Framework-specific wrappers for optimal developer experience
+- React wrapper via @lit/react makes props and events feel naturally "React-like"
+- Vue 3 components using composition API
+- Svelte works directly (excellent Web Components support)
 
 ## Usage
 

package/dist/components/Button/core/_Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/core/_Button.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"_Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/core/_Button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,OAAO,CAAC;CAClB;AACD,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;AAGrE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IACzF,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,gBAAgB,GAAG,EAAE,CAAC;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,QAAS,SAAQ,UAAW,YAAW,WAAW;IAC7D,MAAM,CAAC,MAAM,EA2WR,cAAc,CAAC;IAEpB;;OAEG;IAEK,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAEhG;;OAEG;IAEK,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEjD;;OAEG;IAEK,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,gBAAgB,GAAG,EAAE,CAAC;IAEnF;;OAEG;IAEK,QAAQ,EAAE,OAAO,CAAC;IAE1B;;OAEG;IAEK,KAAK,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEK,IAAI,EAAE,OAAO,CAAC;IAEtB;;OAEG;IAEK,OAAO,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEK,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE5C;;OAEG;IAEK,QAAQ,EAAE,OAAO,CAAC;IAE1B;;OAEG;IAEK,OAAO,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEK,MAAM,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEK,OAAO,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEK,SAAS,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAGtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAGtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAGrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;;IAmBtD,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,WAAW;IAcnB;;OAEG;IACH,KAAK;IAOL;;OAEG;IACH,IAAI;IAOJ,MAAM;CAoBP"}

package/dist/components/Button/core/_Button.js

@@ -1,4 +1,4 @@
-import { LitElement as h, css as l, html as c } from "lit";
+import { LitElement as l, css as c, html as h } from "lit";
 import { n as a } from "../../../property-CemaeiRl.js";
 import { o as i } from "../../../if-defined-C8i28hSj.js";
 var b = Object.defineProperty, o = (g, r, e, v) => {
@@ -6,7 +6,7 @@ var b = Object.defineProperty, o = (g, r, e, v) => {
     (u = g[s]) && (n = u(r, e, n) || n);
   return n && b(r, e, n), n;
 };
-const d = class d extends h {
+const d = class d extends l {
   constructor() {
     super(), this.disabled = !1, this.loading = !1, this.toggle = !1, this.pressed = !1, this.bordered = !1, this.ghost = !1, this.link = !1, this.grouped = !1, this.type = "button", this.ariaLabel = "", this.variant = "", this.size = "md", this.shape = "";
   }
@@ -53,7 +53,7 @@ const d = class d extends h {
   }
   render() {
     const r = this.disabled || this.loading;
-    return c`
+    return h`
       <button
         type=${this.type}
         part="ag-button"
@@ -71,7 +71,7 @@ const d = class d extends h {
     `;
   }
 };
-d.styles = l`
+d.styles = c`
     /* MINIMALIST & THEMEABLE - Styling via --ag-* design tokens */
     :host {
       /* Inline-flex for perfect centering while maintaining inline behavior */
@@ -375,9 +375,56 @@ d.styles = l`
       background: var(--ag-background-secondary);
     }
 
+    /* Disabled states - per-variant to maintain tonal identity */
+
+    /* Filled buttons - use lighter background tokens */
+    :host([variant="primary"]) button:disabled {
+      background: var(--ag-primary-background);
+      color: var(--ag-primary-text);
+    }
+
+    :host([variant="success"]) button:disabled {
+      background: var(--ag-success-background);
+      color: var(--ag-success-text);
+    }
+
+    :host([variant="warning"]) button:disabled {
+      background: var(--ag-warning-background);
+      color: var(--ag-warning-text);
+    }
+
+    :host([variant="danger"]) button:disabled {
+      background: var(--ag-danger-background);
+      color: var(--ag-danger-text);
+    }
+
+    :host([variant="secondary"]) button:disabled,
     button:disabled {
-      cursor: not-allowed;
       background: var(--ag-background-disabled);
+      color: var(--ag-text-tertiary);
+    }
+
+    :host([variant="monochrome"]) button:disabled {
+      background: var(--ag-background-tertiary);
+      color: var(--ag-text-tertiary);
+    }
+
+    /* Bordered buttons - dim the border and text with opacity */
+    :host([bordered]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* Ghost and link buttons - dim with opacity */
+    :host([ghost]) button:disabled,
+    :host([link]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* All disabled buttons get not-allowed cursor */
+    button:disabled {
+      cursor: not-allowed;
     }
 
     button:focus-visible,

package/dist/components/Timeline/react/ReactTimeline.d.ts

@@ -1,14 +1,28 @@
 import { default as React } from 'react';
-import { AgTimeline as AgTimelineWC, AgTimelineItem as AgTimelineItemWC, AgTimelineProps, AgTimelineItemProps } from '../core/Timeline.js';
+import { AgTimeline as AgTimelineWC, AgTimelineItem as AgTimelineItemWC } from '../core/Timeline.js';
 
-export declare const ReactTimeline: import('@lit/react').ReactWebComponent<AgTimelineWC, {
-    onSlotChange: string;
-}>;
-export declare const ReactTimelineItem: import('@lit/react').ReactWebComponent<AgTimelineItemWC, {}>;
-export type ReactTimelineProps = AgTimelineProps & {
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ag-timeline-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+export interface ReactTimelineProps {
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'monochrome' | '';
+    compact?: boolean;
+    ariaLabel?: string;
+    responsive?: boolean;
     children?: React.ReactNode;
-};
-export type ReactTimelineItemProps = AgTimelineItemProps & {
+}
+export declare const ReactTimeline: import('@lit/react').ReactWebComponent<AgTimelineWC, {}>;
+export interface ReactTimelineItemProps {
+    start?: React.ReactNode;
+    marker?: React.ReactNode;
+    end?: React.ReactNode;
     children?: React.ReactNode;
-};
+}
+export declare const ReactTimelineItem: React.FC<ReactTimelineItemProps>;
+export declare const ReactTimelineItemWC: import('@lit/react').ReactWebComponent<AgTimelineItemWC, {}>;
 //# sourceMappingURL=ReactTimeline.d.ts.map

package/dist/components/Timeline/react/ReactTimeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactTimeline.d.ts","sourceRoot":"","sources":["../../../../src/components/Timeline/react/ReactTimeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,UAAU,IAAI,YAAY,EAC1B,cAAc,IAAI,gBAAgB,EACnC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGhF,eAAO,MAAM,aAAa;;EAOxB,CAAC;AAGH,eAAO,MAAM,iBAAiB,8DAI5B,CAAC;AAGH,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,GAAG;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"ReactTimeline.d.ts","sourceRoot":"","sources":["../../../../src/components/Timeline/react/ReactTimeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,IAAI,YAAY,EAAE,cAAc,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGrG,OAAO,QAAQ,mBAAmB,CAAC;IACjC,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;SAC7F;KACF;CACF;AAGD,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,EAAE,CAAC;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,aAAa,0DAIxB,CAAC;AAGH,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAS9D,CAAC;AAGF,eAAO,MAAM,mBAAmB,8DAI9B,CAAC"}

package/dist/components/Timeline/react/ReactTimeline.js

@@ -1,20 +1,24 @@
-import e from "react";
-import { o as t } from "../../../create-component-BPMDMe-q.js";
+import { j as e } from "../../../jsx-runtime-BzflLqGi.js";
+import a from "react";
+import { o as l } from "../../../create-component-BPMDMe-q.js";
 import "../core/Timeline.js";
-import { AgTimeline as m, AgTimelineItem as i } from "../core/_Timeline.js";
-const r = t({
+import { AgTimeline as r, AgTimelineItem as o } from "../core/_Timeline.js";
+const x = l({
   tagName: "ag-timeline",
-  elementClass: m,
-  react: e,
-  events: {
-    onSlotChange: "slotchange"
-  }
-}), c = t({
+  elementClass: r,
+  react: a
+}), j = ({ start: t, marker: i, end: m, children: n }) => /* @__PURE__ */ e.jsxs("ag-timeline-item", { children: [
+  t && /* @__PURE__ */ e.jsx("div", { slot: "ag-start", children: t }),
+  i && /* @__PURE__ */ e.jsx("div", { slot: "ag-marker", children: i }),
+  m && /* @__PURE__ */ e.jsx("div", { slot: "ag-end", children: m }),
+  n
+] }), f = l({
   tagName: "ag-timeline-item",
-  elementClass: i,
-  react: e
+  elementClass: o,
+  react: a
 });
 export {
-  r as ReactTimeline,
-  c as ReactTimelineItem
+  x as ReactTimeline,
+  j as ReactTimelineItem,
+  f as ReactTimelineItemWC
 };

package/dist/styles/ag-tokens.css

@@ -190,4 +190,5 @@
   --ag-rating-filled-success: #238636;
   --ag-rating-filled-warning: #9a6700;
   --ag-rating-filled-danger: #cf222e;
+  --ag-rating-filled-secondary: #6b7280;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agnosticui-core",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -449,18 +449,6 @@
       "types": "./dist/components/Image/vue/index.d.ts",
       "import": "./dist/components/Image/vue/index.js"
     },
-    "./table": {
-      "types": "./dist/components/Table/core/_Table.d.ts",
-      "import": "./dist/components/Table/core/_Table.js"
-    },
-    "./table/react": {
-      "types": "./dist/components/Table/react/ReactTable.d.ts",
-      "import": "./dist/components/Table/react/ReactTable.js"
-    },
-    "./table/vue": {
-      "types": "./dist/components/Table/vue/index.d.ts",
-      "import": "./dist/components/Table/vue/index.js"
-    },
     "./close-button": {
       "types": "./dist/components/shared/CloseButton/_CloseButton.d.ts",
       "import": "./dist/components/shared/CloseButton/_CloseButton.js"

package/src/components/Button/core/_Button.ts

@@ -372,9 +372,56 @@ export class AgButton extends LitElement implements ButtonProps {
       background: var(--ag-background-secondary);
     }
 
+    /* Disabled states - per-variant to maintain tonal identity */
+
+    /* Filled buttons - use lighter background tokens */
+    :host([variant="primary"]) button:disabled {
+      background: var(--ag-primary-background);
+      color: var(--ag-primary-text);
+    }
+
+    :host([variant="success"]) button:disabled {
+      background: var(--ag-success-background);
+      color: var(--ag-success-text);
+    }
+
+    :host([variant="warning"]) button:disabled {
+      background: var(--ag-warning-background);
+      color: var(--ag-warning-text);
+    }
+
+    :host([variant="danger"]) button:disabled {
+      background: var(--ag-danger-background);
+      color: var(--ag-danger-text);
+    }
+
+    :host([variant="secondary"]) button:disabled,
     button:disabled {
-      cursor: not-allowed;
       background: var(--ag-background-disabled);
+      color: var(--ag-text-tertiary);
+    }
+
+    :host([variant="monochrome"]) button:disabled {
+      background: var(--ag-background-tertiary);
+      color: var(--ag-text-tertiary);
+    }
+
+    /* Bordered buttons - dim the border and text with opacity */
+    :host([bordered]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* Ghost and link buttons - dim with opacity */
+    :host([ghost]) button:disabled,
+    :host([link]) button:disabled {
+      opacity: 60%;
+      background: transparent;
+    }
+
+    /* All disabled buttons get not-allowed cursor */
+    button:disabled {
+      cursor: not-allowed;
     }
 
     button:focus-visible,

package/src/components/Drawer/v1/dialog--drawer-bottom.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-bottom"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-bottom"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog--drawer-end.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-end"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-end"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog--drawer-start.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-start"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-start"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog--drawer-top.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-top"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-top"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog-demo.css

@@ -0,0 +1,13 @@
+.dialog h1 {
+  margin: 0;
+
+  /* Since this is in a modal we want to force it smaller */
+  font-size: var(--agnostic-h3);
+  font-weight: 400;
+  line-height: 1;
+  margin-block-end: var(--fluid-16);
+}
+
+.dialog-form-demo > input {
+  margin-block-end: var(--fluid-24);
+}

package/src/components/Drawer/v1/dialog.config.yml

@@ -0,0 +1,5 @@
+title: Dialog
+notes: |
+  Dialog is a base-level implementation of a dialog component that can/will be leveraged for other components like popover, modal, menu, etc. Currently, the demo here is utilizing Kitty Giraudel's [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog) which is a very clean styling-agnostic JavaScript implementation that supports what you'd expect from an a11y-compliant dialog and has saved me a lot of time while I figure out the styles. Thus, the structure should be consistent with what `a11y-dialog` recommends in terms of markup structure. The `a11y-dialog` script is currently pulled in via CDN.
+
+  To be absolutely 100% clear, if you utilize AgnosticUI's CSS package, you only get the HTML/CSS for dialog. The functionality in terms of showing / dismissing the dialog, navigating with your keyboard, etc., is being handled by [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog). The AgnosticUI framework implementations (React, Angular, Svelte, Vue, etc.) likely WILL handle said functionality once they've been implemented (not the case at time of writing).

package/src/components/Drawer/v1/dialog.css

@@ -0,0 +1,99 @@
+.dialog,
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.dialog {
+  z-index: 1001;
+  display: flex;
+}
+
+.dialog[aria-hidden="true"] {
+  display: none;
+}
+
+.dialog-overlay {
+  background-color: rgb(50 50 50 / 60%);
+  animation: fade-in var(--agnostic-timing-fast) both;
+}
+
+.dialog-content {
+  background-color: var(--agnostic-light);
+  margin: auto;
+  z-index: 1001;
+  position: relative;
+  padding: var(--fluid-16);
+  max-width: 90%;
+  width: 600px;
+  border-radius: var(--agnostic-radius);
+}
+
+.dialog-fade-in {
+  animation: fade-in var(--agnostic-timing-fast) both;
+}
+
+.dialog-slide-up {
+  animation: slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
+}
+
+/**
+ * Cannot use two separate CSS classes with animation: foo, bar
+ * as the later class will overwrite the first (so this combines)
+ */
+.dialog-slide-up-fade-in {
+  animation:
+    fade-in var(--agnostic-timing-fast) both,
+    slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
+}
+
+@media screen and (min-width: 700px) {
+  .dialog-content {
+    padding: var(--fluid-32);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0%;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(10%);
+  }
+}
+
+/* Shared with AgnosticUI close buton so only need positioning and transition */
+.dialog-close {
+  position: absolute;
+  top: var(--fluid-8);
+  right: var(--fluid-8);
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .dialog-slide-up-fade-in,
+  .dialog-fade-in,
+  .dialog-slide-up,
+  .dialog-content {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+@media only screen and (min-width: 576px) {
+  .dialog-close {
+    top: var(--fluid-12);
+    right: var(--fluid-12);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .dialog-close {
+    top: var(--fluid-16);
+    right: var(--fluid-16);
+  }
+}

package/src/components/Drawer/v1/dialog.hbs

@@ -0,0 +1,48 @@
+<div class="dialog"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="dialog-example-title"
+     aria-describedby="dialog-example-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="dialog-example-title">Subscribe to our newsletter</h1>
+      <p id="dialog-example-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open the dialog
+</button>
+

package/src/components/Drawer/v1/drawer-animations.css

@@ -0,0 +1,52 @@
+/**
+ * Place these alongside the content like:
+ * <div class="dialog-content drawer-content drawer-slide-start"...
+ */
+.drawer-slide-start {
+  animation: slide-start var(--agnostic-timing-fast) ease-in-out;
+}
+
+.drawer-slide-end {
+  animation: slide-end var(--agnostic-timing-fast) ease-in-out;
+}
+
+.drawer-slide-bottom {
+  animation: slide-bottom var(--agnostic-timing-fast) ease-in-out;
+}
+
+.drawer-slide-top {
+  animation: slide-top var(--agnostic-timing-fast) ease-in-out;
+}
+
+@keyframes slide-top {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-bottom {
+  from {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes slide-start {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-end {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .drawer-slide-top,
+  .drawer-slide-bottom,
+  .drawer-slide-start,
+  .drawer-slide-end {
+    transition-duration: 0.001ms !important;
+  }
+}

package/src/components/Drawer/v1/drawer.css

@@ -0,0 +1,50 @@
+.drawer-start {
+  right: initial;
+}
+
+.drawer-start[aria-hidden] {
+  transform: none;
+}
+
+.drawer-end {
+  left: initial;
+}
+
+.drawer-end[aria-hidden] {
+  transform: none;
+}
+
+.drawer-top {
+  bottom: initial;
+  transform: none;
+}
+
+.drawer-top[aria-hidden] {
+  transform: none;
+}
+
+.drawer-bottom {
+  top: initial;
+  transform: none;
+}
+
+.drawer-bottom[aria-hidden] {
+  transform: none;
+}
+
+.drawer-content {
+  margin: initial;
+  max-width: initial;
+  border-radius: initial;
+}
+
+.drawer-start .drawer-content,
+.drawer-end .drawer-content {
+  width: 25rem;
+}
+
+.drawer-top .drawer-content,
+.drawer-bottom .drawer-content {
+  height: 25vh;
+  width: 100%;
+}

package/src/components/Timeline/react/ReactTimeline.tsx

@@ -1,34 +1,57 @@
-// v2/lib/src/components/Timeline/react/Timeline.tsx
-import React from "react";
-import { createComponent } from "@lit/react";
-import {
-  AgTimeline as AgTimelineWC,
-  AgTimelineItem as AgTimelineItemWC,
-} from "../core/Timeline.js";
-import type { AgTimelineProps, AgTimelineItemProps } from "../core/Timeline.js";
+// v2/lib/src/components/Timeline/react/ReactTimeline.tsx
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { AgTimeline as AgTimelineWC, AgTimelineItem as AgTimelineItemWC } from '../core/Timeline.js';
+
+// Extend React JSX IntrinsicElements to include custom timeline elements
+declare module 'react/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'ag-timeline-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+// Define the props for the Timeline component
+export interface ReactTimelineProps {
+  orientation?: 'horizontal' | 'vertical';
+  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'monochrome' | '';
+  compact?: boolean;
+  ariaLabel?: string;
+  responsive?: boolean;
+  children?: React.ReactNode;
+}
 
 // Create React wrapper for Timeline
 export const ReactTimeline = createComponent({
-  tagName: "ag-timeline",
+  tagName: 'ag-timeline',
   elementClass: AgTimelineWC,
   react: React,
-  events: {
-    onSlotChange: "slotchange",
-  },
-});
-
-// Create React wrapper for TimelineItem
-export const ReactTimelineItem = createComponent({
-  tagName: "ag-timeline-item",
-  elementClass: AgTimelineItemWC,
-  react: React,
 });
 
-// Export types with better names for React context
-export type ReactTimelineProps = AgTimelineProps & {
+// Define the props for the TimelineItem component
+export interface ReactTimelineItemProps {
+  start?: React.ReactNode;
+  marker?: React.ReactNode;
+  end?: React.ReactNode;
   children?: React.ReactNode;
-};
+}
 
-export type ReactTimelineItemProps = AgTimelineItemProps & {
-  children?: React.ReactNode;
+// Custom TimelineItem to handle slots as props
+export const ReactTimelineItem: React.FC<ReactTimelineItemProps> = ({ start, marker, end, children }) => {
+  return (
+    <ag-timeline-item>
+      {start && <div slot="ag-start">{start}</div>}
+      {marker && <div slot="ag-marker">{marker}</div>}
+      {end && <div slot="ag-end">{end}</div>}
+      {children}
+    </ag-timeline-item>
+  );
 };
+
+// Original TimelineItem wrapper (if needed for other purposes)
+export const ReactTimelineItemWC = createComponent({
+  tagName: 'ag-timeline-item',
+  elementClass: AgTimelineItemWC,
+  react: React,
+});

package/src/styles/ag-tokens.css

@@ -190,4 +190,5 @@
   --ag-rating-filled-success: #238636;
   --ag-rating-filled-warning: #9a6700;
   --ag-rating-filled-danger: #cf222e;
+  --ag-rating-filled-secondary: #6b7280;
 }

package/RTL_IMPLEMENTATION_PLAN.md

@@ -1,295 +0,0 @@
-# RTL Support Implementation Plan - AgnosticUI v2
-
-## Goal
-Convert all directional CSS properties to logical properties to support RTL (Right-to-Left) languages without breaking existing functionality.
-
-## Overview
-This is primarily a search-and-replace task to convert directional properties (left/right) to logical properties (inline-start/inline-end). However, there are edge cases that need careful handling.
-
----
-
-## Implementation Steps
-
-### Step 1: Convert Spacing Properties (Margin & Padding) ✅ COMPLETED
-**Scope:** 17 occurrences in main library (`v2/lib/src/`) - all converted
-
-**Search & Replace:**
-- `margin-left:` → `margin-inline-start:`
-- `margin-right:` → `margin-inline-end:`
-- `padding-left:` → `padding-inline-start:`
-- `padding-right:` → `padding-inline-end:`
-
-**Priority Files:**
-- AspectRatio component
-- Loader component
-- SidebarNav component
-- Input component (backup file)
-- Checkbox component (mixed usage)
-- Pagination component (mixed usage)
-
-**Gotchas:**
-- None - these are safe to replace
-
----
-
-### Step 2: Convert Border Properties ✅ COMPLETED
-**Scope:** 56 occurrences in main library (`v2/lib/src/`) - all converted (42 borders + 14 border-radius)
-
-**Search & Replace:**
-- `border-left:` → `border-inline-start:`
-- `border-right:` → `border-inline-end:`
-- `border-left-width:` → `border-inline-start-width:`
-- `border-right-width:` → `border-inline-end-width:`
-- `border-left-color:` → `border-inline-start-color:`
-- `border-right-color:` → `border-inline-end-color:`
-- `border-left-style:` → `border-inline-start-style:`
-- `border-right-style:` → `border-inline-end-style:`
-
-**Priority Files:**
-- Alert component (`border-left-width`, `border-left-color`)
-- Combobox component (`border-right-color`, `border-right`)
-
-**Gotchas:**
-- Border radius properties (if any) need special handling:
-  - `border-top-left-radius` → `border-start-start-radius`
-  - `border-top-right-radius` → `border-start-end-radius`
-  - `border-bottom-left-radius` → `border-end-start-radius`
-  - `border-bottom-right-radius` → `border-end-end-radius`
-
----
-
-### Step 3: Convert Text Alignment ✅ COMPLETED
-**Scope:** 7 occurrences in main library (`v2/lib/src/`) - all converted
-
-**Search & Replace:**
-- `text-align: left` → `text-align: start`
-- `text-align: right` → `text-align: end`
-
-**Priority Files:**
-- Table component (v2/lib/src/styles/table.css:16, 24, 180, 192)
-
-**Gotchas:**
-- `text-align: center` stays as-is
-- Double-check that `start`/`end` work in your target browser support matrix (modern browsers only)
-
----
-
-### Step 4: Convert Positioning Properties ✅
-
-**Scope:** ~50+ occurrences across 15+ files
-
-**Search & Replace:**
-- `left:` → `inset-inline-start:`
-- `right:` → `inset-inline-end:`
-- `left: 0; right: 0;` → `inset-inline: 0;`
-- `top: 0; left: 0; right: 0; bottom: 0;` → `inset: 0;`
-
-**Files Converted:**
-- table.css, positioning.ts (utility)
-- BadgeFx, SkeletonLoader, ScrollProgress, Dialog
-- Sidebar, ScrollToButton, CloseButton
-- MessageBubble, Toggle, Loader, ButtonFx
-- Menu, Slider, Combobox
-- Toast, Checkbox
-
-**Gotchas:**
-- **CRITICAL**: Only for `position: absolute`, `position: fixed`, or `position: sticky` elements
-- Check for instances where `left: 0; right: 0;` is used together (might be better as `inset-inline: 0;`)
-- Do NOT convert `left`/`right` in transform functions (see Step 5)
-
-**Manual Review Needed:**
-- Search for `position: absolute` and check nearby `left`/`right` properties
-- Search for `position: fixed` and check nearby `left`/`right` properties
-
----
-
-### Step 5: Handle Transforms & Animations ✅
-
-**Scope:** Reviewed all `translateX` usage, added RTL support to 5 components with directional animations
-
-**Components with RTL Support Added:**
-- **positioning.ts** - Utility for drawer start/end slide animations
-- **Dialog** - Drawer mode start/end positioning
-- **Toast** - Start/end position slide animations
-- **Toggle** - Handle movement (checked state)
-- **ButtonFx** - Side-slide hover effect
-
-**Components Skipped (decorative/centering only):**
-- Sidebar - Already has RTL support ✓
-- Slider - Uses `translateX(-50%)` for centering only
-- BadgeFx, SkeletonLoader - Shimmer effects (decorative)
-- motion.styles.ts - Shake and highlight-sweep animations (decorative)
-
-**Pattern Used:**
-All RTL overrides follow the Sidebar pattern using `:host-context([dir="rtl"])`:
-```css
-/* LTR (default) */
-.element {
-  transform: translateX(-100%);
-}
-
-/* RTL override */
-:host-context([dir="rtl"]) .element {
-  transform: translateX(100%);
-}
-```
-
-**Gotchas:**
-- Cannot simply replace `translateX` with a logical property
-- Requires `:host-context([dir="rtl"])` or `[dir="rtl"]` selectors for overrides
-- Only directional animations need RTL support; centering and decorative effects don't
-
----
-
-### Step 6: Convert Size Properties (Width & Height)
-
-**Scope:** ~74 CSS property occurrences (excluding media queries, docs, and tests)
-
-**Search & Replace:**
-- `min-width:` → `min-inline-size:`
-- `max-width:` → `max-inline-size:`
-- `min-height:` → `min-block-size:`
-- `max-height:` → `max-block-size:`
-
-**CRITICAL Gotcha - Media Queries:**
-Logical properties do NOT work in media queries yet. You CANNOT replace:
-- `@media (min-width: 640px)` - Must stay as-is ❌
-- `@media (max-width: 1024px)` - Must stay as-is ❌
-
-Only replace size properties in CSS property declarations:
-```css
-/* ✅ CAN REPLACE */
-.element {
-  min-width: 200px;          → min-inline-size: 200px;
-  max-width: 100%;           → max-inline-size: 100%;
-  min-height: 100px;         → min-block-size: 100px;
-  max-height: 90vh;          → max-block-size: 90vh;
-}
-
-/* ❌ CANNOT REPLACE */
-@media (min-width: 640px) {  → Leave as-is!
-  /* styles */
-}
-```
-
-**Action:**
-1. Search for `min-width:`, `max-width:`, `min-height:`, `max-height:` in CSS property declarations
-2. Verify each occurrence is NOT in a media query
-3. Replace with logical equivalent
-4. Skip .md, .spec.ts, and demo files (documentation/tests)
-
-**Priority Files:**
-- form-control-styles.ts (4 occurrences)
-- positioning.ts (4 occurrences)
-- Popover, Dialog, Toast, Combobox components
-- Button, Icon, IconButton components
-- Many other components (~30 files total)
-
-**Gotchas:**
-- Media queries MUST stay as physical properties (min-width/max-width)
-- Only convert actual CSS property declarations
-- Watch for dynamically generated styles in TypeScript/JavaScript
-
----
-
-### Step 7: Update Class Names (Semantic Cleanup)
-
-**Optional but Recommended:**
-Update class names to be semantically correct:
-- `.alert-border-left` → `.alert-border-start`
-- `.margin-left-*` → `.margin-inline-start-*`
-- Any other directional class names
-
-**Action:**
-- Search for class names containing "left" or "right"
-- Rename to "start" or "end" where appropriate
-- Update corresponding CSS and component usage
-
-**Gotchas:**
-- This is a breaking change if classes are exposed as public API
-- Consider deprecation strategy if needed
-
----
-
-### Step 8: Test RTL Rendering
-
-**Action:**
-1. Create test HTML files with `dir="rtl"` attribute
-2. Visually test critical components:
-   - Alert (border should appear on the right in RTL)
-   - Table (text alignment should flip)
-   - Combobox (borders should flip)
-   - Form controls (labels should flip with start/end positioning)
-   - Sidebar (should slide from correct direction)
-3. Run existing test suite to ensure no regressions
-
-**Test Checklist:**
-- [ ] Alert component border appears on correct side in RTL
-- [ ] Table text aligns correctly in RTL
-- [ ] Form controls with `labelPosition="start"` appear on right side in RTL
-- [ ] Form controls with `labelPosition="end"` appear on left side in RTL
-- [ ] Sidebar animations work correctly in RTL
-- [ ] No visual regressions in LTR mode
-
----
-
-## Execution Strategy
-
-### Recommended Approach
-1. Start with Steps 1-3 (spacing, borders, text-align) - these are safest
-2. Do Step 4 (positioning) with manual review of each file
-3. Do Step 5 (transforms) with careful testing
-4. Do Step 6 (size properties) - safe but watch for media queries
-5. Optionally do Step 7 (class names) if you want semantic correctness
-6. Do Step 8 (testing) throughout the process
-
-### Automation
-You can use global find-and-replace for Steps 1-3, but recommend:
-- Do it file-by-file or component-by-component
-- Test after each component to catch issues early
-- Commit after each component for easy rollback
-
-### Browser Support
-CSS logical properties are supported in:
-- Chrome 87+
-- Firefox 66+
-- Safari 14.1+
-- Edge 87+
-
-If you need to support older browsers, you'll need fallbacks or a different strategy.
-
----
-
-## Risks & Mitigations
-
-| Risk | Mitigation |
-|------|------------|
-| Breaking existing layouts | Test each component after changes; commit frequently |
-| Transform animations not flipping | Use `:host-context([dir="rtl"])` overrides (see Sidebar example) |
-| Class name changes breaking user code | Skip Step 6, or provide deprecation warning |
-| Browser compatibility | Check caniuse.com for logical properties support |
-
----
-
-## Estimated Effort
-
-- Step 1 (spacing): 1-2 hours (bulk search-replace + testing) ✅ COMPLETED
-- Step 2 (borders): 30 minutes
-- Step 3 (text-align): 15 minutes
-- Step 4 (positioning): 1 hour (manual review needed)
-- Step 5 (transforms): 1 hour (manual review + testing)
-- Step 6 (size properties): 1-2 hours (careful to avoid media queries)
-- Step 7 (class names): 1 hour (optional)
-- Step 8 (testing): 1-2 hours
-
-**Total: 6-10 hours** (without class name changes: 5-9 hours)
-
----
-
-## Success Criteria
-
-- [ ] All directional properties converted to logical properties
-- [ ] All existing tests pass
-- [ ] Visual testing with `dir="rtl"` shows correct rendering
-- [ ] No regressions in LTR mode
-- [ ] Components handle RTL without explicit RTL-specific code (except transforms)

package/dist/global.d.js

@@ -1 +0,0 @@
-import "react";

package/src/global.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'ag-accordion': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-      'ag-accordion-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
-        open?: boolean;
-        'heading-level'?: number;
-        disabled?: boolean;
-      }, HTMLElement>;
-      'ag-tooltip': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
-        content?: string;
-        placement?: string;
-        trigger?: string;
-      }, HTMLElement>;
-      'ag-menu-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
-        disabled?: boolean;
-        'aria-label'?: string;
-      }, HTMLElement>;
-      'ag-menu': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
-        open?: boolean;
-        placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-        'aria-label'?: string;
-        'aria-labelledby'?: string;
-      }, HTMLElement>;
-      'ag-menu-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
-        value?: string;
-        disabled?: boolean;
-        href?: string;
-        target?: string;
-      }, HTMLElement>;
-      'ag-menu-separator': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-    }
-  }
-}
-
-// Vue module declarations
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-  export default component;
-}