@salmexio/ui 1.2.0 → 1.3.0

package/dist/utils/accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAcH,kDAAkD;AAClD,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAe3D;AAED,mEAAmE;AACnE,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI1E;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,QAAQ,GAAE,QAAQ,GAAG,WAAsB,GACzC,IAAI,CAgCN;AAED,gDAAgD;AAChD,wBAAgB,oBAAoB,IAAI,OAAO,CAG9C"}

package/dist/utils/accessibility.js

@@ -0,0 +1,80 @@
+/**
+ * Accessibility utilities for WCAG 2.1 AA compliance.
+ * Focus management, screen reader announcements, media query helpers.
+ */
+const FOCUSABLE_SELECTORS = [
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"]):not([type="hidden"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable]:not([tabindex="-1"])',
+];
+const FOCUSABLE_SELECTOR = FOCUSABLE_SELECTORS.join(', ');
+/** Check whether an element can receive focus. */
+export function isElementFocusable(el) {
+    if (el.hasAttribute('disabled') || el.disabled)
+        return false;
+    if (el.getAttribute('tabindex') === '-1')
+        return false;
+    if (el.hasAttribute('hidden'))
+        return false;
+    const style = getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden')
+        return false;
+    const tag = el.tagName.toLowerCase();
+    if (['input', 'select', 'textarea', 'button'].includes(tag)) {
+        return !el.disabled;
+    }
+    if (tag === 'a')
+        return el.hasAttribute('href');
+    if (el.hasAttribute('tabindex') || el.hasAttribute('contenteditable'))
+        return true;
+    return false;
+}
+/** Get all focusable elements within a container, in DOM order. */
+export function getFocusableElements(container) {
+    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isElementFocusable);
+}
+/**
+ * Announce a message to screen readers via an ARIA live region.
+ * Creates the region lazily and reuses it across calls.
+ */
+export function announce(message, priority = 'polite') {
+    if (typeof document === 'undefined')
+        return;
+    const id = `sx-announce-${priority}`;
+    let region = document.getElementById(id);
+    if (!region) {
+        region = document.createElement('div');
+        region.id = id;
+        region.setAttribute('role', 'log');
+        region.setAttribute('aria-live', priority);
+        region.setAttribute('aria-relevant', 'additions');
+        region.setAttribute('aria-atomic', 'true');
+        Object.assign(region.style, {
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: '0',
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            border: '0',
+        });
+        document.body.appendChild(region);
+    }
+    // Clear then re-set to trigger announcement
+    region.textContent = '';
+    requestAnimationFrame(() => {
+        region.textContent = message;
+    });
+}
+/** Check if the user prefers reduced motion. */
+export function prefersReducedMotion() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { cn } from './cn.js';
-export { createFocusTrap, generateId, Keys } from './keyboard.js';
+export { createFocusTrap, generateId, Keys, isKey, isActivationKey, isNavigationKey, } from './keyboard.js';
 export type { FocusTrap, Key } from './keyboard.js';
+export { isElementFocusable, getFocusableElements, announce, prefersReducedMotion, } from './accessibility.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EACN,eAAe,EACf,UAAU,EACV,IAAI,EACJ,KAAK,EACL,eAAe,EACf,eAAe,GACf,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EACN,kBAAkB,EAClB,oBAAoB,EACpB,QAAQ,EACR,oBAAoB,GACpB,MAAM,oBAAoB,CAAC"}

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 export { cn } from './cn.js';
-export { createFocusTrap, generateId, Keys } from './keyboard.js';
+export { createFocusTrap, generateId, Keys, isKey, isActivationKey, isNavigationKey, } from './keyboard.js';
+export { isElementFocusable, getFocusableElements, announce, prefersReducedMotion, } from './accessibility.js';

package/dist/utils/keyboard.d.ts

