@sveltia/ui 0.7.4 → 0.8.0

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);
@@ -118,31 +119,77 @@ class Group {
     );
   }
 
+  /** @type {boolean} */
+  get isDisabled() {
+    return this.parent.matches('[aria-disabled="true"]');
+  }
+
+  /** @type {boolean} */
+  get isReadOnly() {
+    return this.parent.matches('[aria-readonly="true"]');
+  }
+
   /**
    * Select (and move focus to) the given target.
    * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
    * @param {HTMLElement} newTarget Target element.
    */
   selectTarget(event, newTarget) {
-    const targetParentGroup = newTarget.closest(this.parentGroupSelector);
+    if (this.isDisabled || this.isReadOnly) {
+      event.preventDefault();
+
+      return;
+    }
+
+    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) {
@@ -160,6 +207,7 @@ class Group {
       }
 
       if (isTarget) {
+        this.parent.setAttribute('aria-activedescendant', element.id);
         element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
       }
     });
@@ -226,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/services/popup.d.ts

@@ -23,8 +23,12 @@ declare class Popup {
     popupElement: HTMLDialogElement;
     position: PopupPosition;
     id: string;
+    /** @type {boolean} */
+    get isDisabled(): boolean;
+    /** @type {boolean} */
+    get isReadOnly(): boolean;
     /**
-     * Continue checking the position in case the window or parent element resizes.
+     * Check the position of the anchor element.
      */
     checkPosition(): void;
 }

package/package/services/popup.js

@@ -48,26 +48,26 @@ class Popup {
       const top = position.startsWith('bottom-')
         ? `${Math.round(intersectionRect.bottom)}px`
         : position.endsWith('-top')
-        ? `${Math.round(intersectionRect.top)}px`
-        : 'auto';
+          ? `${Math.round(intersectionRect.top)}px`
+          : 'auto';
 
       const right = position.startsWith('left-')
         ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
         : position.endsWith('-right')
-        ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
-        : 'auto';
+          ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
+          : 'auto';
 
       const bottom = position.startsWith('top-')
         ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
         : position.endsWith('-bottom')
-        ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
-        : 'auto';
+          ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
+          : 'auto';
 
       const left = position.startsWith('right-')
         ? `${Math.round(intersectionRect.right)}px`
         : position.endsWith('-left')
-        ? `${Math.round(intersectionRect.left)}px`
-        : 'auto';
+          ? `${Math.round(intersectionRect.left)}px`
+          : 'auto';
 
       const anchorPopup = /** @type {HTMLElement} */ (this.anchorElement.closest('.popup'));
 
@@ -100,7 +100,7 @@ class Popup {
     this.popupElement.setAttribute('id', this.id);
 
     this.anchorElement.addEventListener('click', () => {
-      if (!this.anchorElement.matches('[aria-disabled="true"]')) {
+      if (!this.isDisabled && !this.isReadOnly) {
         this.open.set(!get(this.open));
       }
     });
@@ -109,7 +109,7 @@ class Popup {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (['Enter', ' '].includes(key) && !hasModifier) {
+      if (!this.isDisabled && !this.isReadOnly && ['Enter', ' '].includes(key) && !hasModifier) {
         event.preventDefault();
         event.stopPropagation();
         this.open.set(!get(this.open));
@@ -154,19 +154,22 @@ class Popup {
     });
   }
 
+  /** @type {boolean} */
+  get isDisabled() {
+    return this.anchorElement.matches('[aria-disabled="true"]');
+  }
+
+  /** @type {boolean} */
+  get isReadOnly() {
+    return this.anchorElement.matches('[aria-readonly="true"]');
+  }
+
   /**
-   * Continue checking the position in case the window or parent element resizes.
+   * Check the position of the anchor element.
    */
   checkPosition() {
+    this.observer.unobserve(this.anchorElement);
     this.observer.observe(this.anchorElement);
-
-    window.requestAnimationFrame(() => {
-      this.observer.unobserve(this.anchorElement);
-
-      if (get(this.open)) {
-        this.checkPosition();
-      }
-    });
   }
 }
 

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,31 +83,10 @@ 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"],
+[aria-readonly="true"],
 [inert] {
   cursor: default;
   pointer-events: none;
@@ -115,7 +100,9 @@ dialog {
 }
 
 .disabled *,
+.readonly *,
 [aria-disabled="true"] *,
+[aria-readonly="true"] *,
 [inert] * {
   cursor: default;
   pointer-events: none;

package/package/styles/variables.scss

@@ -10,7 +10,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -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;
@@ -45,7 +46,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -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.4",
+  "version": "0.8.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,33 +23,33 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.2"
+    "svelte": "^4.2.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
     "@sveltejs/adapter-auto": "2.1.1",
-    "@sveltejs/kit": "^1.27.3",
+    "@sveltejs/kit": "^1.27.5",
     "@sveltejs/package": "^2.2.2",
-    "cspell": "^7.3.8",
+    "cspell": "^8.0.0",
     "eslint": "^8.53.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jsdoc": "^46.8.2",
-    "eslint-plugin-svelte": "^2.34.1",
+    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint-plugin-svelte": "^2.35.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-html": "^1.5.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
+    "prettier": "^3.1.0",
+    "prettier-plugin-svelte": "^3.1.0",
     "sass": "^1.69.5",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-scss": "^5.3.0",
-    "svelte-check": "^3.5.2",
+    "stylelint-scss": "^5.3.1",
+    "svelte-check": "^3.6.0",
     "svelte-i18n": "^4.0.0",
     "svelte-migrate": "^1.2.7",
-    "svelte-preprocess": "^5.0.4",
+    "svelte-preprocess": "^5.1.0",
     "tslib": "^2.6.2",
     "vite": "^4.5.0",
     "vitest": "^0.34.6"
@@ -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"
       ],