@nordcode/ui 2.0.4 → 2.0.6

package/src/modules/dialogs/svelte/dialog.svelte

@@ -7,21 +7,20 @@ interface DialogProps {
 let { heading, id }: DialogProps = $props();
 </script>
 
-
 <dialog
-  class="nc-dialog"
-  {id}
-  data-level="1"
-  inert
+    class="nc-dialog"
+    {id}
+    data-level="1"
+    inert
 >
-  <form method="dialog" class="dialog-container">
-    <div class="dialog-header">
-      <h2 class="dialog-title">{heading}</h2>
-      <button data-closes-dialog>×</button>
-    </div>
-    <div class="dialog-content">
-      <slot />
-      <button data-opens-dialog="dialog-2">Show me the next dialog</button>
-    </div>
-  </form>
+    <form method="dialog" class="dialog-container">
+        <div class="dialog-header">
+            <h2 class="dialog-title">{heading}</h2>
+            <button data-closes-dialog>×</button>
+        </div>
+        <div class="dialog-content">
+            <slot />
+            <button data-opens-dialog="dialog-2">Show me the next dialog</button>
+        </div>
+    </form>
 </dialog>

package/src/modules/dialogs/ts/dialogs.ts

@@ -1,111 +1,112 @@
 // custom events to be added to <dialog>
-const dialogClosingEvent = new Event('closing')
-const dialogClosedEvent  = new Event('closed')
-const dialogOpeningEvent = new Event('opening')
-const dialogOpenedEvent  = new Event('opened')
-const dialogRemovedEvent = new Event('removed')
+const dialogClosingEvent = new Event('closing');
+const dialogClosedEvent = new Event('closed');
+const dialogOpeningEvent = new Event('opening');
+const dialogOpenedEvent = new Event('opened');
+const dialogRemovedEvent = new Event('removed');
 
 // track opening
 const dialogAttrObserver = new MutationObserver((mutations, observer) => {
-  mutations.forEach(async mutation => {
-    if (mutation.attributeName === 'open') {
-      const dialog = mutation.target as HTMLDialogElement;
-
-      const isOpen = dialog.hasAttribute('open')
-      if (!isOpen) return
-
-      dialog.removeAttribute('inert')
-
-      // set focus
-      const focusTarget = dialog.querySelector('[autofocus]') as HTMLDialogElement;
-      focusTarget
-        ? focusTarget?.focus()
-        : dialog?.querySelector('button')?.focus()
-
-      dialog.dispatchEvent(dialogOpeningEvent)
-      await animationsComplete(dialog)
-      dialog.dispatchEvent(dialogOpenedEvent)
-    }
-  })
-})
+    mutations.forEach(async mutation => {
+        if (mutation.attributeName === 'open') {
+            const dialog = mutation.target as HTMLDialogElement;
+
+            const isOpen = dialog.hasAttribute('open');
+            if (!isOpen) return;
+
+            dialog.removeAttribute('inert');
+
+            // set focus
+            const focusTarget = dialog.querySelector('[autofocus]') as HTMLDialogElement;
+            focusTarget
+                ? focusTarget?.focus()
+                : dialog?.querySelector('button')?.focus();
+
+            dialog.dispatchEvent(dialogOpeningEvent);
+            await animationsComplete(dialog);
+            dialog.dispatchEvent(dialogOpenedEvent);
+        }
+    });
+});
 
 // track deletion
 const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
-  mutations.forEach(mutation => {
-    mutation.removedNodes.forEach(removedNode => {
-      if (removedNode.nodeName === 'DIALOG') {
-        removedNode.removeEventListener('click', lightDismiss)
-        removedNode.removeEventListener('close', dialogClose)
-        removedNode.dispatchEvent(dialogRemovedEvent)
-      }
-    })
-  })
-})
+    mutations.forEach(mutation => {
+        mutation.removedNodes.forEach(removedNode => {
+            if (removedNode.nodeName === 'DIALOG') {
+                removedNode.removeEventListener('click', lightDismiss);
+                removedNode.removeEventListener('close', dialogClose);
+                removedNode.dispatchEvent(dialogRemovedEvent);
+            }
+        });
+    });
+});
 
 // wait for all dialog animations to complete their promises
 const animationsComplete = (element: HTMLDialogElement) =>