@@ -23,6 +23,12 @@ export interface FocusTrap {
  * Trap focus within a container (e.g. modal). Tab cycles inside; restores focus on deactivate.
  */
 export declare function createFocusTrap(container: HTMLElement): FocusTrap;
+/** Check if the key matches one of the provided keys. */
+export declare function isKey(event: KeyboardEvent, ...keys: Key[]): boolean;
+/** Check if the key is an activation key (Enter or Space). */
+export declare function isActivationKey(event: KeyboardEvent): boolean;
+/** Check if the key is a navigation key (arrows, Home, End). */
+export declare function isNavigationKey(event: KeyboardEvent): boolean;
 /** Unique ID for aria attributes (per-instance safe). */
 export declare function generateId(prefix?: string): string;
 //# sourceMappingURL=keyboard.d.ts.map

package/dist/utils/keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/utils/keyboard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;CAWP,CAAC;AAEX,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAEnD,MAAM,WAAW,SAAS;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,GAAG,SAAS,CA4CjE;AAED,yDAAyD;AACzD,wBAAgB,UAAU,CAAC,MAAM,SAAW,GAAG,MAAM,CAEpD"}
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/utils/keyboard.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,IAAI;;;;;;;;;;;CAWP,CAAC;AAEX,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAEnD,MAAM,WAAW,SAAS;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,GAAG,SAAS,CAoCjE;AAED,yDAAyD;AACzD,wBAAgB,KAAK,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,OAAO,CAEnE;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE7D;AAED,gEAAgE;AAChE,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAU7D;AAED,yDAAyD;AACzD,wBAAgB,UAAU,CAAC,MAAM,SAAW,GAAG,MAAM,CAEpD"}

package/dist/utils/keyboard.js

@@ -2,6 +2,7 @@
  * Keyboard and focus utilities for accessible components.
  * WCAG 2.1 / WAI-ARIA aligned; used by Modal and other dialogs.
  */
+import { getFocusableElements } from './accessibility.js';
 export const Keys = {
     Enter: 'Enter',
     Space: ' ',
@@ -19,16 +20,9 @@ export const Keys = {
  */
 export function createFocusTrap(container) {
     let previouslyFocused = null;
-    const focusableSelector = [
-        'button:not([disabled]):not([tabindex="-1"])',
-        '[href]:not([tabindex="-1"])',
-        'input:not([disabled]):not([tabindex="-1"])',
-        'select:not([disabled]):not([tabindex="-1"])',
-        'textarea:not([disabled]):not([tabindex="-1"])',
-        '[tabindex]:not([tabindex="-1"])'
-    ].join(', ');
     function getFocusable() {
-        return Array.from(container.querySelectorAll(focusableSelector));
+        // Use shared implementation that filters invisible/disabled elements
+        return getFocusableElements(container);
     }
     function onKeyDown(e) {
         if (e.key !== Keys.Tab)
@@ -61,6 +55,18 @@ export function createFocusTrap(container) {
         }
     };
 }
+/** Check if the key matches one of the provided keys. */
+export function isKey(event, ...keys) {
+    return keys.includes(event.key);
+}
+/** Check if the key is an activation key (Enter or Space). */
+export function isActivationKey(event) {
+    return isKey(event, Keys.Enter, Keys.Space);
+}
+/** Check if the key is a navigation key (arrows, Home, End). */
+export function isNavigationKey(event) {
+    return isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End);
+}
 /** Unique ID for aria attributes (per-instance safe). */
 export function generateId(prefix = 'salmex') {
     return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@salmexio/ui",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "Salmex I/O Design System — INFRARED component library for Salmex products",
 	"type": "module",
 	"license": "UNLICENSED",
@@ -39,6 +39,26 @@
 			"svelte": "./dist/navigation/index.js",
 			"default": "./dist/navigation/index.js"
 		},
+		"./forms": {
+			"types": "./dist/forms/index.d.ts",
+			"svelte": "./dist/forms/index.js",
+			"default": "./dist/forms/index.js"
+		},
+		"./layout": {
+			"types": "./dist/layout/index.d.ts",
+			"svelte": "./dist/layout/index.js",
+			"default": "./dist/layout/index.js"
+		},
+		"./feedback": {
+			"types": "./dist/feedback/index.d.ts",
+			"svelte": "./dist/feedback/index.js",
+			"default": "./dist/feedback/index.js"
+		},
+		"./dialogs": {
+			"types": "./dist/dialogs/index.d.ts",
+			"svelte": "./dist/dialogs/index.js",
+			"default": "./dist/dialogs/index.js"
+		},
 		"./utils": {
 			"types": "./dist/utils/index.d.ts",
 			"default": "./dist/utils/index.js"