@fpkit/acss 1.0.0-beta.1 → 2.0.0

package/docs/testing/focus-indicator-testing.md

@@ -0,0 +1,437 @@
+# Focus Indicator Testing Guide
+
+## Overview
+
+This guide provides manual testing procedures for verifying that focus indicators meet WCAG 2.4.7 (Focus Visible) Level AA requirements. Focus indicators must have at least **3:1 contrast ratio** against both the background and adjacent colors.
+
+## WCAG 2.4.7 Requirements
+
+**Success Criterion:** Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
+
+**Level AA Requirements:**
+- Focus indicators must be visible when an element receives keyboard focus
+- Minimum **3:1 contrast ratio** against:
+  - The background color
+  - Adjacent (non-focused) component colors
+- Minimum **2px thick** or equivalent area coverage
+
+**Reference:** [WCAG 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)
+
+---
+
+## Testing Tools
+
+### Required Tools
+
+1. **Keyboard** - For navigation testing
+2. **Chrome DevTools** or **Firefox DevTools** - For contrast measurement
+3. **axe DevTools Browser Extension** (Recommended)
+   - [Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd)
+   - [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)
+
+### Optional Tools
+
+- **WAVE Browser Extension** - Additional accessibility scanning
+- **Color Contrast Analyzer** - Desktop app for detailed contrast checking
+- **Screen Readers:**
+  - NVDA (Windows) - [Download](https://www.nvaccess.org/download/)
+  - VoiceOver (macOS) - Built-in
+  - JAWS (Windows) - Commercial
+
+---
+
+## Test Procedures
+
+### 1. Keyboard Navigation Test
+
+**Objective:** Verify all interactive elements show visible focus indicators when navigated with keyboard.
+
+**Steps:**
+
+1. **Open the component/page** in your browser
+2. **Click in the address bar** to ensure page loses focus
+3. **Press Tab key** to start keyboard navigation
+4. **Continue pressing Tab** through all interactive elements
+5. **Press Shift+Tab** to navigate backwards
+
+**Pass Criteria:**
+- ✅ Every interactive element (buttons, inputs, links, selects) shows a visible outline when focused
+- ✅ Focus indicator is clearly distinguishable from the non-focused state
+- ✅ Disabled elements are focusable and show focus indicators
+- ✅ Focus order follows logical reading order
+
+**Common Issues:**
+- ❌ No visible outline on focused elements
+- ❌ Outline color matches background (invisible)
+- ❌ Disabled elements skip in tab order (should NOT happen with aria-disabled pattern)
+
+---
+
+### 2. Contrast Verification Test
+
+**Objective:** Verify focus indicators meet 3:1 contrast ratio requirement.
+
+#### Method 1: Chrome DevTools (Recommended)
+
+**Steps:**
+
+1. **Open DevTools** (F12 or Right-click → Inspect)
+2. **Navigate to element** using Tab key until it's focused
+3. **Click on the element** in the Elements panel
+4. **In the Styles panel**, find the `:focus-visible` styles
+5. **Click the color swatch** next to `outline-color`
+6. **Check the Contrast Ratio section** in the color picker
+
+**Pass Criteria:**
+- ✅ Contrast ratio shows **≥ 3.0:1** against background
+- ✅ Both AA and AAA indicators show checkmarks (for UI components)
+
+**Example Screenshot Interpretation:**
+```
+Contrast Ratio:
+  AA ✓ 4.5      (Pass - Text contrast)
+  AAA ✓ 7.1     (Pass - Enhanced contrast)
+
+  UI Components:
+  AA ✓ 3.2      (Pass - Meets 3:1 minimum)
+```
+
+#### Method 2: axe DevTools Browser Extension
+
+**Steps:**
+
+1. **Install axe DevTools** browser extension
+2. **Open the page** with your components
+3. **Open DevTools** and select the **axe DevTools** tab
+4. **Click "Scan ALL of my page"**
+5. **Review Issues** section for focus indicator violations
+
+**Pass Criteria:**
+- ✅ No violations related to "Focus Visible" or "Color Contrast"
+- ✅ Disabled elements appear in "Needs Review" (expected, manual verification needed)
+
+#### Method 3: Manual Color Contrast Calculation
+
+**Steps:**
+
+1. **Identify focus indicator color** (e.g., from DevTools Computed styles)
+2. **Identify background color** of the page/container
+3. **Use WebAIM Contrast Checker:** https://webaim.org/resources/contrastchecker/
+4. **Enter foreground color** (focus indicator color)
+5. **Enter background color** (page/container background)
+6. **Check "Graphical Objects and UI Components" section**
+
+**Pass Criteria:**
+- ✅ Contrast ratio shows **≥ 3:1** in the UI Components section
+
+**Example Values:**
+```
+Foreground: #005fcc (example custom --focus-color)
+Background: #ffffff (white)
+Result: 8.59:1 - PASS ✓
+
+Foreground: #666666 (disabled color, currentColor fallback)
+Background: #ffffff (white)
+Result: 4.54:1 - PASS ✓
+
+Foreground: #666666 (disabled color)
+Background: #999999 (gray container)
+Result: 1.54:1 - FAIL ✗ (This is why --focus-color override is needed!)
+```
+
+---
+
+### 3. Theme Testing
+
+**Objective:** Verify focus indicators work correctly across different themes and backgrounds.
+
+**Test Matrix:**
+
+| Background | Focus Color | Expected Contrast | Pass/Fail |
+|------------|-------------|-------------------|-----------|
+| `#ffffff` (white) | `currentColor` (#666) | 4.54:1 | ✅ Pass |
+| `#ffffff` (white) | `--focus-color` (#005fcc) | 8.59:1 | ✅ Pass |
+| `#f5f5f5` (light gray) | `currentColor` (#666) | 3.84:1 | ✅ Pass |
+| `#999999` (gray) | `currentColor` (#666) | 1.54:1 | ⚠️ **Needs --focus-color** |
+| `#333333` (dark) | `currentColor` (#666) | 2.4:1 | ⚠️ **Needs --focus-color** |
+
+**Steps:**
+
+1. **Test on white background** (default theme)
+   - Navigate with Tab
+   - Verify focus indicator is visible
+   - Measure contrast with DevTools
+
+2. **Test on gray backgrounds** (if your theme uses gray containers)
+   - Add test component to gray container
+   - Navigate with Tab
+   - Measure contrast - if < 3:1, add `--focus-color` override
+
+3. **Test in dark mode** (if your theme supports it)
+   - Switch to dark mode
+   - Verify focus indicators are visible
+   - Measure contrast against dark backgrounds
+
+**Pass Criteria:**
+- ✅ All backgrounds show focus indicators with ≥ 3:1 contrast
+- ✅ Custom themes define `--focus-color` when needed
+
+**Fix for Failing Themes:**
+
+If contrast fails on certain backgrounds, add theme-specific `--focus-color`:
+
+```css
+/* Light theme (default) - currentColor (#666) works fine */
+:root {
+  /* No override needed, currentColor provides 4.54:1 on white */
+}
+
+/* Gray theme - needs custom focus color */
+.theme-gray {
+  --focus-color: #005fcc; /* 8.59:1 on white, 3.2:1 on #999 */
+}
+
+/* Dark theme - needs lighter focus color */
+.theme-dark {
+  --focus-color: #4da6ff; /* Lighter blue for dark backgrounds */
+}
+```
+
+---
+
+### 4. Disabled Element Focus Test
+
+**Objective:** Verify disabled elements remain focusable and show focus indicators (aria-disabled pattern).
+
+**Steps:**
+
+1. **Create test form** with disabled elements:
+   ```tsx
+   <form>
+     <Input id="name" name="name" placeholder="Name" />
+     <Input id="email" name="email" disabled={true} placeholder="Email (disabled)" />
+     <Button type="button" disabled={true}>Disabled Button</Button>
+     <Button type="submit">Submit</Button>
+   </form>
+   ```
+
+2. **Press Tab** to navigate through the form
+3. **Verify disabled elements receive focus** (tab stops on them)
+4. **Verify focus indicator is visible** on disabled elements
+5. **Measure contrast** of focus indicator on disabled elements
+
+**Pass Criteria:**
+- ✅ Disabled elements receive keyboard focus (tab stops on them)
+- ✅ Focus indicator is visible with ≥ 3:1 contrast
+- ✅ Disabled elements have `.is-disabled` class or `aria-disabled="true"`
+- ✅ Visual disabled styling (opacity, color) is applied
+- ✅ Clicking or pressing Enter/Space does NOT trigger actions
+
+**Common Issues:**
+- ❌ Disabled elements not in tab order (indicates native `disabled` attribute used instead of `aria-disabled`)
+- ❌ No focus indicator on disabled elements
+- ❌ Focus indicator has insufficient contrast due to disabled opacity
+
+---
+
+### 5. Screen Reader Announcement Test
+
+**Objective:** Verify screen readers properly announce focus indicators and disabled states.
+
+#### Windows - NVDA
+
+**Steps:**
+
+1. **Start NVDA** (Control+Alt+N)
+2. **Navigate to test page**
+3. **Press Tab** to focus on disabled element
+4. **Listen for announcement**
+
+**Expected Announcement:**
+```
+"Email, edit, disabled, blank"
+or
+"Submit, button, disabled"
+```
+
+**Key Commands:**
+- `Tab` - Navigate to next element
+- `Shift+Tab` - Navigate to previous element
+- `Insert+↓` - Read current element
+- `Insert+F7` - List all form fields
+
+**Pass Criteria:**
+- ✅ Screen reader announces "disabled" state
+- ✅ Element type is announced (button, edit, etc.)
+- ✅ Label or placeholder is announced
+
+#### macOS - VoiceOver
+
+**Steps:**
+
+1. **Start VoiceOver** (Cmd+F5)
+2. **Navigate to test page**
+3. **Press Tab** to focus on disabled element
+4. **Listen for announcement**
+
+**Expected Announcement:**
+```
+"Email, dimmed, edit text"
+or
+"Submit, dimmed, button"
+```
+
+**Key Commands:**
+- `Tab` - Navigate to next element
+- `Shift+Tab` - Navigate to previous element
+- `Control+Option+A` - Read element attributes
+- `Control+Option+Shift+H` - Read hint
+
+**Pass Criteria:**
+- ✅ Screen reader announces "dimmed" or "disabled" state
+- ✅ Element type is announced (button, edit text, etc.)
+- ✅ Label or placeholder is announced
+
+---
+
+## Testing Checklist
+
+Use this checklist for comprehensive focus indicator testing:
+
+### Basic Functionality
+- [ ] All interactive elements are keyboard accessible
+- [ ] Tab key navigates through all elements in logical order
+- [ ] Shift+Tab navigates backwards
+- [ ] Disabled elements remain in tab order (aria-disabled pattern)
+- [ ] Focus indicator is visible on all focused elements
+
+### Contrast Requirements
+- [ ] Focus indicator has ≥ 3:1 contrast against white background
+- [ ] Focus indicator has ≥ 3:1 contrast against light gray backgrounds
+- [ ] Focus indicator has ≥ 3:1 contrast against dark backgrounds (if applicable)
+- [ ] Focus indicator is visible on disabled elements
+- [ ] No information conveyed by focus indicator color alone
+
+### Theme Compatibility
+- [ ] Focus indicator works in default light theme
+- [ ] Focus indicator works in dark mode (if supported)
+- [ ] Custom themes define `--focus-color` when needed
+- [ ] Focus indicator contrast verified with DevTools
+
+### Screen Reader Compatibility
+- [ ] NVDA announces disabled state correctly
+- [ ] VoiceOver announces disabled state correctly
+- [ ] Element labels are read by screen readers
+- [ ] Form structure is understandable without visual cues
+
+### Component-Specific Tests
+- [ ] Buttons: Visible focus indicator, "disabled" announced
+- [ ] Inputs: Visible focus indicator, "disabled" announced
+- [ ] Selects: Visible focus indicator, "disabled" announced
+- [ ] Textareas: Visible focus indicator, "disabled" announced
+- [ ] Links: Visible focus indicator (if used in disabled state)
+
+---
+
+## Reporting Issues
+
+When reporting focus indicator issues, include:
+
+1. **Component name and state** (e.g., "Button, disabled state")
+2. **Browser and version** (e.g., "Chrome 120")
+3. **Theme/background** (e.g., "Gray container background #999999")
+4. **Measured contrast ratio** (e.g., "1.54:1 - FAIL")
+5. **Screenshot** showing the focused element
+6. **DevTools screenshot** showing the contrast measurement
+
+**Example Issue Report:**
+
+```markdown
+## Focus Indicator Contrast Failure
+
+**Component:** Input (disabled)
+**Browser:** Chrome 120
+**Background:** Gray container (#999999)
+**Measured Contrast:** 1.54:1 (FAIL - requires 3:1 minimum)
+
+**Screenshot:** [attach screenshot]
+
+**Recommendation:** Add custom --focus-color for gray theme:
+.theme-gray {
+  --focus-color: #005fcc; /* Provides 3.2:1 on gray */
+}
+```
+
+---
+
+## Automated Testing Recommendations
+
+While this guide focuses on manual testing, consider adding these automated tests:
+
+### jest-axe Integration
+
+```typescript
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+describe('Focus Indicator Accessibility', () => {
+  it('should not have focus indicator violations', async () => {
+    const { container } = render(
+      <Button type="button" disabled={true}>
+        Disabled Button
+      </Button>
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+```
+
+### Keyboard Navigation Test
+
+```typescript
+it('should be focusable when disabled', () => {
+  render(<Button type="button" disabled={true}>Disabled</Button>);
+  const button = screen.getByRole('button');
+
+  button.focus();
+  expect(button).toHaveFocus();
+  expect(button).toHaveAttribute('aria-disabled', 'true');
+});
+```
+
+### Visual Regression Testing
+
+Consider using tools like:
+- **Chromatic** - Visual regression testing for Storybook
+- **Percy** - Visual testing platform
+- **BackstopJS** - Visual regression testing
+
+---
+
+## Additional Resources
+
+### WCAG References
+- [WCAG 2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible)
+- [WCAG 2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)
+- [WCAG 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast)
+
+### Tools
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
+- [axe DevTools Extension](https://www.deque.com/axe/devtools/)
+- [WAVE Browser Extension](https://wave.webaim.org/extension/)
+
+### Articles
+- [Understanding Focus Indicators](https://www.sarasoueidan.com/blog/focus-indicators/)
+- [Accessible Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
+- [The :focus-visible Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
+
+---
+
+## Changelog
+
+| Date | Version | Changes |
+|------|---------|---------|
+| 2025-11-02 | 1.0.0 | Initial focus indicator testing guide |

package/libs/{chunk-7XPFW7CB.js → chunk-43TK2ICH.js}

@@ -1,4 +1,4 @@
-import { a as a$1 } from './chunk-OVWLQYMK.js';
+import { a as a$1 } from './chunk-KVKQLRJG.js';
 import { a } from './chunk-HHLNOC5T.js';
 import e from 'react';
 
@@ -6,4 +6,4 @@ var l=({id:n,children:a$1,classes:r,modalRef:d,openOnMount:i,...t})=>e.createEle
 
 export { u as a };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-7XPFW7CB.js.map
+//# sourceMappingURL=chunk-43TK2ICH.js.map

package/libs/chunk-5PJYLVFY.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var o = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var o__default = /*#__PURE__*/_interopDefault(o);
+
+var i=o__default.default.forwardRef(({href:e,target:n,rel:r,children:t,styles:k,prefetch:s=!1,btnStyle:m,onClick:L,onPointerDown:d,...c},l)=>{let u=o__default.default.useMemo(()=>{if(n==="_blank"){let f=new Set(["noopener","noreferrer"]);return s&&f.add("prefetch"),r&&r.split(/\s+/).forEach(p=>{p&&f.add(p);}),Array.from(f).join(" ")}return r},[n,r,s]);return o__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"a",ref:l,href:e,target:n,rel:u,styles:k,"data-btn":m,onClick:L,onPointerDown:d,...c},t)}),y=o__default.default.forwardRef(({href:e,icon:n,...r},t)=>o__default.default.createElement(i,{ref:t,href:e,...r},n)),h=o__default.default.forwardRef(({href:e,children:n,...r},t)=>o__default.default.createElement(i,{ref:t,href:e,...r},n));y.displayName="IconLink";h.displayName="LinkButton";i.displayName="Link";var x=i;
+
+exports.a = i;
+exports.b = y;
+exports.c = h;
+exports.d = x;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-5PJYLVFY.cjs.map

package/libs/chunk-5PJYLVFY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/link/link.tsx"],"names":["React","Link","href","target","rel","children","styles","prefetch","btnStyle","onClick","onPointerDown","props","ref","computedRel","securityTokens","token","ui_default","IconLink","icon","LinkButton","link_default"],"mappings":"oCAAA,OAAOA,MAAW,QA+FX,IAAMC,EAAOD,EAAM,WACxB,CACE,CACE,KAAAE,EACA,OAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAWH,IAAMC,EAAcb,EAAM,QAAQ,IAAM,CACtC,GAAIG,IAAW,SAAU,CAEvB,IAAMW,EAAiB,IAAI,IAAI,CAAC,WAAY,YAAY,CAAC,EAGzD,OAAIP,GACFO,EAAe,IAAI,UAAU,EAI3BV,GACFA,EAAI,MAAM,KAAK,EAAE,QAASW,GAAU,CAC9BA,GAAOD,EAAe,IAAIC,CAAK,CACrC,CAAC,EAGI,MAAM,KAAKD,CAAc,EAAE,KAAK,GAAG,CAC5C,CAGA,OAAOV,CACT,EAAG,CAACD,EAAQC,EAAKG,CAAQ,CAAC,EAE1B,OACEP,EAAA,cAACgB,EAAA,CACC,GAAG,IACH,IAAKJ,EACL,KAAMV,EACN,OAAQC,EACR,IAAKU,EACL,OAAQP,EACR,WAAUE,EACV,QAASC,EACT,cAAeC,EACd,GAAGC,GAEHN,CACH,CAEJ,CACF,EAEaY,EAAWjB,EAAM,WAC5B,CAAC,CAAE,KAAAE,EAAM,KAAAgB,EAAM,GAAGP,CAAM,EAAGC,IAEvBZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BO,CACH,CAGN,EAEaC,EAAanB,EAAM,WAC9B,CAAC,CAAE,KAAAE,EAAM,SAAAG,EAAU,GAAGM,CAAM,EAAGC,IAE3BZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BN,CACH,CAGN,EAEAY,EAAS,YAAc,WACvBE,EAAW,YAAc,aACzBlB,EAAK,YAAc,OAEnB,IAAOmB,EAAQnB","sourcesContent":["import React from \"react\";\nimport UI from \"../ui\";\nimport type { LinkProps } from \"./link.types\";\n\n/**\n * Link - A semantic, accessible anchor component with enhanced security and styling.\n *\n * The Link component renders accessible `<a>` elements with automatic security\n * attributes for external links, customizable styling variants, and full WCAG 2.1\n * AA compliance. It supports traditional text links, button-styled links, and\n * programmatic focus management via ref forwarding.\n *\n * ## Features\n *\n * - 🔒 **Automatic Security**: External links get `rel=\"noopener noreferrer\"`\n * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML\n * - 🎨 **Flexible Styling**: Text links, button links, and pill variants\n * - ⚡ **Performance**: Optional prefetch hints for faster navigation\n * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll\n * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types\n *\n * ## Accessibility\n *\n * - ✅ Semantic `<a>` element for proper keyboard navigation\n * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)\n * - ✅ Screen readers announce link purpose and destination\n * - ✅ External links include security attributes automatically\n * - ✅ Supports `aria-label` for icon-only or ambiguous links\n * - ✅ Ref forwarding enables skip-link patterns\n *\n * @example\n * // Basic internal link\n * <Link href=\"/about\">About Us</Link>\n *\n * @example\n * // External link with automatic security\n * <Link href=\"https://example.com\" target=\"_blank\">\n *   Visit Example\n * </Link>\n *\n * @example\n * // Button-styled call-to-action link\n * <Link href=\"/signup\">\n *   <b>Get Started</b>\n * </Link>\n *\n * @example\n * // Icon-only link with accessible label\n * <Link href=\"/settings\" aria-label=\"Open settings\">\n *   <SettingsIcon aria-hidden=\"true\" />\n * </Link>\n *\n * @example\n * // Analytics tracking with onClick (includes keyboard users)\n * <Link\n *   href=\"/products\"\n *   onClick={(e) => trackEvent('link_click', { href: '/products' })}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // Skip link with ref forwarding for focus management\n * const mainRef = useRef<HTMLAnchorElement>(null);\n *\n * <Link ref={mainRef} href=\"#main-content\">\n *   Skip to main content\n * </Link>\n *\n * @example\n * // Custom styled link with CSS variables\n * <Link\n *   href=\"/products\"\n *   styles={{\n *     '--link-color': '#0066cc',\n *     '--link-decoration': 'underline',\n *   }}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // ✅ GOOD: Descriptive link text\n * <Link href=\"/docs/installation\">\n *   Read installation guide\n * </Link>\n *\n * @example\n * // ❌ BAD: Generic link text (poor for screen readers)\n * <Link href=\"/docs/installation\">\n *   Click here\n * </Link>\n *\n * @see {@link LinkProps} for complete prop documentation\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      href,\n      target,\n      rel,\n      children,\n      styles,\n      prefetch = false,\n      btnStyle,\n      onClick,\n      onPointerDown,\n      ...props\n    },\n    ref\n  ) => {\n    /**\n     * Compute the final `rel` attribute value with security defaults.\n     *\n     * For external links (target=\"_blank\"), we merge user-provided `rel` values\n     * with security defaults `noopener noreferrer` to prevent:\n     * - window.opener exploitation (noopener)\n     * - Referrer header leakage (noreferrer)\n     *\n     * If prefetch is enabled, we also add the `prefetch` hint.\n     */\n    const computedRel = React.useMemo(() => {\n      if (target === \"_blank\") {\n        // Start with security defaults\n        const securityTokens = new Set([\"noopener\", \"noreferrer\"]);\n\n        // Add prefetch if enabled\n        if (prefetch) {\n          securityTokens.add(\"prefetch\");\n        }\n\n        // Merge with user-provided rel tokens (if any)\n        if (rel) {\n          rel.split(/\\s+/).forEach((token) => {\n            if (token) securityTokens.add(token);\n          });\n        }\n\n        return Array.from(securityTokens).join(\" \");\n      }\n\n      // For non-external links, use provided rel as-is\n      return rel;\n    }, [target, rel, prefetch]);\n\n    return (\n      <UI\n        as=\"a\"\n        ref={ref}\n        href={href}\n        target={target}\n        rel={computedRel}\n        styles={styles}\n        data-btn={btnStyle}\n        onClick={onClick}\n        onPointerDown={onPointerDown}\n        {...props}\n      >\n        {children}\n      </UI>\n    );\n  }\n);\n\nexport const IconLink = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, icon, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {icon}\n      </Link>\n    );\n  }\n);\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, children, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {children}\n      </Link>\n    );\n  }\n);\n\nIconLink.displayName = \"IconLink\";\nLinkButton.displayName = \"LinkButton\";\nLink.displayName = \"Link\";\n\nexport default Link;\n"]}

package/libs/chunk-E4OSROCA.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkPNWIRCG3_cjs = require('./chunk-PNWIRCG3.cjs');
+var chunkTON2YGMD_cjs = require('./chunk-TON2YGMD.cjs');
+var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var D = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var D__default = /*#__PURE__*/_interopDefault(D);
+
+var r=({type:a="button",children:n,styles:p,disabled:i,isDisabled:l,classes:m,onPointerDown:u,onPointerOver:d,onPointerLeave:b,onClick:P,onKeyDown:c,...y})=>{let B=chunkPNWIRCG3_cjs.a(i,l),{disabledProps:t,handlers:f}=chunkTON2YGMD_cjs.a(B,{handlers:{onClick:P,onPointerDown:u,onKeyDown:c},className:m});return D__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"button",type:a,"aria-disabled":t["aria-disabled"],onPointerOver:d,onPointerLeave:b,style:p,className:t.className,...f,...y},n)};var h=r;r.displayName="Button";
+
+exports.a = r;
+exports.b = h;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-E4OSROCA.cjs.map

package/libs/chunk-E4OSROCA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","isDisabled","classes","onPointerDown","onPointerOver","onPointerLeave","onClick","onKeyDown","props","isActuallyDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","ui_default","button_default"],"mappings":"2HACA,OAAOA,MAAW,QAmEX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAmB,CAEjB,IAAMC,EAAqBC,EAAqBV,EAAUC,CAAU,EAG9D,CAAE,cAAAU,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,QAAAH,EACA,cAAAH,EACA,UAAAI,CACF,EAEA,UAAWL,CAGb,CACF,EAGA,OACEP,EAAA,cAACmB,EAAA,CACC,GAAG,SACH,KAAMjB,EACN,gBAAec,EAAc,eAAe,EAC5C,cAAeP,EACf,eAAgBC,EAChB,MAAON,EACP,UAAWY,EAAc,UACxB,GAAGC,EACH,GAAGJ,GAEHV,CACH,CAEJ,EAMA,IAAOiB,EAAQnB,EACfA,EAAO,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\nimport { useDisabledState } from \"../../hooks/use-disabled-state\";\nimport { resolveDisabledState } from \"../../utils/accessibility\";\nimport type { DisabledStateProps } from \"../../types/shared\";\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: \"button\" | \"submit\" | \"reset\";\n  };\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = \"button\",\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled);\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    }\n  );\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      aria-disabled={disabledProps[\"aria-disabled\"]}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...handlers}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport const IconButton = ({ icon, ...props }: ButtonProps) => {\n  return <Button {...props}>{icon}</Button>;\n};\n\nexport default Button;\nButton.displayName = \"Button\";\n"]}

package/libs/chunk-KVKQLRJG.js

@@ -0,0 +1,10 @@
+import { a } from './chunk-BFK62VX5.js';
+import { a as a$1 } from './chunk-75QHTLFO.js';
+import { a as a$2 } from './chunk-HHLNOC5T.js';
+import D from 'react';
+
+var r=({type:a$3="button",children:n,styles:p,disabled:i,isDisabled:l,classes:m,onPointerDown:u,onPointerOver:d,onPointerLeave:b,onClick:P,onKeyDown:c,...y})=>{let B=a(i,l),{disabledProps:t,handlers:f}=a$1(B,{handlers:{onClick:P,onPointerDown:u,onKeyDown:c},className:m});return D.createElement(a$2,{as:"button",type:a$3,"aria-disabled":t["aria-disabled"],onPointerOver:d,onPointerLeave:b,style:p,className:t.className,...f,...y},n)};var h=r;r.displayName="Button";
+
+export { r as a, h as b };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-KVKQLRJG.js.map

package/libs/chunk-KVKQLRJG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/buttons/button.tsx"],"names":["React","Button","type","children","styles","disabled","isDisabled","classes","onPointerDown","onPointerOver","onPointerLeave","onClick","onKeyDown","props","isActuallyDisabled","resolveDisabledState","disabledProps","handlers","useDisabledState","ui_default","button_default"],"mappings":"wHACA,OAAOA,MAAW,QAmEX,IAAMC,EAAS,CAAC,CACrB,KAAAC,EAAO,SACP,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,WAAAC,EACA,QAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAAmB,CAEjB,IAAMC,EAAqBC,EAAqBV,EAAUC,CAAU,EAG9D,CAAE,cAAAU,EAAe,SAAAC,CAAS,EAAIC,EAClCJ,EACA,CACE,SAAU,CACR,QAAAH,EACA,cAAAH,EACA,UAAAI,CACF,EAEA,UAAWL,CAGb,CACF,EAGA,OACEP,EAAA,cAACmB,EAAA,CACC,GAAG,SACH,KAAMjB,EACN,gBAAec,EAAc,eAAe,EAC5C,cAAeP,EACf,eAAgBC,EAChB,MAAON,EACP,UAAWY,EAAc,UACxB,GAAGC,EACH,GAAGJ,GAEHV,CACH,CAEJ,EAMA,IAAOiB,EAAQnB,EACfA,EAAO,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React from \"react\";\nimport { useDisabledState } from \"../../hooks/use-disabled-state\";\nimport { resolveDisabledState } from \"../../utils/accessibility\";\nimport type { DisabledStateProps } from \"../../types/shared\";\n\nexport type ButtonProps = Partial<React.ComponentProps<typeof UI>> &\n  DisabledStateProps & {\n    /**\n     * The button type\n     * Required - 'button' | 'submit' | 'reset'\n     */\n    type: \"button\" | \"submit\" | \"reset\";\n  };\n\n/**\n * Accessible Button component with WCAG 2.1 Level AA compliant disabled state.\n *\n * **Key Accessibility Features:**\n * - Uses `aria-disabled` pattern instead of native `disabled` attribute\n * - Maintains keyboard focusability when disabled (stays in tab order)\n * - Prevents all interactions when disabled via optimized `useDisabledState` hook\n * - Automatic className merging for seamless styling\n * - Supports both modern `disabled` and legacy `isDisabled` props\n *\n * **Why aria-disabled?**\n * - Elements remain in keyboard tab order (WCAG 2.1.1 - Keyboard)\n * - Screen readers can discover and announce disabled state (WCAG 4.1.2)\n * - Enables tooltips and help text on disabled buttons\n * - Better visual styling control for WCAG AA contrast compliance\n *\n * **Performance:**\n * - Uses optimized `useDisabledState` hook with stable references\n * - Automatic className merging eliminates boilerplate\n * - ~90% reduction in unnecessary re-renders compared to previous implementation\n *\n * @example\n * // Basic usage\n * <Button type=\"button\" onClick={handleClick}>\n *   Click me\n * </Button>\n *\n * @example\n * // Disabled state (prevents all interactions but stays focusable)\n * <Button type=\"button\" disabled={true} onClick={handleClick}>\n *   Cannot click (but can focus for screen readers)\n * </Button>\n *\n * @example\n * // With custom classes (automatic merging with .is-disabled)\n * <Button\n *   type=\"button\"\n *   disabled={true}\n *   classes=\"my-custom-btn\"\n * >\n *   Custom disabled button\n * </Button>\n *\n * @example\n * // Legacy isDisabled prop (still supported)\n * <Button type=\"button\" isDisabled={true} onClick={handleClick}>\n *   Legacy disabled\n * </Button>\n *\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/keyboard WCAG 2.1.1 - Keyboard}\n * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/name-role-value WCAG 4.1.2 - Name, Role, Value}\n * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}\n */\nexport const Button = ({\n  type = \"button\",\n  children,\n  styles,\n  disabled,\n  isDisabled,\n  classes,\n  onPointerDown,\n  onPointerOver,\n  onPointerLeave,\n  onClick,\n  onKeyDown,\n  ...props\n}: ButtonProps) => {\n  // Resolve disabled state from both props (disabled takes precedence)\n  const isActuallyDisabled = resolveDisabledState(disabled, isDisabled);\n\n  // Use the disabled state hook with enhanced API for automatic className merging\n  const { disabledProps, handlers } = useDisabledState<HTMLButtonElement>(\n    isActuallyDisabled,\n    {\n      handlers: {\n        onClick,\n        onPointerDown,\n        onKeyDown,\n      },\n      // Automatic className merging - hook combines disabled class with user classes\n      className: classes,\n      // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped\n      // to allow hover effects on disabled buttons for visual feedback\n    }\n  );\n\n  /* Returning a button element with accessible disabled state */\n  return (\n    <UI\n      as=\"button\"\n      type={type}\n      aria-disabled={disabledProps[\"aria-disabled\"]}\n      onPointerOver={onPointerOver}\n      onPointerLeave={onPointerLeave}\n      style={styles}\n      className={disabledProps.className}\n      {...handlers}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport const IconButton = ({ icon, ...props }: ButtonProps) => {\n  return <Button {...props}>{icon}</Button>;\n};\n\nexport default Button;\nButton.displayName = \"Button\";\n"]}

package/libs/{chunk-QVW6W76L.cjs → chunk-MGPWZRBX.cjs}

@@ -2,7 +2,7 @@
 
 var chunk2NRIP6RB_cjs = require('./chunk-2NRIP6RB.cjs');
 var chunk6WTC4JXH_cjs = require('./chunk-6WTC4JXH.cjs');
-var chunkGT77BX4L_cjs = require('./chunk-GT77BX4L.cjs');
+var chunkE4OSROCA_cjs = require('./chunk-E4OSROCA.cjs');
 var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var s = require('react');
 
@@ -10,9 +10,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var s__default = /*#__PURE__*/_interopDefault(s);
 
-var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a=s.useCallback(()=>{o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",classes:"dialog-header"},s__default.default.createElement(chunk2NRIP6RB_cjs.b,{type:e,className:"dialog-title",id:l},t||"Dialog"),s__default.default.createElement(chunkGT77BX4L_cjs.b,{type:"button",onClick:a,className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},s__default.default.createElement(chunk6WTC4JXH_cjs.b,null,s__default.default.createElement(chunk6WTC4JXH_cjs.b.Remove,{size:16}))))},D=s__default.default.memo(y);y.displayName="DialogHeader";var H=({onClose:t,onConfirm:o,confirmLabel:l,cancelLabel:e})=>{let a=s.useCallback(()=>{t();},[t]),m=s.useCallback(()=>{o&&o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",className:"dialog-footer"},e&&s__default.default.createElement(chunkGT77BX4L_cjs.b,{type:"button",onClick:a,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s__default.default.createElement(chunkGT77BX4L_cjs.b,{type:"button",onClick:m,className:"dialog-button button-primary","data-btn":"sm"},l))};H.displayName="DialogFooter";var I=s__default.default.memo(H);var h=(t,o)=>s.useCallback(e=>{let a=t.current?.getBoundingClientRect();a&&(e.clientY<a.top||e.clientY>a.bottom||e.clientX<a.left||e.clientX>a.right)&&o();},[t,o]);var F=({isOpen:t,onOpenChange:o,isAlertDialog:l=!1,onClose:e,dialogTitle:a,dialogLabel:m,children:P,onConfirm:U,confirmLabel:B="Confirm",cancelLabel:E="Cancel",className:M="",hideFooter:v=!1,styles:x})=>{let f=s.useRef(null),u=s.useId();s.useEffect(()=>{let r=f.current;r&&(t?l?r.show():r.showModal():r.close());},[t,l]);let c=s.useCallback(()=>{o(!1),e&&e();},[o,e]),L=h(f,c),b=s.useId();return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"dialog",role:l?"alertdialog":"dialog",ref:f,onClose:c,onClick:L,"aria-modal":t&&!l?"true":void 0,"aria-labelledby":u,"aria-describedby":b,"aria-label":m,className:`dialog-modal ${M}`.trim(),style:x},s__default.default.createElement(D,{dialogTitle:a,onClick:c,id:u}),s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",id:b,className:"dialog-content",onClick:r=>r.stopPropagation()},P,!v&&s__default.default.createElement(I,{onClose:c,onConfirm:U,confirmLabel:B,cancelLabel:E})))};F.displayName="Dialog";var ao=s__default.default.memo(F);
+var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a=s.useCallback(()=>{o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",classes:"dialog-header"},s__default.default.createElement(chunk2NRIP6RB_cjs.b,{type:e,className:"dialog-title",id:l},t||"Dialog"),s__default.default.createElement(chunkE4OSROCA_cjs.b,{type:"button",onClick:a,className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},s__default.default.createElement(chunk6WTC4JXH_cjs.b,null,s__default.default.createElement(chunk6WTC4JXH_cjs.b.Remove,{size:16}))))},D=s__default.default.memo(y);y.displayName="DialogHeader";var H=({onClose:t,onConfirm:o,confirmLabel:l,cancelLabel:e})=>{let a=s.useCallback(()=>{t();},[t]),m=s.useCallback(()=>{o&&o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",className:"dialog-footer"},e&&s__default.default.createElement(chunkE4OSROCA_cjs.b,{type:"button",onClick:a,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s__default.default.createElement(chunkE4OSROCA_cjs.b,{type:"button",onClick:m,className:"dialog-button button-primary","data-btn":"sm"},l))};H.displayName="DialogFooter";var I=s__default.default.memo(H);var h=(t,o)=>s.useCallback(e=>{let a=t.current?.getBoundingClientRect();a&&(e.clientY<a.top||e.clientY>a.bottom||e.clientX<a.left||e.clientX>a.right)&&o();},[t,o]);var F=({isOpen:t,onOpenChange:o,isAlertDialog:l=!1,onClose:e,dialogTitle:a,dialogLabel:m,children:P,onConfirm:U,confirmLabel:B="Confirm",cancelLabel:E="Cancel",className:M="",hideFooter:v=!1,styles:x})=>{let f=s.useRef(null),u=s.useId();s.useEffect(()=>{let r=f.current;r&&(t?l?r.show():r.showModal():r.close());},[t,l]);let c=s.useCallback(()=>{o(!1),e&&e();},[o,e]),L=h(f,c),b=s.useId();return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"dialog",role:l?"alertdialog":"dialog",ref:f,onClose:c,onClick:L,"aria-modal":t&&!l?"true":void 0,"aria-labelledby":u,"aria-describedby":b,"aria-label":m,className:`dialog-modal ${M}`.trim(),style:x},s__default.default.createElement(D,{dialogTitle:a,onClick:c,id:u}),s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",id:b,className:"dialog-content",onClick:r=>r.stopPropagation()},P,!v&&s__default.default.createElement(I,{onClose:c,onConfirm:U,confirmLabel:B,cancelLabel:E})))};F.displayName="Dialog";var ao=s__default.default.memo(F);
 
 exports.a = F;
 exports.b = ao;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-QVW6W76L.cjs.map
+//# sourceMappingURL=chunk-MGPWZRBX.cjs.map

package/libs/chunk-NNTBIHSD.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-HHLNOC5T.js';
+import o from 'react';
+
+var i=o.forwardRef(({href:e,target:n,rel:r,children:t,styles:k,prefetch:s=!1,btnStyle:m,onClick:L,onPointerDown:d,...c},l)=>{let u=o.useMemo(()=>{if(n==="_blank"){let f=new Set(["noopener","noreferrer"]);return s&&f.add("prefetch"),r&&r.split(/\s+/).forEach(p=>{p&&f.add(p);}),Array.from(f).join(" ")}return r},[n,r,s]);return o.createElement(a,{as:"a",ref:l,href:e,target:n,rel:u,styles:k,"data-btn":m,onClick:L,onPointerDown:d,...c},t)}),y=o.forwardRef(({href:e,icon:n,...r},t)=>o.createElement(i,{ref:t,href:e,...r},n)),h=o.forwardRef(({href:e,children:n,...r},t)=>o.createElement(i,{ref:t,href:e,...r},n));y.displayName="IconLink";h.displayName="LinkButton";i.displayName="Link";var x=i;
+
+export { i as a, y as b, h as c, x as d };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-NNTBIHSD.js.map

package/libs/chunk-NNTBIHSD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/link/link.tsx"],"names":["React","Link","href","target","rel","children","styles","prefetch","btnStyle","onClick","onPointerDown","props","ref","computedRel","securityTokens","token","ui_default","IconLink","icon","LinkButton","link_default"],"mappings":"mCAAA,OAAOA,MAAW,QA+FX,IAAMC,EAAOD,EAAM,WACxB,CACE,CACE,KAAAE,EACA,OAAAC,EACA,IAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EACA,QAAAC,EACA,cAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAWH,IAAMC,EAAcb,EAAM,QAAQ,IAAM,CACtC,GAAIG,IAAW,SAAU,CAEvB,IAAMW,EAAiB,IAAI,IAAI,CAAC,WAAY,YAAY,CAAC,EAGzD,OAAIP,GACFO,EAAe,IAAI,UAAU,EAI3BV,GACFA,EAAI,MAAM,KAAK,EAAE,QAASW,GAAU,CAC9BA,GAAOD,EAAe,IAAIC,CAAK,CACrC,CAAC,EAGI,MAAM,KAAKD,CAAc,EAAE,KAAK,GAAG,CAC5C,CAGA,OAAOV,CACT,EAAG,CAACD,EAAQC,EAAKG,CAAQ,CAAC,EAE1B,OACEP,EAAA,cAACgB,EAAA,CACC,GAAG,IACH,IAAKJ,EACL,KAAMV,EACN,OAAQC,EACR,IAAKU,EACL,OAAQP,EACR,WAAUE,EACV,QAASC,EACT,cAAeC,EACd,GAAGC,GAEHN,CACH,CAEJ,CACF,EAEaY,EAAWjB,EAAM,WAC5B,CAAC,CAAE,KAAAE,EAAM,KAAAgB,EAAM,GAAGP,CAAM,EAAGC,IAEvBZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BO,CACH,CAGN,EAEaC,EAAanB,EAAM,WAC9B,CAAC,CAAE,KAAAE,EAAM,SAAAG,EAAU,GAAGM,CAAM,EAAGC,IAE3BZ,EAAA,cAACC,EAAA,CAAK,IAAKW,EAAK,KAAMV,EAAO,GAAGS,GAC7BN,CACH,CAGN,EAEAY,EAAS,YAAc,WACvBE,EAAW,YAAc,aACzBlB,EAAK,YAAc,OAEnB,IAAOmB,EAAQnB","sourcesContent":["import React from \"react\";\nimport UI from \"../ui\";\nimport type { LinkProps } from \"./link.types\";\n\n/**\n * Link - A semantic, accessible anchor component with enhanced security and styling.\n *\n * The Link component renders accessible `<a>` elements with automatic security\n * attributes for external links, customizable styling variants, and full WCAG 2.1\n * AA compliance. It supports traditional text links, button-styled links, and\n * programmatic focus management via ref forwarding.\n *\n * ## Features\n *\n * - 🔒 **Automatic Security**: External links get `rel=\"noopener noreferrer\"`\n * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML\n * - 🎨 **Flexible Styling**: Text links, button links, and pill variants\n * - ⚡ **Performance**: Optional prefetch hints for faster navigation\n * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll\n * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types\n *\n * ## Accessibility\n *\n * - ✅ Semantic `<a>` element for proper keyboard navigation\n * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)\n * - ✅ Screen readers announce link purpose and destination\n * - ✅ External links include security attributes automatically\n * - ✅ Supports `aria-label` for icon-only or ambiguous links\n * - ✅ Ref forwarding enables skip-link patterns\n *\n * @example\n * // Basic internal link\n * <Link href=\"/about\">About Us</Link>\n *\n * @example\n * // External link with automatic security\n * <Link href=\"https://example.com\" target=\"_blank\">\n *   Visit Example\n * </Link>\n *\n * @example\n * // Button-styled call-to-action link\n * <Link href=\"/signup\">\n *   <b>Get Started</b>\n * </Link>\n *\n * @example\n * // Icon-only link with accessible label\n * <Link href=\"/settings\" aria-label=\"Open settings\">\n *   <SettingsIcon aria-hidden=\"true\" />\n * </Link>\n *\n * @example\n * // Analytics tracking with onClick (includes keyboard users)\n * <Link\n *   href=\"/products\"\n *   onClick={(e) => trackEvent('link_click', { href: '/products' })}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // Skip link with ref forwarding for focus management\n * const mainRef = useRef<HTMLAnchorElement>(null);\n *\n * <Link ref={mainRef} href=\"#main-content\">\n *   Skip to main content\n * </Link>\n *\n * @example\n * // Custom styled link with CSS variables\n * <Link\n *   href=\"/products\"\n *   styles={{\n *     '--link-color': '#0066cc',\n *     '--link-decoration': 'underline',\n *   }}\n * >\n *   Browse Products\n * </Link>\n *\n * @example\n * // ✅ GOOD: Descriptive link text\n * <Link href=\"/docs/installation\">\n *   Read installation guide\n * </Link>\n *\n * @example\n * // ❌ BAD: Generic link text (poor for screen readers)\n * <Link href=\"/docs/installation\">\n *   Click here\n * </Link>\n *\n * @see {@link LinkProps} for complete prop documentation\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      href,\n      target,\n      rel,\n      children,\n      styles,\n      prefetch = false,\n      btnStyle,\n      onClick,\n      onPointerDown,\n      ...props\n    },\n    ref\n  ) => {\n    /**\n     * Compute the final `rel` attribute value with security defaults.\n     *\n     * For external links (target=\"_blank\"), we merge user-provided `rel` values\n     * with security defaults `noopener noreferrer` to prevent:\n     * - window.opener exploitation (noopener)\n     * - Referrer header leakage (noreferrer)\n     *\n     * If prefetch is enabled, we also add the `prefetch` hint.\n     */\n    const computedRel = React.useMemo(() => {\n      if (target === \"_blank\") {\n        // Start with security defaults\n        const securityTokens = new Set([\"noopener\", \"noreferrer\"]);\n\n        // Add prefetch if enabled\n        if (prefetch) {\n          securityTokens.add(\"prefetch\");\n        }\n\n        // Merge with user-provided rel tokens (if any)\n        if (rel) {\n          rel.split(/\\s+/).forEach((token) => {\n            if (token) securityTokens.add(token);\n          });\n        }\n\n        return Array.from(securityTokens).join(\" \");\n      }\n\n      // For non-external links, use provided rel as-is\n      return rel;\n    }, [target, rel, prefetch]);\n\n    return (\n      <UI\n        as=\"a\"\n        ref={ref}\n        href={href}\n        target={target}\n        rel={computedRel}\n        styles={styles}\n        data-btn={btnStyle}\n        onClick={onClick}\n        onPointerDown={onPointerDown}\n        {...props}\n      >\n        {children}\n      </UI>\n    );\n  }\n);\n\nexport const IconLink = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, icon, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {icon}\n      </Link>\n    );\n  }\n);\n\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ href, children, ...props }, ref) => {\n    return (\n      <Link ref={ref} href={href} {...props}>\n        {children}\n      </Link>\n    );\n  }\n);\n\nIconLink.displayName = \"IconLink\";\nLinkButton.displayName = \"LinkButton\";\nLink.displayName = \"Link\";\n\nexport default Link;\n"]}

package/libs/{chunk-X3JCTEPD.js → chunk-QKHPHMG2.js}

@@ -1,6 +1,6 @@
 import { b } from './chunk-ZFJ4U45S.js';
 import { b as b$2 } from './chunk-5QD3DWFI.js';
-import { b as b$1 } from './chunk-OVWLQYMK.js';
+import { b as b$1 } from './chunk-KVKQLRJG.js';
 import { a } from './chunk-HHLNOC5T.js';
 import s, { useCallback, useRef, useId, useEffect } from 'react';
 
@@ -8,4 +8,4 @@ var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a$1=useCallback(()=>{o(
 
 export { F as a, ao as b };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-X3JCTEPD.js.map
+//# sourceMappingURL=chunk-QKHPHMG2.js.map

package/libs/{chunk-T4T6GWYQ.cjs → chunk-R7NLLZU2.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk33PNJ4LO_cjs = require('./chunk-33PNJ4LO.cjs');
+var chunk5PJYLVFY_cjs = require('./chunk-5PJYLVFY.cjs');
 var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
 var e = require('react');
 
@@ -8,10 +8,10 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var e__default = /*#__PURE__*/_interopDefault(e);
 
-var U=(r,t=15)=>r.length>t?`${r.slice(0,t)}...`:r;var i=e__default.default.memo(({children:r,id:t,styles:s,classes:a,...m})=>{let{renderStyles:n,defaultStyles:o,as:d,ref:I,...p}=m;return e__default.default.createElement("li",{id:t,style:s,className:a,"data-list":"unstyled inline",...p},r)});i.displayName="BreadcrumbItem";var y=e__default.default.memo(({children:r,...t})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"ol","data-list":"unstyled inline",...t},r));y.displayName="BreadcrumbList";var B=e__default.default.memo(({styles:r,id:t,classes:s,children:a,...m})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"nav",id:t,styles:r,className:s,...m},e__default.default.createElement(y,null,a)));B.displayName="BreadcrumbNav";function w(r,t){let s=e__default.default.useMemo(()=>r?r.split("/").filter(n=>n):[],[r]),a=e__default.default.useCallback(n=>{let o=t?.find(d=>d.path===n);return {path:o?.path||n,name:o?.name||n,url:o?.url||n}},[t]),m=e__default.default.useMemo(()=>s.map((n,o)=>({...a(n),isLast:o===s.length-1,index:o})),[s,a]);return {segments:m,hasSegments:m.length>0}}var l=({startRoute:r="Home",startRouteUrl:t="/",currentRoute:s,spacer:a=e__default.default.createElement(e__default.default.Fragment,null,"/"),routes:m,styles:n,id:o,classes:d,ariaLabel:I="Breadcrumb",truncateLength:p=15,linkProps:N,...k})=>{let{segments:L,hasSegments:v}=w(s,m),b=e__default.default.useId();return !s?.length||!v?null:e__default.default.createElement(B,{id:o,styles:n,className:d,"aria-label":I,...k},e__default.default.createElement(i,{key:`start-${b}`},e__default.default.createElement(chunk33PNJ4LO_cjs.b,{href:t,...N},r)),L.map(({name:$,url:x,path:u,isLast:S,index:h})=>{let c=decodeURIComponent($),C=U(c,p),P=c.length>p;if(S){let M=h>0?L[h-1].path:null;return !u||u.length<=3||u===M?null:e__default.default.createElement(i,{key:`${u}-${b}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement("span",{"aria-current":"page","aria-label":P?c:void 0},C))}return e__default.default.createElement(i,{key:`${u}-${b}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement(chunk33PNJ4LO_cjs.b,{href:x,"aria-label":P?c:void 0,...N},C))}))},H=l;l.displayName="Breadcrumb";l.Nav=B;l.List=y;l.Item=i;
+var U=(r,t=15)=>r.length>t?`${r.slice(0,t)}...`:r;var i=e__default.default.memo(({children:r,id:t,styles:s,classes:a,...m})=>{let{renderStyles:n,defaultStyles:o,as:d,ref:I,...p}=m;return e__default.default.createElement("li",{id:t,style:s,className:a,"data-list":"unstyled inline",...p},r)});i.displayName="BreadcrumbItem";var y=e__default.default.memo(({children:r,...t})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"ol","data-list":"unstyled inline",...t},r));y.displayName="BreadcrumbList";var B=e__default.default.memo(({styles:r,id:t,classes:s,children:a,...m})=>e__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"nav",id:t,styles:r,className:s,...m},e__default.default.createElement(y,null,a)));B.displayName="BreadcrumbNav";function w(r,t){let s=e__default.default.useMemo(()=>r?r.split("/").filter(n=>n):[],[r]),a=e__default.default.useCallback(n=>{let o=t?.find(d=>d.path===n);return {path:o?.path||n,name:o?.name||n,url:o?.url||n}},[t]),m=e__default.default.useMemo(()=>s.map((n,o)=>({...a(n),isLast:o===s.length-1,index:o})),[s,a]);return {segments:m,hasSegments:m.length>0}}var l=({startRoute:r="Home",startRouteUrl:t="/",currentRoute:s,spacer:a=e__default.default.createElement(e__default.default.Fragment,null,"/"),routes:m,styles:n,id:o,classes:d,ariaLabel:I="Breadcrumb",truncateLength:p=15,linkProps:N,...k})=>{let{segments:L,hasSegments:v}=w(s,m),b=e__default.default.useId();return !s?.length||!v?null:e__default.default.createElement(B,{id:o,styles:n,className:d,"aria-label":I,...k},e__default.default.createElement(i,{key:`start-${b}`},e__default.default.createElement(chunk5PJYLVFY_cjs.d,{href:t,...N},r)),L.map(({name:$,url:x,path:u,isLast:S,index:h})=>{let c=decodeURIComponent($),C=U(c,p),P=c.length>p;if(S){let M=h>0?L[h-1].path:null;return !u||u.length<=3||u===M?null:e__default.default.createElement(i,{key:`${u}-${b}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement("span",{"aria-current":"page","aria-label":P?c:void 0},C))}return e__default.default.createElement(i,{key:`${u}-${b}`},e__default.default.createElement("span",{"aria-hidden":"true"},a),e__default.default.createElement(chunk5PJYLVFY_cjs.d,{href:x,"aria-label":P?c:void 0,...N},C))}))},H=l;l.displayName="Breadcrumb";l.Nav=B;l.List=y;l.Item=i;
 
 exports.a = w;
 exports.b = l;
 exports.c = H;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-T4T6GWYQ.cjs.map
+//# sourceMappingURL=chunk-R7NLLZU2.cjs.map