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

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/VueIcon.vue_vue_type_script_setup_true_lang-kC-nzMyu.js

@@ -1,25 +0,0 @@
-import { defineComponent as n, ref as l, createElementBlock as r, openBlock as i, mergeProps as s, renderSlot as a } from "vue";
-import "./components/Icon/core/Icon.js";
-const p = [".size", ".type", ".noFill"], u = /* @__PURE__ */ n({
-  __name: "VueIcon",
-  props: {
-    size: { default: "16" },
-    type: { default: "" },
-    noFill: { type: Boolean }
-  },
-  setup(e) {
-    const t = l(null);
-    return (o, c) => (i(), r("ag-icon", s({
-      ref_key: "agComponent",
-      ref: t,
-      ".size": e.size,
-      ".type": e.type,
-      ".noFill": e.noFill
-    }, o.$attrs), [
-      a(o.$slots, "default")
-    ], 48, p));
-  }
-});
-export {
-  u as _
-};

package/dist/components/Input/core/_Input.BACKUP.d.ts

@@ -1,114 +0,0 @@
-import { LitElement } from 'lit';
-
-export interface InputProps {
-    label?: string;
-    labelHidden?: boolean;
-    noLabel?: boolean;
-    ariaLabel?: string;
-    labelledBy?: string;
-    type?: string;
-    value?: string;
-    placeholder?: string;
-    rows?: number;
-    cols?: number;
-    size?: 'small' | 'default' | 'large';
-    capsule?: boolean;
-    rounded?: boolean;
-    underlined?: boolean;
-    underlinedWithBackground?: boolean;
-    inline?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    invalid?: boolean;
-    errorMessage?: string;
-    helpText?: string;
-    onClick?: (event: MouseEvent) => void;
-    onInput?: (event: InputEvent) => void;
-    onChange?: (event: Event) => void;
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
-}
-/**
- * AgInput - Foundation input component (starting minimal)
- *
- * Starting with basic label + input functionality, will build up incrementally
- */
-export declare class AgInput extends LitElement implements InputProps {
-    static styles: import('lit').CSSResult;
-    private _inputId;
-    /**
-     * Label Architecture - Flexible but Accessible by Default
-     */
-    label: string;
-    labelHidden: boolean;
-    noLabel: boolean;
-    ariaLabel: string;
-    labelledBy: string;
-    /**
-     * Input properties
-     */
-    type: string;
-    value: string;
-    placeholder: string;
-    /**
-     * Textarea-specific properties (when type="textarea")
-     */
-    rows: number;
-    cols: number;
-    /**
-     * v1 Parity - Size Variants
-     */
-    size: 'small' | 'default' | 'large';
-    /**
-     * v1 Parity - Styling Variants
-     */
-    capsule: boolean;
-    rounded: boolean;
-    underlined: boolean;
-    underlinedWithBackground: boolean;
-    inline: boolean;
-    /**
-     * v1 Parity - Addon Support
-     * REMOVED: hasLeftAddon and hasRightAddon props - now auto-detected
-     */
-    private _hasLeftAddon;
-    private _hasRightAddon;
-    /**
-     * Validation & State
-     */
-    required: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    invalid: boolean;
-    errorMessage: string;
-    helpText: string;
-    /**
-     * Event callback props (not reflected as attributes)
-     * Following AgnosticUI v2 event conventions for native events
-     */
-    onClick?: (event: MouseEvent) => void;
-    onInput?: (event: InputEvent) => void;
-    onChange?: (event: Event) => void;
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
-    constructor();
-    /**
-     * Event Handlers
-     * Following AgnosticUI v2 event conventions:
-     * - Native composed events (input, change, click) just invoke callbacks
-     * - Native non-bubbling events (focus, blur) re-dispatch from host + invoke callbacks
-     */
-    private _handleClick;
-    private _handleInput;
-    private _handleChange;
-    private _handleFocus;
-    private _handleBlur;
-    /**
-     * Handle slot changes to detect if addons are present
-     */
-    private _handleSlotChange;
-    firstUpdated(): void;
-    render(): import('lit').TemplateResult<1>;
-}
-//# sourceMappingURL=_Input.BACKUP.d.ts.map

package/dist/components/Input/core/_Input.BACKUP.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_Input.BACKUP.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/core/_Input.BACKUP.ts"],"names":[],"mappings":"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"}