@sveltia/ui 0.7.5 → 0.8.0

package/package/index.d.ts

@@ -9,11 +9,22 @@ export { default as SelectButton } from "./components/button/select-button.svelt
 export { default as Calendar } from "./components/calendar/calendar.svelte";
 export { default as CheckboxGroup } from "./components/checkbox/checkbox-group.svelte";
 export { default as Checkbox } from "./components/checkbox/checkbox.svelte";
+export { default as AlertDialog } from "./components/dialog/alert-dialog.svelte";
+export { default as ConfirmationDialog } from "./components/dialog/confirmation-dialog.svelte";
 export { default as Dialog } from "./components/dialog/dialog.svelte";
+export { default as PromptDialog } from "./components/dialog/prompt-dialog.svelte";
 export { default as Disclosure } from "./components/disclosure/disclosure.svelte";
 export { default as Divider } from "./components/divider/divider.svelte";
 export { default as Spacer } from "./components/divider/spacer.svelte";
 export { default as Drawer } from "./components/drawer/drawer.svelte";
+export { default as GridBody } from "./components/grid/grid-body.svelte";
+export { default as GridCell } from "./components/grid/grid-cell.svelte";
+export { default as GridColHeader } from "./components/grid/grid-col-header.svelte";
+export { default as GridFoot } from "./components/grid/grid-foot.svelte";
+export { default as GridHead } from "./components/grid/grid-head.svelte";
+export { default as GridRowHeader } from "./components/grid/grid-row-header.svelte";
+export { default as GridRow } from "./components/grid/grid-row.svelte";
+export { default as Grid } from "./components/grid/grid.svelte";
 export { default as Icon } from "./components/icon/icon.svelte";
 export { default as Listbox } from "./components/listbox/listbox.svelte";
 export { default as OptionGroup } from "./components/listbox/option-group.svelte";
@@ -51,4 +62,5 @@ export { default as Toast } from "./components/toast/toast.svelte";
 export { default as Toolbar } from "./components/toolbar/toolbar.svelte";
 export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as Group } from "./components/util/group.svelte";
+export { default as Modal } from "./components/util/modal.svelte";
 export * from "./services/util";

package/package/index.js

@@ -34,11 +34,22 @@ export { default as SelectButton } from './components/button/select-button.svelt
 export { default as Calendar } from './components/calendar/calendar.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
+export { default as AlertDialog } from './components/dialog/alert-dialog.svelte';
+export { default as ConfirmationDialog } from './components/dialog/confirmation-dialog.svelte';
 export { default as Dialog } from './components/dialog/dialog.svelte';
+export { default as PromptDialog } from './components/dialog/prompt-dialog.svelte';
 export { default as Disclosure } from './components/disclosure/disclosure.svelte';
 export { default as Divider } from './components/divider/divider.svelte';
 export { default as Spacer } from './components/divider/spacer.svelte';
 export { default as Drawer } from './components/drawer/drawer.svelte';
+export { default as GridBody } from './components/grid/grid-body.svelte';
+export { default as GridCell } from './components/grid/grid-cell.svelte';
+export { default as GridColHeader } from './components/grid/grid-col-header.svelte';
+export { default as GridFoot } from './components/grid/grid-foot.svelte';
+export { default as GridHead } from './components/grid/grid-head.svelte';
+export { default as GridRowHeader } from './components/grid/grid-row-header.svelte';
+export { default as GridRow } from './components/grid/grid-row.svelte';
+export { default as Grid } from './components/grid/grid.svelte';
 export { default as Icon } from './components/icon/icon.svelte';
 export { default as Listbox } from './components/listbox/listbox.svelte';
 export { default as OptionGroup } from './components/listbox/option-group.svelte';
@@ -76,5 +87,6 @@ export { default as Toast } from './components/toast/toast.svelte';
 export { default as Toolbar } from './components/toolbar/toolbar.svelte';
 export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as Group } from './components/util/group.svelte';
+export { default as Modal } from './components/util/modal.svelte';
 
 export * from './services/util';

package/package/locales/en.d.ts