-  Promise.allSettled(
-    element.getAnimations().map((animation: Animation) => 
-      animation.finished))
+    Promise.allSettled(
+        element.getAnimations().map((animation: Animation) => animation.finished),
+    );
 
 // click outside the dialog handler
 const lightDismiss = ({ target: dialog }) => {
-  if (dialog.nodeName === 'DIALOG')
-    dialog.close('dismiss')
-}
+    if (dialog.nodeName === 'DIALOG') {
+        dialog.close('dismiss');
+    }
+};
 
-const dialogClose = async ({target:dialog}) => {
-  dialog.setAttribute('inert', '')
-  dialog.dispatchEvent(dialogClosingEvent)
+const dialogClose = async ({ target: dialog }) => {
+    dialog.setAttribute('inert', '');
+    dialog.dispatchEvent(dialogClosingEvent);
 
-  await animationsComplete(dialog)
+    await animationsComplete(dialog);
 
-  dialog.dispatchEvent(dialogClosedEvent)
-}
+    dialog.dispatchEvent(dialogClosedEvent);
+};
 
 // page load dialogs setup
 export async function initDialog(dialog: HTMLDialogElement) {
-  dialog.addEventListener('click', lightDismiss)
-  dialog.addEventListener('close', dialogClose)
-
-  dialogAttrObserver.observe(dialog, { 
-    attributes: true,
-  })
-
-  dialogDeleteObserver.observe(document.body, {
-    attributes: false,
-    subtree: false,
-    childList: true,
-  })
-
-  // remove visibility:hidden style
-  // prevent page load @keyframes playing
-  await animationsComplete(dialog);
-  // dialog.style.removeProperty('visibility');
+    dialog.addEventListener('click', lightDismiss);
+    dialog.addEventListener('close', dialogClose);
+
+    dialogAttrObserver.observe(dialog, {
+        attributes: true,
+    });
+
+    dialogDeleteObserver.observe(document.body, {
+        attributes: false,
+        subtree: false,
+        childList: true,
+    });
+
+    // remove visibility:hidden style
+    // prevent page load @keyframes playing
+    await animationsComplete(dialog);
+    // dialog.style.removeProperty('visibility');
 }
 
 const dialogRemoved = ({ target: dialog }) => {
-  dialog.removeEventListener('removed', dialogRemoved)
-}
+    dialog.removeEventListener('removed', dialogRemoved);
+};
 
 // SETUP
 document.querySelectorAll('dialog').forEach((dialog: HTMLDialogElement) => {
-  // sugar up <dialog> elements
-  initDialog(dialog);
+    // sugar up <dialog> elements
+    initDialog(dialog);
 
-  dialog.addEventListener('removed', dialogRemoved, { once: true });
+    dialog.addEventListener('removed', dialogRemoved, { once: true });
 });
 
 const htmlEl = document.documentElement;
 htmlEl?.addEventListener('click', (e: MouseEvent) => {
-  const el = e.target as HTMLElement;
+    const el = e.target as HTMLElement;
 
-  if (el.hasAttribute('data-dialogtarget')) {
-    const dialogId = el.getAttribute('data-dialogtarget');
-    if (dialogId) window[dialogId].showModal();
-  }
+    if (el.hasAttribute('data-dialogtarget')) {
+        const dialogId = el.getAttribute('data-dialogtarget');
+        if (dialogId) window[dialogId].showModal();
+    }
 
-  if (el.hasAttribute('data-closes-dialog')) {
-    (el as HTMLButtonElement)?.closest('dialog')?.close('close');
-  }
-});
+    if (el.hasAttribute('data-closes-dialog')) {
+        (el as HTMLButtonElement)?.closest('dialog')?.close('close');
+    }
+});

