@marianmeres/stuic 1.11.0 → 1.12.0

package/dist/actions/focus-trap.d.ts

@@ -1,4 +1,9 @@
-export declare function focusTrap(node: HTMLElement, enabled: boolean): {
-    update(newArgs: boolean): void;
+interface FocusTrapOptions {
+    enabled?: boolean;
+    autoFocusFirst?: boolean;
+}
+export declare function focusTrap(node: HTMLElement, options?: FocusTrapOptions): {
+    update(options?: FocusTrapOptions): void;
     destroy(): void;
 };
+export {};

package/dist/actions/focus-trap.js

@@ -1,52 +1,78 @@
 // copied from skeleton
+const defaults = { enabled: true, autoFocusFirst: false };
 // Action: Focus Trap
-export function focusTrap(node, enabled) {
-    const elemWhitelist = 'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), details:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
-    let elemFirst;
-    let elemLast;
+export function focusTrap(node, options = {}) {
+    let { enabled, autoFocusFirst } = { ...defaults, ...(options || {}) };
+    const focusableSelectors = [
+        'a[href]',
+        'area[href]',
+        'details',
+        'iframe',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[contentEditable=true]',
+        '[tabindex]',
+    ].join(',');
+    let first;
+    let last;
     // When the first element is selected, shift+tab pressed, jump to the last selectable item.
     function onFirstElemKeydown(e) {
         if (e.shiftKey && e.code === 'Tab') {
             e.preventDefault();
-            elemLast.focus();
+            last.focus();
         }
     }
     // When the last item selected, tab pressed, jump to the first selectable item.
     function onLastElemKeydown(e) {
         if (!e.shiftKey && e.code === 'Tab') {
             e.preventDefault();
-            elemFirst.focus();
+            first.focus();
         }
     }
-    const onScanElements = (fromObserver) => {
+    const queryElements = (fromObserver) => {
         if (enabled === false)
             return;
-        // Gather all focusable elements
-        const focusableElems = Array.from(node.querySelectorAll(elemWhitelist));
-        if (focusableElems.length) {
-            // Set first/last focusable elements
-            elemFirst = focusableElems[0];
-            elemLast = focusableElems[focusableElems.length - 1];
+        const focusable = [...node.querySelectorAll(focusableSelectors)]
+            // i am unable to get the selectors right (still getting false positives),
+            // but filtering manually works well
+            .filter((e) => {
+            if (e.getAttribute('disabled') === '')
+                return false;
+            if ((e.getAttribute('tabindex') || '').startsWith('-'))
+                return false;
+            return true;
+        })
+            // sort by tabindex, so the first/last will work as expected
+            .toSorted((e1, e2) => {
+            let a = parseInt(e1.getAttribute('tabindex') || '0');
+            let b = parseInt(e2.getAttribute('tabindex') || '0');
+            return a - b;
+        });
+        if (focusable.length) {
+            first = focusable[0];
+            last = focusable[focusable.length - 1];
             // Auto-focus first focusable element only when not called from observer
-            if (!fromObserver)
-                elemFirst.focus();
+            if (!fromObserver && autoFocusFirst)
+                first.focus();
             // Listen for keydown on first & last element
-            elemFirst.addEventListener('keydown', onFirstElemKeydown);
-            elemLast.addEventListener('keydown', onLastElemKeydown);
+            first.addEventListener('keydown', onFirstElemKeydown);
+            last.addEventListener('keydown', onLastElemKeydown);
         }
     };
-    onScanElements(false);
-    function onCleanUp() {
-        if (elemFirst)
-            elemFirst.removeEventListener('keydown', onFirstElemKeydown);
-        if (elemLast)
-            elemLast.removeEventListener('keydown', onLastElemKeydown);
+    queryElements(false);
+    function cleanup() {
+        if (first)
+            first.removeEventListener('keydown', onFirstElemKeydown);
+        if (last)
+            last.removeEventListener('keydown', onLastElemKeydown);
     }
     // When children of node are changed (added or removed)
     const onObservationChange = (mutationRecords, observer) => {
         if (mutationRecords.length) {
-            onCleanUp();
-            onScanElements(true);
+            cleanup();
+            queryElements(true);
         }
         return observer;
     };
@@ -54,12 +80,11 @@ export function focusTrap(node, enabled) {
     observer.observe(node, { childList: true, subtree: true });
     // Lifecycle
     return {
-        update(newArgs) {
-            enabled = newArgs;
-            newArgs ? onScanElements(false) : onCleanUp();
+        update(options = {}) {
+            options?.enabled ? queryElements(false) : cleanup();
         },
         destroy() {
-            onCleanUp();
+            cleanup();
             observer.disconnect();
         },
     };

package/dist/components/Backdrop/Backdrop.svelte

@@ -43,7 +43,7 @@ $:
 	on:keydown={(e) => e.code === 'Escape' && dispatch('escape')}
 	in:fade={{ duration: fadeInDuration }}
 	out:fade={{ duration: fadeOutDuration }}
-	use:focusTrap={useFocusTrap}
+	use:focusTrap={{ enabled: useFocusTrap }}
 	role="presentation"
 	tabindex="-1" 
 >

package/dist/components/Button/Button.svelte

@@ -4,18 +4,20 @@ export class ButtonConfig {
   static defaultShadow = false;
   static defaultRounded = true;
   static defaultVariant = void 0;
-  // hover:brightness-[1.15]
   static presetBase = `
-			text-base
 			text-center whitespace-nowrap
-			inline-flex justify-center items-center gap-x-1
-			border border-transparent
-			hover:brightness-[1.1]
+			inline-flex items-center gap-x-2
+			hover:brightness-[1.05]
 			active:brightness-[0.95]
 			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
 			no-underline
+			border
+			
+			bg-zinc-200 text-black
+			dark:bg-zinc-600 dark:text-white
+			border-zinc-400 dark:border-zinc-500
 		`.trim();
-  static presetSquare = "p-0 aspect-square";
+  static presetSquare = "p-0 aspect-square justify-center";
   static presetsRounded = {
     xs: "rounded",
     sm: "rounded",
@@ -31,11 +33,11 @@ export class ButtonConfig {
     xl: "shadow-md dark:shadow-black"
   };
   static presetsSize = {
-    xs: "px-2   py-0.5 text-xs",
-    sm: "px-3   py-1   text-sm",
-    md: "px-3.5 py-1   text-base",
-    lg: "px-4   py-1.5 text-lg",
-    xl: "px-4   py-2   text-xl"
+    xs: "px-2   py-0.5 leading-tight text-xs",
+    sm: "px-2.5 py-0.5 leading-snug text-sm",
+    md: "px-3   py-1   leading-normal text-base",
+    lg: "px-4   py-1.5 leading-relaxed text-lg",
+    xl: "px-4   py-2   leading text-xl"
   };
   static classBySize = {
     xs: "",

package/dist/components/X/X.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from "tailwind-merge";
 let _class = "";
 export { _class as class };
-export let size = "1em";
+export let size = "1rem";
 </script>
 
 <svg

package/dist/index.d.ts

@@ -7,5 +7,7 @@ export { ColorScheme } from './components/ColorScheme/color-scheme.js';
 export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 export { default as X } from './components/X/X.svelte';
+export { clickOutside } from './actions/click-outside.js';
+export { focusTrap } from './actions/focus-trap.js';
 export { windowSize, breakpoint } from './utils/window-size.js';
 export { DevicePointer } from './utils/device-pointer.js';

package/dist/index.js

@@ -15,6 +15,9 @@ export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer
 export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
 //
 export { default as X } from './components/X/X.svelte';
+// actions
+export { clickOutside } from './actions/click-outside.js';
+export { focusTrap } from './actions/focus-trap.js';
 // utils
 export { windowSize, breakpoint } from './utils/window-size.js';
 export { DevicePointer } from './utils/device-pointer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.11.0",
+	"version": "1.12.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",