@@ -24,6 +24,7 @@ export namespace strings {
     }
     namespace password_input {
         const show_password: string;
+        const hide_password: string;
     }
     namespace markdown_editor {
         const markdown_editor_1: string;

package/package/locales/en.js

@@ -24,6 +24,7 @@ export const strings = {
   },
   password_input: {
     show_password: 'Show Password',
+    hide_password: 'Hide Password',
   },
   markdown_editor: {
     markdown_editor: 'Markdown Editor',

package/package/locales/ja.d.ts

@@ -24,6 +24,7 @@ export namespace strings {
     }
     namespace password_input {
         const show_password: string;
+        const hide_password: string;
     }
     namespace markdown_editor {
         const markdown_editor_1: string;

package/package/locales/ja.js

@@ -24,6 +24,7 @@ export const strings = {
   },
   password_input: {
     show_password: 'パスワードを表示',
+    hide_password: 'パスワードを隠す',
   },
   markdown_editor: {
     markdown_editor: 'Markdown エディター',

package/package/services/group.js

@@ -2,9 +2,9 @@ import { getRandomId, sleep } from './util';
 
 /**
  * @type {{ [role: string]: {
- *   orientation: string,
+ *   orientation: 'vertical' | 'horizontal',
  *   childRoles: string[],
- *   childSelectedAttr: string,
+ *   childSelectedAttr: 'aria-selected' | 'aria-checked',
  *   focusChild: boolean
  * } }}
  */
@@ -71,6 +71,7 @@ class Group {
       : this.parent.getAttribute('aria-orientation') ?? orientation;
     this.childRoles = childRoles;
     this.childSelectedAttr = childSelectedAttr;
+    this.childSelectedProp = childSelectedAttr.replace('aria-', '');
     this.focusChild = focusChild;
 
     const { allMembers } = this;
@@ -83,7 +84,7 @@ class Group {
       const isSelected = element.matches(`[${childSelectedAttr}="true"]`);
       const controls = document.querySelector(`#${element.getAttribute('aria-controls')}`);
 
-      element.id ||= `${this.id}-item-${index}`;
+      element.id ||= `${this.id}-item-${index + 1}`;
       element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
       element.setAttribute(this.childSelectedAttr, String(isSelected));
       controls?.setAttribute('aria-labelledby', element.id);
@@ -140,25 +141,55 @@ class Group {
       return;
     }
 
-    const targetParentGroup = newTarget.closest(this.parentGroupSelector);
+    const targetRole = newTarget.getAttribute('role');
+    const targetParent = newTarget.closest(this.parentGroupSelector);
+    const selectByClick = event.type === 'click';
+
+    const selectByKeydown =
+      event.type === 'keydown' && /** @type {KeyboardEvent} */ (event).key === ' ';
 
     this.activeMembers.forEach((element) => {
-      const isTarget = element === newTarget;
-      const isSelected = element.matches('[aria-selected="true"]');
+      const isMenuItemCheckbox = element.matches('[role="menuitemcheckbox"]');
       const isMenuItemRadio = element.matches('[role="menuitemradio"]');
+
+      if (
+        (isMenuItemCheckbox || isMenuItemRadio) &&
+        (element.getAttribute('role') !== targetRole ||
+          element.closest(this.parentGroupSelector) !== targetParent)
+      ) {
+        return;
+      }
+
+      const multiSelect = isMenuItemCheckbox || this.multi;
+      const singleSelect = isMenuItemRadio || !multiSelect;
+      const isTarget = element === newTarget;
+      const isSelected = element.matches(`[${this.childSelectedAttr}="true"]`);
       const controls = element.getAttribute('aria-controls');
 
-      if (this.multi && isTarget && event.type === 'click') {
+      if (multiSelect && isTarget && (selectByClick || selectByKeydown)) {
         element.setAttribute(this.childSelectedAttr, String(!isSelected));
-        element.dispatchEvent(new CustomEvent(isSelected ? 'unselect' : 'select'));
+        element.dispatchEvent(
+          new CustomEvent('change', { detail: { [this.childSelectedProp]: !isSelected } }),
+        );
+
+        if (!isSelected) {
+          element.dispatchEvent(new CustomEvent('select'));
+        }
       }
 
       if (
-        (isMenuItemRadio && element.closest(this.parentGroupSelector) === targetParentGroup) ||
-        (!isMenuItemRadio && !this.multi)
+        singleSelect &&
+        isSelected !== isTarget &&
+        (isMenuItemRadio ? selectByKeydown || selectByClick : true)
       ) {
         element.setAttribute(this.childSelectedAttr, String(isTarget));
-        element.dispatchEvent(new CustomEvent(isTarget ? 'select' : 'unselect'));
+        element.dispatchEvent(
+          new CustomEvent('change', { detail: { [this.childSelectedProp]: isTarget } }),
+        );
+
+        if (isTarget) {
+          element.dispatchEvent(new CustomEvent('select'));
+        }
       }
 
       if (this.focusChild) {
@@ -176,6 +207,7 @@ class Group {
       }
 
       if (isTarget) {
+        this.parent.setAttribute('aria-activedescendant', element.id);
         element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
       }
     });
@@ -242,8 +274,14 @@ class Group {
       event.preventDefault();
     }
 
-    if (['Enter', ' '].includes(key)) {
-      currentTarget.click();
+    if (key === 'Enter') {
+      currentTarget.click(); // Also close the popup if needed
+
+      return;
+    }
+
+    if (key === ' ') {
+      this.selectTarget(event, currentTarget);
 
       return;
     }

package/package/styles/core.scss

@@ -20,13 +20,18 @@
   overflow-anchor: none;
   scroll-behavior: smooth;
   box-sizing: border-box;
-  outline-offset: 1px;
-  outline-width: 2px !important;
+  outline-offset: 0px;
+  outline-width: var(--sui-focus-ring-width) !important;
   outline-style: solid;
   outline-color: transparent;
   border-width: 0;
   border-style: solid;
   vertical-align: top;
+
+  @media (prefers-reduced-motion) {
+    // Disable transition but make sure the `transitionend` event works
+    transition-duration: 1ms !important;
+  }
 }
 
 * {
@@ -39,7 +44,8 @@
 }
 
 :focus-visible {
-  outline-color: var(--sui-primary-accent-color-light);
+  outline-color: var(--sui-primary-accent-color-translucent);
+  z-index: 2;
 }
 
 h1,
@@ -77,29 +83,6 @@ pre {
   user-select: text;
 }
 
-dialog {
-  position: fixed;
-  inset: 0;
-  outline: 0;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 100vw;
-  max-width: 100vw;
-  height: 100vh;
-  max-height: 100vh;
-  color: var(--sui-primary-foreground-color);
-  background: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  cursor: default;
-
-  &::backdrop {
-    background: transparent;
-  }
-}
-
 .disabled,
 .readonly,
 [aria-disabled="true"],

package/package/styles/variables.scss

@@ -20,6 +20,7 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
   // Alerts
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
@@ -55,6 +56,7 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
   // Alerts
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
@@ -122,6 +124,8 @@
     var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
       var(--sui-alert-background-color-lightness)
   );
+  // Outline
+  --sui-focus-ring-width: 4px;
   // Borders
   --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
@@ -213,7 +217,9 @@
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);
   --sui-textbox-font-size: var(--sui-font-size-default);
+  --sui-textbox-singleline-min-width: 240px;
   --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
+  --sui-textbox-multiline-min-width: 480px;
   --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
   // Tab
   --sui-tab-small-height: var(--sui-control-small-height);
@@ -237,4 +243,10 @@
     --sui-primary-row-height: 56px;
     --sui-secondary-row-height: 48px;
   }
+
+  @media (prefers-reduced-transparency) {
+    --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
+    --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
+    --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -91,11 +91,26 @@
       "svelte": "./package/components/checkbox/checkbox.svelte",
       "default": "./package/components/checkbox/checkbox.svelte"
     },
+    "./components/dialog/alert-dialog.svelte": {
+      "types": "./package/components/dialog/alert-dialog.svelte.d.ts",
+      "svelte": "./package/components/dialog/alert-dialog.svelte",
+      "default": "./package/components/dialog/alert-dialog.svelte"
+    },
+    "./components/dialog/confirmation-dialog.svelte": {
+      "types": "./package/components/dialog/confirmation-dialog.svelte.d.ts",
+      "svelte": "./package/components/dialog/confirmation-dialog.svelte",
+      "default": "./package/components/dialog/confirmation-dialog.svelte"
+    },
     "./components/dialog/dialog.svelte": {
       "types": "./package/components/dialog/dialog.svelte.d.ts",
       "svelte": "./package/components/dialog/dialog.svelte",
       "default": "./package/components/dialog/dialog.svelte"
     },
+    "./components/dialog/prompt-dialog.svelte": {
+      "types": "./package/components/dialog/prompt-dialog.svelte.d.ts",
+      "svelte": "./package/components/dialog/prompt-dialog.svelte",
+      "default": "./package/components/dialog/prompt-dialog.svelte"
+    },
     "./components/disclosure/disclosure.svelte": {
       "types": "./package/components/disclosure/disclosure.svelte.d.ts",
       "svelte": "./package/components/disclosure/disclosure.svelte",
@@ -116,6 +131,46 @@
       "svelte": "./package/components/drawer/drawer.svelte",
       "default": "./package/components/drawer/drawer.svelte"
     },
+    "./components/grid/grid-body.svelte": {
+      "types": "./package/components/grid/grid-body.svelte.d.ts",
+      "svelte": "./package/components/grid/grid-body.svelte",
+      "default": "./package/components/grid/grid-body.svelte"
+    },
+    "./components/grid/grid-cell.svelte": {
+      "types": "./package/components/grid/grid-cell.svelte.d.ts",
+      "svelte": "./package/components/grid/grid-cell.svelte",
+      "default": "./package/components/grid/grid-cell.svelte"
+    },
+    "./components/grid/grid-col-header.svelte": {
+      "types": "./package/components/grid/grid-col-header.svelte.d.ts",
+      "svelte": "./package/components/grid/grid-col-header.svelte",
+      "default": "./package/components/grid/grid-col-header.svelte"
+    },
+    "./components/grid/grid-foot.svelte": {
+      "types": "./package/components/grid/grid-foot.svelte.d.ts",
+      "svelte": "./package/components/grid/grid-foot.svelte",
+      "default": "./package/components/grid/grid-foot.svelte"
+    },
+    "./components/grid/grid-head.svelte": {
+      "types": "./package/components/grid/grid-head.svelte.d.ts",
+      "svelte": "./package/components/grid/grid-head.svelte",
+      "default": "./package/components/grid/grid-head.svelte"
+    },
+    "./components/grid/grid-row-header.svelte": {
+      "types": "./package/components/grid/grid-row-header.svelte.d.ts",
+      "svelte": "./package/components/grid/grid-row-header.svelte",
+      "default": "./package/components/grid/grid-row-header.svelte"
+    },
+    "./components/grid/grid-row.svelte": {
+      "types": "./package/components/grid/grid-row.svelte.d.ts",
+      "svelte": "./package/components/grid/grid-row.svelte",
+      "default": "./package/components/grid/grid-row.svelte"
+    },
+    "./components/grid/grid.svelte": {
+      "types": "./package/components/grid/grid.svelte.d.ts",
+      "svelte": "./package/components/grid/grid.svelte",
+      "default": "./package/components/grid/grid.svelte"
+    },
     "./components/icon/icon.svelte": {
       "types": "./package/components/icon/icon.svelte.d.ts",
       "svelte": "./package/components/icon/icon.svelte",
@@ -301,6 +356,11 @@
       "svelte": "./package/components/util/group.svelte",
       "default": "./package/components/util/group.svelte"
     },
+    "./components/util/modal.svelte": {
+      "types": "./package/components/util/modal.svelte.d.ts",
+      "svelte": "./package/components/util/modal.svelte",
+      "default": "./package/components/util/modal.svelte"
+    },
     "./components/util/popup.svelte": {
       "types": "./package/components/util/popup.svelte.d.ts",
       "svelte": "./package/components/util/popup.svelte",
@@ -374,9 +434,18 @@
       "components/checkbox/checkbox.svelte": [
         "./package/components/checkbox/checkbox.svelte.d.ts"
       ],
+      "components/dialog/alert-dialog.svelte": [
+        "./package/components/dialog/alert-dialog.svelte.d.ts"
+      ],
+      "components/dialog/confirmation-dialog.svelte": [
+        "./package/components/dialog/confirmation-dialog.svelte.d.ts"
+      ],
       "components/dialog/dialog.svelte": [
         "./package/components/dialog/dialog.svelte.d.ts"
       ],
+      "components/dialog/prompt-dialog.svelte": [
+        "./package/components/dialog/prompt-dialog.svelte.d.ts"
+      ],
       "components/disclosure/disclosure.svelte": [
         "./package/components/disclosure/disclosure.svelte.d.ts"
       ],
@@ -389,6 +458,30 @@
       "components/drawer/drawer.svelte": [
         "./package/components/drawer/drawer.svelte.d.ts"
       ],
+      "components/grid/grid-body.svelte": [
+        "./package/components/grid/grid-body.svelte.d.ts"
+      ],
+      "components/grid/grid-cell.svelte": [
+        "./package/components/grid/grid-cell.svelte.d.ts"
+      ],
+      "components/grid/grid-col-header.svelte": [
+        "./package/components/grid/grid-col-header.svelte.d.ts"
+      ],
+      "components/grid/grid-foot.svelte": [
+        "./package/components/grid/grid-foot.svelte.d.ts"
+      ],
+      "components/grid/grid-head.svelte": [
+        "./package/components/grid/grid-head.svelte.d.ts"
+      ],
+      "components/grid/grid-row-header.svelte": [
+        "./package/components/grid/grid-row-header.svelte.d.ts"
+      ],
+      "components/grid/grid-row.svelte": [
+        "./package/components/grid/grid-row.svelte.d.ts"
+      ],
+      "components/grid/grid.svelte": [
+        "./package/components/grid/grid.svelte.d.ts"
+      ],
       "components/icon/icon.svelte": [
         "./package/components/icon/icon.svelte.d.ts"
       ],
@@ -500,6 +593,9 @@
       "components/util/group.svelte": [
         "./package/components/util/group.svelte.d.ts"
       ],
+      "components/util/modal.svelte": [
+        "./package/components/util/modal.svelte.d.ts"
+      ],
       "components/util/popup.svelte": [
         "./package/components/util/popup.svelte.d.ts"
       ],