package/src/modules/notifications/js/notifications.js

@@ -49,19 +49,16 @@ const getNotificationTemplate = () => document.querySelector(Selector.notificati
 const getNotificationCenter = () => document.querySelector(Selector.notificationCenter);
 
 /** @type {function(): NodeListOf<HTMLButtonElement>} */
-const getNotificationCenterToggle = () =>
-    document.querySelectorAll(Selector.notificationCenterToggle);
+const getNotificationCenterToggle = () => document.querySelectorAll(Selector.notificationCenterToggle);
 
 /** @type {function(): HTMLOutputElement | null} */
 const getNotificationOutput = () => document.querySelector(Selector.notificationOutput);
 
 /** @type {function(): NodeListOf<HTMLButtonElement>} */
-const getNotificationCenterDismissAll = () =>
-    document.querySelectorAll(Selector.notificationCenterDismissAll);
+const getNotificationCenterDismissAll = () => document.querySelectorAll(Selector.notificationCenterDismissAll);
 
 /** @type {function(): HTMLElement | null} */
-const getNotificationCenterContainer = () =>
-    document.querySelector(Selector.notificationCenterContainer);
+const getNotificationCenterContainer = () => document.querySelector(Selector.notificationCenterContainer);
 
 /**
  * Create a unique id for a notification

package/src/modules/notifications/svelte/NotificationTemplate.svelte

@@ -1,8 +1,6 @@
 <script>
-
 </script>
 
-
 <template id="nc-notification">
     <div class="nc-notification">
         <p class="nc-notification-title"></p>

package/src/styles/components/buttons.css

@@ -1,15 +1,5 @@
 @layer components.buttons {
-    :where(
-            button:not([class]),
-            button[type]:not([class]),
-            input[type="button"]:not([class]),
-            input[type="submit"]:not([class]),
-            input[type="reset"]:not([class]),
-            input[type="file"]:not([class]),
-            input[type="file"]:not([class])::-webkit-file-upload-button,
-            input[type="file"]:not([class])::file-selector-button,
-            .nc-button
-        ) {
+    :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"], input[type="file"]::-webkit-file-upload-button, input[type="file"]::file-selector-button, .nc-button) {
         --_button-background: var(--button-background, var(--surface-hover));
         --_button-color: var(--button-color, var(--text-hover));
         --_button-border-color: var(--button-border-color, var(--surface-hover));
@@ -51,22 +41,13 @@
         text-decoration: unset;
         box-shadow: var(--_button-box-shadow);
         user-select: none;
-        text-box: cap alphabetic;
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
 
         line-height: var(--line-height-base);
     }
 
-    :where(
-            button:not([class]),
-            button[type]:not([class]),
-            input[type="button"]:not([class]),
-            input[type="submit"]:not([class]),
-            input[type="reset"]:not([class]),
-            .nc-button
-        ) {
-
+    :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button) {
         &:hover {
             background: var(--_button-background-hover);
             color: var(--_button-color-hover);
@@ -160,18 +141,24 @@
                 var(--_button-offset-distance-hover)
             );
 
-            --button-box-shadow: calc(var(--_button-offset-distance) / -2)
-                calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color),
-                calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1)
-                0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1)
-                calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2)
-                0 var(--shadow-color);
-
-            --button-hover-shadow: calc(var(--_button-offset-distance-hover) * -1)
-                calc(var(--_button-offset-distance-hover) * -1) 0 0 var(--shadow-color),
-                calc(var(--_button-offset-distance-hover) * -1)
-                calc(var(--_button-offset-distance-hover) * -1)
-                calc(var(--_button-offset-distance-hover) / -2) 0 var(--shadow-color);
+            --button-box-shadow:
+                calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(
+                --shadow-color
+            ),
+                calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(
+                --shadow-color
+            ),
+                calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(
+                var(--_button-offset-distance) * -2
+            ) 0 var(--shadow-color);
+
+            --button-hover-shadow:
+                calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) 0 0 var(
+                --shadow-color
+            ),
+                calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) calc(
+                var(--_button-offset-distance-hover) / -2
+            ) 0 var(--shadow-color);
 
             inset-block-start: calc(var(--_button-offset-distance) * -1);
             inset-inline-start: calc(var(--_button-offset-distance) * -1);
@@ -191,10 +178,10 @@
         }
 
         /*
-             * If there is no text node for the button,
-             * it is assumed that an `aria-label` is that
-             * and the button will be styled as an icon button.
-             */
+         * If there is no text node for the button,
+         * it is assumed that an `aria-label` is that
+         * and the button will be styled as an icon button.
+         */
 
         &[aria-label],
         &.-icon {
@@ -230,27 +217,26 @@
         }
     }
 
