@sveltia/ui 0.10.7 → 0.11.0

package/package/components/select/combobox.svelte.d.ts

@@ -10,8 +10,8 @@
 export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | number | undefined;
     position?: PopupPosition | undefined;
@@ -37,8 +37,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: (string | number | undefined);
         position?: PopupPosition | undefined;

package/package/components/select/select.svelte.d.ts

@@ -10,8 +10,8 @@
 export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | number | undefined;
     hidden?: boolean | undefined;
@@ -32,8 +32,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: (string | number | undefined);
         hidden?: boolean | undefined;

package/package/components/slider/slider.svelte.d.ts

@@ -12,8 +12,8 @@
 export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     max?: number | undefined;
     min?: number | undefined;
     step?: number | undefined;
@@ -39,8 +39,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         max?: number | undefined;
         min?: number | undefined;
         step?: number | undefined;

package/package/components/switch/switch.svelte.d.ts

@@ -9,10 +9,10 @@
 export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | "mixed" | undefined;
-    disabled?: boolean | undefined;
     required?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
@@ -32,10 +32,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | "mixed" | undefined;
-        disabled?: boolean | undefined;
         required?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;

package/package/components/text-field/markdown-editor.svelte.d.ts

@@ -4,8 +4,8 @@
 /** A Markdown text editor. */
 export default class MarkdownEditor extends SvelteComponent<{
     [x: string]: any;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -22,8 +22,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/text-field/number-input.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     max?: number | undefined;
     min?: number | undefined;
     required?: boolean | undefined;
@@ -44,8 +44,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         max?: number | undefined;
         min?: number | undefined;
         required?: boolean | undefined;

package/package/components/text-field/password-input.svelte.d.ts

@@ -10,8 +10,8 @@
 export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -39,8 +39,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/text-field/search-bar.svelte.d.ts

@@ -10,9 +10,9 @@
 export default class SearchBar extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     focus?: (() => void) | undefined;
     invalid?: boolean | undefined;
-    disabled?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -66,9 +66,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         focus?: (() => void) | undefined;
         invalid?: boolean | undefined;
-        disabled?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/text-field/text-area.svelte.d.ts

@@ -11,8 +11,8 @@ export default class TextArea extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -38,8 +38,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/text-field/text-input.svelte.d.ts

@@ -10,8 +10,8 @@ export default class TextInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | number | undefined;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
@@ -83,8 +83,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | number | undefined;
         role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;

package/package/components/toolbar/toolbar.svelte

@@ -98,6 +98,14 @@
   font-weight: normal;
   opacity: 0.8;
 }
+[role=toolbar] :global(.divider[aria-orientation="horizontal"]) {
+  margin: 0 4px;
+  width: calc(100% - 8px);
+}
+[role=toolbar] :global(.divider[aria-orientation="vertical"]) {
+  margin: 4px 0;
+  height: calc(100% - 8px);
+}
 
 .inner {
   display: contents;

package/package/components/util/app-shell.svelte

@@ -268,10 +268,10 @@
   --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
-  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%;
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
+  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -303,7 +303,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -337,10 +337,10 @@
     --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
     --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
     --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
-    --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-    --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%;
-    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
-    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
+    --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
+    --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
+    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
+    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
     --sui-shadow-color: var(--sui-base-hue) 10% 0%;
     --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
     --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -374,7 +374,7 @@
     --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
     --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
     --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-    --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%;
+    --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
     --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
     --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
     --sui-shadow-color: var(--sui-base-hue) 10% 0%;

package/package/components/util/modal.svelte

@@ -221,7 +221,7 @@ dialog.backdrop {
   background-color: var(--sui-popup-backdrop-color);
 }
 dialog.open {
-  transition-duration: 200ms;
+  transition-duration: 50ms;
   opacity: 1;
 }
 dialog:not(.open) {

package/package/components/util/popup.svelte

@@ -203,7 +203,7 @@
   padding: 8px 4px !important;
 }
 :global(dialog.open) .content {
-  transition-duration: 150ms;
+  transition-duration: 50ms;
   opacity: 1;
   transform: translateY(2px);
 }

package/package/index.d.ts

@@ -3,6 +3,7 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
     initialLocale?: string | undefined;
 } | undefined): void;
 export { default as Alert } from "./components/alert/alert.svelte";
+export { default as ButtonGroup } from "./components/button/button-group.svelte";
 export { default as Button } from "./components/button/button.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
 export { default as SelectButton } from "./components/button/select-button.svelte";

