@sveltia/ui 0.10.7 → 0.10.8

package/package/components/button/button-group.svelte

@@ -0,0 +1,17 @@
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+</script>
+
+<div role="group" class="sui button-group {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.button-group {
+  display: inline-flex;
+  align-items: center;
+}</style>

package/package/components/button/button-group.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ButtonGroupProps */
+/** @typedef {typeof __propDef.events}  ButtonGroupEvents */
+/** @typedef {typeof __propDef.slots}  ButtonGroupSlots */
+export default class ButtonGroup extends SvelteComponent<{
+    [x: string]: any;
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ButtonGroupProps = typeof __propDef.props;
+export type ButtonGroupEvents = typeof __propDef.events;
+export type ButtonGroupSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/button/button.svelte.d.ts

@@ -10,8 +10,8 @@ export default class Button extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     size?: "small" | "medium" | "large" | undefined;
     type?: "reset" | "submit" | "button" | undefined;
     value?: string | undefined;
@@ -118,8 +118,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         size?: 'small' | 'medium' | 'large' | undefined;
         type?: "reset" | "submit" | "button" | undefined;
         value?: string | undefined;

package/package/components/button/select-button-group.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class SelectButtonGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
@@ -30,8 +30,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;

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

@@ -9,8 +9,8 @@
 export default class SelectButton extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     size?: "small" | "medium" | "large" | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -42,8 +42,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         size?: "small" | "medium" | "large" | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/button/split-button.svelte.d.ts

@@ -10,8 +10,8 @@
 export default class SplitButton extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     size?: "small" | "medium" | "large" | undefined;
     hidden?: boolean | undefined;
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | undefined;
@@ -41,8 +41,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         size?: 'small' | 'medium' | 'large' | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | undefined;

package/package/components/checkbox/checkbox.svelte.d.ts

@@ -11,10 +11,10 @@ export default class Checkbox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
+    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | "mixed" | undefined;
-    disabled?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -39,10 +39,10 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
+        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | "mixed" | undefined;
-        disabled?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/disclosure/disclosure.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Disclosure extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     hidden?: boolean | undefined;
     expanded?: boolean | undefined;
 }, {
@@ -47,8 +47,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         hidden?: boolean | undefined;
         expanded?: boolean | undefined;
     };

package/package/components/divider/divider.svelte

@@ -36,8 +36,12 @@
   background-color: var(--sui-secondary-border-color);
 }
 .divider[aria-orientation=horizontal] {
+  margin: 8px 0;
+  width: 100%;
   height: 1px;
 }
 .divider[aria-orientation=vertical] {
+  margin: 0 8px;
   width: 1px;
+  height: 100%;
 }</style>

package/package/components/listbox/listbox.svelte.d.ts

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

package/package/components/listbox/option-group.svelte.d.ts

@@ -11,8 +11,8 @@
 export default class OptionGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -28,8 +28,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         hidden?: boolean | undefined;
     };
     events: {

package/package/components/listbox/option.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Option extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     selected?: boolean | undefined;
@@ -46,8 +46,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         selected?: boolean | undefined;

package/package/components/menu/menu-button.svelte.d.ts

@@ -8,9 +8,9 @@
 export default class MenuButton extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     focus?: (() => void) | undefined;
     label?: string | undefined;
-    disabled?: boolean | undefined;
     size?: "small" | "medium" | "large" | undefined;
     hidden?: boolean | undefined;
     variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
@@ -40,9 +40,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         focus?: (() => void) | undefined;
         label?: string | undefined;
-        disabled?: boolean | undefined;
         size?: "small" | "medium" | "large" | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;

package/package/components/menu/menu-item-checkbox.svelte.d.ts

@@ -8,9 +8,9 @@
 export default class MenuItemCheckbox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
     iconName?: string | undefined;
     iconLabel?: string | undefined;
@@ -32,9 +32,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         iconName?: string | undefined;
         iconLabel?: string | undefined;

package/package/components/menu/menu-item-group.svelte.d.ts

@@ -5,8 +5,8 @@
 export default class MenuItemGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    title?: string | undefined;
     disabled?: boolean | undefined;
+    title?: string | undefined;
     hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -22,8 +22,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        title?: string | undefined;
         disabled?: boolean | undefined;
+        title?: string | undefined;
         hidden?: boolean | undefined;
     };
     events: {

package/package/components/menu/menu-item-radio.svelte.d.ts

@@ -9,9 +9,9 @@
 export default class MenuItemRadio extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
     iconName?: string | undefined;
     iconLabel?: string | undefined;
@@ -33,9 +33,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         iconName?: string | undefined;
         iconLabel?: string | undefined;

package/package/components/menu/menu-item.svelte.d.ts

@@ -8,8 +8,8 @@
 export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
     hidden?: boolean | undefined;
     iconName?: string | undefined;
@@ -42,8 +42,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         hidden?: boolean | undefined;
         iconName?: string | undefined;

package/package/components/radio/radio-group.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class RadioGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
@@ -31,8 +31,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;

package/package/components/radio/radio.svelte.d.ts

@@ -11,9 +11,9 @@ export default class Radio extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
+    disabled?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | undefined;
-    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
 }, {
@@ -36,9 +36,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
+        disabled?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | undefined;
-        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
     };

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/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/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.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -27,31 +27,31 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",
-    "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.4",
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.5.5",
     "@sveltejs/package": "^2.3.0",
     "@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.2",
     "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",
+    "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.8",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^5.1.6",
+    "vite": "^5.2.7",
     "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"
       ],