-    :where(input[type="file"]:not([class])) {
+    :where(input[type="file"]) {
         color: var(--_input-color);
         background-color: var(--_input-background);
         border: var(--_input-border);
         min-block-size: var(--control-height-base);
         padding-inline-end: var(--contol-spacing-near, 0.5em);
-        padding-inline-start: 0;
+        padding-inline-start: 0 !important;
         border-radius: var(--_input-border-radius);
     }
 
-    :where(input[type="file"]:not([class]))::-webkit-file-upload-button,
-    :where(input[type="file"]:not([class]))::file-selector-button {
+    :where(input[type="file"])::-webkit-file-upload-button,
+    :where(input[type="file"])::file-selector-button {
         background-color: var(--_button-background);
         color: var(--_button-color);
         padding-inline: var(--_button-padding-inline);
         margin-inline-end: var(--contol-spacing-near, 0.5em);
         cursor: pointer;
         box-shadow: none;
-        min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
+        min-block-size: 100%;
         border: none;
-        border-inline-end: var(--border-width-thin) solid var(--color-border-base);
         transform: none;
         inset-block-start: 0;
         inset-inline-start: 0;

package/src/styles/components/dialogs.css

@@ -13,8 +13,7 @@
         --_dialog-radius: 0;
         display: block;
         z-index: var(--layer-important);
-        animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1)
-            forwards;
+        animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1) forwards;
         transition: opacity var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1);
         position: fixed;
         inset: 0;

package/src/styles/components/forms.css

@@ -34,13 +34,9 @@
         }
     }
 
-    :where(
-            :is(fieldset:not([class]), .nc-fieldset):has(
-                    :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)
-                )
-                > :is(legend:not([class]), .nc-legend)
-                + .nc-hint
-        ) {
+    :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint))
+        > :is(legend:not([class]), .nc-legend)
+        + .nc-hint) {
         --nc-legend-spacing: var(--control-spacing-tiny, 0.25em);
         margin-block: var(--control-spacing-base, 0.75em);
     }

package/src/styles/components/gallery.css

@@ -51,14 +51,18 @@
                 background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
                 background-image: linear-gradient(
                     var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) 0,
-                    var(--gallery-scrollbar-bg, var(--color-surface-emphasis))
-                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25),
-                    var(--gallery-scrollbar-fg, var(--color-text-on-emphasis))
-                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25),
-                    var(--gallery-scrollbar-fg, var(--color-text-on-emphasis))
-                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75),
-                    var(--gallery-scrollbar-bg, var(--color-surface-emphasis))
-                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75)
+                    var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(
+                        var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25
+                    ),
+                    var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(
+                        var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25
+                    ),
+                    var(--gallery-scrollbar-fg, var(--color-text-on-emphasis)) calc(
+                        var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75
+                    ),
+                    var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) calc(
+                        var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75
+                    )
                 );
             }
         }

package/src/styles/components/inputs/base.css

@@ -10,41 +10,7 @@
         align-items: center;
     }
 