package/package/index.js

@@ -28,6 +28,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 initLocales();
 
 export { default as Alert } from './components/alert/alert.svelte';
+export { default as ButtonGroup } from './components/button/button-group.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
 export { default as SelectButton } from './components/button/select-button.svelte';

package/package/locales/en.d.ts

@@ -21,6 +21,8 @@ export namespace strings {
     }
     namespace combobox {
         const select_an_option: string;
+        const filter_options: string;
+        const no_matching_options: string;
     }
     namespace number_input {
         const decrease: string;

package/package/locales/en.js

@@ -21,6 +21,8 @@ export const strings = {
   },
   combobox: {
     select_an_option: 'Select an option…',
+    filter_options: 'Filter Options',
+    no_matching_options: 'No matching options found',
   },
   number_input: {
     decrease: 'Decrease',

package/package/locales/ja.d.ts

@@ -21,6 +21,8 @@ export namespace strings {
     }
     namespace combobox {
         const select_an_option: string;
+        const filter_options: string;
+        const no_matching_options: string;
     }
     namespace number_input {
         const decrease: string;

package/package/locales/ja.js

@@ -21,6 +21,8 @@ export const strings = {
   },
   combobox: {
     select_an_option: 'オプションを選択…',
+    filter_options: 'オプションを絞り込み',
+    no_matching_options: '一致するオプションは見つかりませんでした',
   },
   number_input: {
     decrease: '減らす',

package/package/services/events.js

@@ -62,16 +62,18 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
    * @param {KeyboardEvent} event - `keydown` event.
    */
   const handler = (event) => {
+    const { disabled, offsetParent, offsetLeft, offsetTop } = element;
+
+    // Check if the element is enabled, visible and clickable (not behind a modal dialog)
     if (
-      !!element.offsetParent &&
+      !disabled &&
+      !!offsetParent &&
+      document.elementsFromPoint(offsetLeft + 4, offsetTop + 4).includes(element) &&
       matchShortcuts(event, /** @type {string} */ (platformKeyShortcuts))
     ) {
       event.preventDefault();
-
-      if (!element.disabled) {
-        element.focus();
-        element.click();
-      }
+      element.focus();
+      element.click();
     }
   };
 

package/package/services/group.d.ts

@@ -1 +1 @@
-export function activateGroup(parent: HTMLElement): void;
+export function activateGroup(parent: HTMLElement, _params?: object | undefined): import('svelte/action').ActionReturn;

package/package/services/group.js

@@ -75,7 +75,18 @@ class Group {
     this.childSelectedProp = childSelectedAttr.replace('aria-', '');
     this.focusChild = focusChild;
 
-    const { allMembers, selected: defaultSelected } = this;
+    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
+    (async () => {
+      await sleep(100);
+      this.activate();
+    })();
+  }
+
+  /**
+   * Activate the members.
+   */
+  activate() {
+    const { parent, allMembers, selected: defaultSelected } = this;
 
     allMembers.forEach((element, index) => {
       // Select the first one if no member has the `selected` attribute
@@ -340,9 +351,10 @@ class Group {
     const target = /** @type {HTMLElement} */ (event.target);
     const { allMembers, activeMembers } = this;
 
+    /** @type {HTMLElement | undefined} */
     const currentTarget = (() => {
       if (!this.focusChild) {
-        return activeMembers.find((member) => member.matches('.focused')) ?? activeMembers[0];
+        return activeMembers.find((member) => member.matches('.focused'));
       }
 
       if (target.matches(this.selector)) {
@@ -352,22 +364,20 @@ class Group {
       return undefined;
     })();
 
-    if (!currentTarget) {
-      return;
-    }
-
     if (['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
       event.preventDefault();
     }
 
     if (key === 'Enter') {
-      currentTarget.click(); // Also close the popup if needed
+      currentTarget?.click(); // Also close the popup if needed
 
       return;
     }
 
     if (key === ' ') {
-      this.selectTarget(event, currentTarget);
+      if (currentTarget) {
+        this.selectTarget(event, currentTarget);
+      }
 
       return;
     }
@@ -376,9 +386,9 @@ class Group {
     let newTarget;
 
     if (this.grid) {
-      const colCount = Math.floor(this.parent.clientWidth / currentTarget.clientWidth);
+      const colCount = Math.floor(this.parent.clientWidth / activeMembers[0].clientWidth);
 
-      index = allMembers.indexOf(currentTarget);
+      index = currentTarget ? allMembers.indexOf(currentTarget) : -1;
 
       if (key === 'ArrowUp' && index > 0) {
         newTarget = allMembers[index - colCount];
@@ -400,7 +410,7 @@ class Group {
         newTarget = undefined;
       }
     } else {
-      index = activeMembers.indexOf(currentTarget);
+      index = currentTarget ? activeMembers.indexOf(currentTarget) : -1;
 
       if (key === (this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp')) {
         if (index > 0) {
@@ -431,17 +441,56 @@ class Group {
       this.selectTarget(event, newTarget);
     }
   }
+
+  /**
+   * Called whenever the params are updated. Filter the items based on the search terms.
+   * @param {{ searchTerms: string }} params - Updated params.
+   */
+  onUpdate({ searchTerms }) {
+    const terms = searchTerms.trim().toLocaleLowerCase();
+    const _terms = terms ? terms.split(/\s+/) : [];
+
+    const matched = this.allMembers
+      .map((member) => {
+        const searchValue =
+          (
+            member.dataset.searchValue ??
+            member.dataset.label ??
+            member.querySelector('.label')?.textContent ??
+            member.textContent
+          )?.toLocaleLowerCase() ?? '';
+
+        const hidden = !_terms.every((term) => searchValue.includes(term));
+
+        member.dispatchEvent(new CustomEvent('toggle', { detail: { hidden } }));
+
+        return hidden;
+      })
+      .filter((hidden) => !hidden).length;
+
+    this.parent.dispatchEvent(
+      new CustomEvent('filter', { detail: { matched, total: this.allMembers.length } }),
+    );
+  }
 }
 
 /**
  * Activate a new group.
  * @param {HTMLElement} parent - Parent element.
+ * @param {object} [_params] - Action params.
+ * @returns {import('svelte/action').ActionReturn} Action.
  */
-export const activateGroup = (parent) => {
-  (async () => {
-    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
-    await sleep(100);
-
-    return new Group(parent);
-  })();
+// eslint-disable-next-line no-unused-vars
+export const activateGroup = (parent, _params) => {
+  const group = new Group(parent);
+
+  return {
+    /**
+     * Called whenever the params are updated.
+     * @param {any} params - Updated params.
+     */
+    update(params) {
+      group.onUpdate(params);
+    },
+  };
 };

package/package/styles/variables.scss

@@ -9,10 +9,10 @@
   --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%; // primary
   --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% 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-background-color-5-hsl: var(--sui-base-hue) 5% 84%; // highlight
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%; // control
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%; // primary
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   // Accents
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
@@ -46,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% 50%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%; // 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%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.7",
+  "version": "0.11.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -26,32 +26,32 @@
     "svelte": "^4.2.12"
   },
   "devDependencies": {
-    "@playwright/test": "^1.42.1",
-    "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.4",
-    "@sveltejs/package": "^2.3.0",
+    "@playwright/test": "^1.43.0",
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "cspell": "^8.6.0",
+    "cspell": "^8.6.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.1",
+    "eslint-plugin-jsdoc": "^48.2.3",
     "eslint-plugin-svelte": "^2.35.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
-    "sass": "^1.72.0",
-    "stylelint": "^16.2.1",
+    "sass": "^1.74.1",
+    "stylelint": "^16.3.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.2.1",
-    "svelte-check": "^3.6.7",
+    "svelte-check": "^3.6.9",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^5.1.6",
+    "vite": "^5.2.8",
     "vitest": "^1.4.0"
   },
   "exports": {
@@ -61,6 +61,11 @@
       "svelte": "./package/components/alert/alert.svelte",
       "default": "./package/components/alert/alert.svelte"
     },
+    "./components/button/button-group.svelte": {
+      "types": "./package/components/button/button-group.svelte.d.ts",
+      "svelte": "./package/components/button/button-group.svelte",
+      "default": "./package/components/button/button-group.svelte"
+    },
     "./components/button/button.svelte": {
       "types": "./package/components/button/button.svelte.d.ts",
       "svelte": "./package/components/button/button.svelte",
@@ -431,6 +436,9 @@
       "components/alert/alert.svelte": [
         "./package/components/alert/alert.svelte.d.ts"
       ],
+      "components/button/button-group.svelte": [
+        "./package/components/button/button-group.svelte.d.ts"
+      ],
       "components/button/button.svelte": [
         "./package/components/button/button.svelte.d.ts"
       ],