-    :where(
-            input[type="text"],
-            input[type="email"],
-            input[type="password"],
-            input[type="number"],
-            input[type="url"],
-            input[type="search"],
-            input[type="date"],
-            input[type="month"],
-            input[type="week"],
-            input[type="text"],
-            input[type="datetime"],
-            input[type="datetime-local"],
-            input[type="time"],
-            input[type="tel"],
-            input[type="color"],
-            input[type="file"],
-            input[type="checkbox"],
-            input[type="radio"],
-            textarea,
-            select,
-            .nc-input,
-            .nc-select,
-            .nc-textarea,
-            .nc-input-checkbox,
-            .nc-input-radio,
-            .nc-input-label,
-            .nc-input-color,
-            .nc-input-field,
-            .nc-input-error,
-            .nc-checkbox-wrapper,
-            .nc-input-switch,
-            .nc-radio-field,
-            .nc-checkbox-field
-        ) {
+    :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], input[type="checkbox"], input[type="radio"], textarea, select, .nc-input, .nc-select, .nc-textarea, .nc-input-checkbox, .nc-input-radio, .nc-input-label, .nc-input-color, .nc-input-field, .nc-input-error, .nc-checkbox-wrapper, .nc-input-switch, .nc-radio-field, .nc-checkbox-field) {
         --_input-background: var(--input-background, var(--color-surface-subtle));
         --_input-background-active: var(--input-background-active, var(--color-surface-base));
         --_input-color: var(--input-color, var(--color-text-base));
@@ -66,27 +32,7 @@
         --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
     }
 
-    :where(
-            input[type="text"],
-            input[type="email"],
-            input[type="password"],
-            input[type="number"],
-            input[type="url"],
-            input[type="search"],
-            input[type="date"],
-            input[type="month"],
-            input[type="week"],
-            input[type="text"],
-            input[type="datetime"],
-            input[type="datetime-local"],
-            input[type="time"],
-            input[type="tel"],
-            input[type="color"],
-            input[type="file"],
-            textarea,
-            select,
-            .nc-input
-        ) {
+    :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="text"], input[type="datetime"], input[type="datetime-local"], input[type="time"], input[type="tel"], input[type="color"], input[type="file"], textarea, select, .nc-input) {
         font: inherit;
         letter-spacing: inherit;
         word-spacing: inherit;
@@ -147,13 +93,7 @@
         field-sizing: content;
     }
 
-    :where(
-            input[type="checkbox"]:not([class]),
-            input[type="radio"]:not([class]),
-            .nc-input-checkbox,
-            .nc-input-radio,
-            .nc-input-switch
-        ) {
+    :where(input[type="checkbox"]:not([class]), input[type="radio"]:not([class]), .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
         inline-size: 1lh;
         block-size: 1lh;
         padding: 0;

package/src/styles/components/inputs/segmented.css

@@ -59,13 +59,11 @@
             }
 
             &:first-child {
-                border-radius: var(--_segmented-control-border-radius)
-                    var(--_segmented-control-border-radius) 0 0;
+                border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
             }
 
             &:last-child {
-                border-radius: 0 0 var(--_segmented-control-border-radius)
-                    var(--_segmented-control-border-radius);
+                border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
             }
 
             &:not(:last-child) {
@@ -100,13 +98,11 @@
 
             > label {
                 &:first-child {
-                    border-radius: var(--_segmented-control-border-radius) 0 0
-                        var(--_segmented-control-border-radius);
+                    border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
                 }
 
                 &:last-child {
-                    border-radius: 0 var(--_segmented-control-border-radius)
-                        var(--_segmented-control-border-radius) 0;
+                    border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
                 }
 
                 &:not(:last-child) {

package/src/styles/components/inputs/switch.css

@@ -34,9 +34,7 @@
         }
 
         &:checked:before {
-            transform: translateX(
-                calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin))
-            );
+            transform: translateX(calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin)));
         }
     }
 }

package/src/styles/components/notifications.css

@@ -108,8 +108,7 @@
     }
 
     :where(.nc-notification.-closing) {
-        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1)
-            forwards;
+        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1) forwards;
     }
 
     @keyframes pop-in {