@sveltia/ui 0.11.1 → 0.12.1

package/package/components/button/button.svelte

@@ -8,8 +8,8 @@
 
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { activateKeyShortcuts } from '../../services/events';
   import Popup from '../util/popup.svelte';
+  import { activateKeyShortcuts } from '../../services/events';
 
   /**
    * Reference to the `<button>` element.
@@ -354,4 +354,7 @@ button:global(.danger) {
 }
 button :global(.label) {
   padding: 0 4px;
+}
+button:has([slot=start-icon] + [slot=end-icon]) {
+  gap: 0;
 }</style>

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

@@ -10,9 +10,8 @@ export default class Button extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    disabled?: boolean | undefined;
     label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    disabled?: boolean | undefined;
     type?: "reset" | "submit" | "button" | undefined;
     value?: string | undefined;
     role?: string | undefined;
@@ -22,6 +21,7 @@ export default class Button extends SvelteComponent<{
     pressed?: boolean | "mixed" | undefined;
     keyShortcuts?: string | undefined;
     variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     iconic?: boolean | undefined;
     pill?: boolean | undefined;
     flex?: boolean | undefined;
@@ -119,9 +119,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        disabled?: boolean | undefined;
         label?: string | undefined;
-        size?: 'small' | 'medium' | 'large' | undefined;
+        disabled?: boolean | undefined;
         type?: "reset" | "submit" | "button" | undefined;
         value?: string | undefined;
         role?: string | undefined;
@@ -131,6 +130,7 @@ declare const __propDef: {
         pressed?: boolean | 'mixed' | undefined;
         keyShortcuts?: string | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;
+        size?: 'small' | 'medium' | 'large' | undefined;
         iconic?: boolean | undefined;
         pill?: boolean | undefined;
         flex?: boolean | undefined;

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

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

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

@@ -9,12 +9,12 @@
 export default class SelectButton extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     label?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     iconic?: boolean | undefined;
     selected?: boolean | undefined;
 }, {
@@ -42,12 +42,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         label?: string | undefined;
-        size?: "small" | "medium" | "large" | undefined;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;
+        size?: "small" | "medium" | "large" | undefined;
         iconic?: boolean | undefined;
         selected?: boolean | undefined;
     };

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

@@ -7,9 +7,9 @@
 -->
 <script>
   import { _ } from 'svelte-i18n';
+  import Button from './button.svelte';
   import Icon from '../icon/icon.svelte';
   import MenuButton from '../menu/menu-button.svelte';
-  import Button from './button.svelte';
 
   /**
    * The `class` attribute on the `<button>` element.
@@ -83,7 +83,7 @@
     {showPopupBackdrop}
   >
     <slot name="chevron-icon" slot="end-icon">
-      <Icon name="arrow_drop_down" />
+      <Icon name="arrow_drop_down" class="small-arrow" />
     </slot>
     <slot name="popup" slot="popup" />
   </MenuButton>
@@ -105,7 +105,4 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   aspect-ratio: 3/4;
-}
-.split-button :global(button):is(.menu-button) :global(.icon) {
-  font-size: 20px;
 }</style>

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

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

package/package/components/calendar/calendar.svelte

@@ -56,7 +56,7 @@
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
     >
-      <Icon slot="end-icon" name="arrow_drop_down" />
+      <Icon slot="end-icon" name="arrow_drop_down" class="small-arrow" />
       <div slot="popup" role="none" class="popup-inner" on:click|stopPropagation>
         <div role="group" aria-label={$_('_sui.calendar.year')}>
           <div role="none" class="header">

package/package/components/checkbox/checkbox.svelte

@@ -6,8 +6,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { createEventDispatcher } from 'svelte';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -64,7 +64,7 @@
   export let label = undefined;
 
   const dispatch = createEventDispatcher();
-  const id = getRandomId('checkbox');
+  const id = generateElementId('checkbox');
 
   /**
    * Reference to the `Button` component.

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

@@ -11,14 +11,14 @@ 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;
-    required?: boolean | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
+    required?: boolean | undefined;
+    checked?: boolean | "mixed" | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -39,14 +39,14 @@ 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;
-        required?: boolean | undefined;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
+        required?: boolean | undefined;
+        checked?: boolean | "mixed" | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/dialog/dialog.svelte

@@ -5,8 +5,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
@@ -83,7 +83,7 @@
    * The ID of the drawer.
    * @type {string}
    */
-  const id = getRandomId('dialog');
+  const id = generateElementId('dialog');
   /**
    * A reference to the modal component.
    * @type {Modal}

package/package/components/dialog/dialog.svelte.d.ts

@@ -10,10 +10,10 @@ export default class Dialog extends SvelteComponent<{
     [x: string]: any;
     title: string;
     class?: string | undefined;
-    size?: "small" | "medium" | "large" | "x-large" | undefined;
     role?: "dialog" | "alertdialog" | undefined;
     open?: boolean | undefined;
     lightDismiss?: boolean | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | undefined;
     showClose?: boolean | undefined;
     showOk?: boolean | undefined;
     okLabel?: string | undefined;
@@ -53,10 +53,10 @@ declare const __propDef: {
         [x: string]: any;
         title: string;
         class?: string | undefined;
-        size?: "small" | "medium" | "large" | "x-large" | undefined;
         role?: "dialog" | "alertdialog" | undefined;
         open?: boolean | undefined;
         lightDismiss?: boolean | undefined;
+        size?: "small" | "medium" | "large" | "x-large" | undefined;
         showClose?: boolean | undefined;
         showOk?: boolean | undefined;
         okLabel?: string | undefined;

package/package/components/dialog/prompt-dialog.svelte

@@ -7,8 +7,8 @@
   @see https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
 -->
 <script>
-  import TextInput from '../text-field/text-input.svelte';
   import Dialog from './dialog.svelte';
+  import TextInput from '../text-field/text-input.svelte';
 
   /**
    * The `class` attribute on the `<dialog>` element.
@@ -31,6 +31,11 @@
    * @type {string}
    */
   export let okLabel = '';
+  /**
+   * Whether to disable the OK button.
+   * @type {boolean}
+   */
+  export let okDisabled = false;
   /**
    * Text label displayed on the Cancel button.
    * @type {string}
@@ -54,6 +59,7 @@
   bind:open
   {title}
   {okLabel}
+  {okDisabled}
   {cancelLabel}
   {...$$restProps}
   on:opening

package/package/components/dialog/prompt-dialog.svelte.d.ts

@@ -15,6 +15,7 @@ export default class PromptDialog extends SvelteComponent<{
     value?: string | undefined;
     open?: boolean | undefined;
     okLabel?: string | undefined;
+    okDisabled?: boolean | undefined;
     cancelLabel?: string | undefined;
     textboxAttrs?: object | undefined;
 }, {
@@ -47,6 +48,7 @@ declare const __propDef: {
         value?: string | undefined;
         open?: boolean | undefined;
         okLabel?: string | undefined;
+        okDisabled?: boolean | undefined;
         cancelLabel?: string | undefined;
         textboxAttrs?: object | undefined;
     };

package/package/components/disclosure/disclosure.svelte

@@ -7,8 +7,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { createEventDispatcher } from 'svelte';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -40,7 +40,7 @@
   export let label = '';
 
   const dispatch = createEventDispatcher();
-  const id = getRandomId('disclosure');
+  const id = generateElementId('disclosure');
 </script>
 
 <div

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

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

package/package/components/drawer/drawer.svelte

@@ -5,8 +5,8 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
+  import { generateElementId } from '@sveltia/utils/element';
   import { _ } from 'svelte-i18n';
-  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
@@ -58,7 +58,7 @@
    * The ID of the drawer.
    * @type {string}
    */
-  const id = getRandomId('drawer');
+  const id = generateElementId('drawer');
   /**
    * A reference to the modal component.
    * @type {Modal}

package/package/components/drawer/drawer.svelte.d.ts

@@ -10,11 +10,11 @@ export default class Drawer extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     title?: string | undefined;
-    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
     position?: "top" | "left" | "right" | "bottom" | undefined;
     open?: boolean | undefined;
     lightDismiss?: boolean | undefined;
     keepContent?: boolean | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
     showClose?: false | "inside" | "outside" | undefined;
 }, {
     opening: CustomEvent<any>;
@@ -47,11 +47,11 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         title?: string | undefined;
-        size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
         position?: "top" | "left" | "right" | "bottom" | undefined;
         open?: boolean | undefined;
         lightDismiss?: boolean | undefined;
         keepContent?: boolean | undefined;
+        size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
         showClose?: false | "inside" | "outside" | undefined;
     };
     events: {

package/package/components/grid/grid-body.svelte

@@ -5,7 +5,7 @@
   @see https://w3c.github.io/aria/#rowgroup
 -->
 <script>
-  import { getRandomId } from '../../services/util';
+  import { generateElementId } from '@sveltia/utils/element';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -20,7 +20,7 @@
    */
   export let label = '';
 
-  const id = getRandomId('tbody');
+  const id = generateElementId('tbody');
 </script>
 
 <div

package/package/components/grid/grid.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Grid extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    multiple?: boolean | undefined;
     element?: HTMLElement | undefined;
+    multiple?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -27,8 +27,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        multiple?: boolean | undefined;
         element?: HTMLElement | undefined;
+        multiple?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/icon/icon.svelte

@@ -24,3 +24,9 @@
 >
   {name}
 </span>
+
+<style>.icon.small-arrow {
+  overflow: hidden;
+  width: 12px;
+  text-indent: -6px;
+}</style>

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

@@ -10,16 +10,16 @@
 export default class Listbox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
-    multiple?: boolean | undefined;
-    required?: boolean | undefined;
+    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
     searchTerms?: string | undefined;
+    required?: boolean | undefined;
+    multiple?: boolean | undefined;
 }, {
     click: MouseEvent;
-    filter: Event | KeyboardEvent | UIEvent | ErrorEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+    filter: Event | MouseEvent | UIEvent | KeyboardEvent | ErrorEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -35,17 +35,17 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
-        multiple?: boolean | undefined;
-        required?: boolean | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
         searchTerms?: string | undefined;
+        required?: boolean | undefined;
+        multiple?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
-        filter: Event | KeyboardEvent | UIEvent | ErrorEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        filter: Event | MouseEvent | UIEvent | KeyboardEvent | ErrorEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -7,7 +7,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
 -->
 <script>
-  import { getRandomId } from '../../services/util';
+  import { generateElementId } from '@sveltia/utils/element';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -30,7 +30,7 @@
    */
   export let label = '';
 
-  const id = getRandomId('optgroup');
+  const id = generateElementId('optgroup');
 </script>
 
 <div

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;
-    disabled?: boolean | undefined;
     label?: string | undefined;
+    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -28,8 +28,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         label?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
     };
     events: {

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

@@ -105,11 +105,3 @@
 >
   <slot name="popup" />
 </Popup>
-
-<style>.wrapper {
-  display: contents;
-}
-.wrapper :global(.label + .icon:last-child) {
-  margin: 0 -2px;
-  font-size: 20px;
-}</style>

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

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

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

@@ -8,10 +8,10 @@
 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;
+    checked?: boolean | undefined;
     iconName?: string | undefined;
     iconLabel?: string | undefined;
 }, {
@@ -32,10 +32,10 @@ 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;
+        checked?: boolean | undefined;
         iconName?: string | undefined;
         iconLabel?: string | undefined;
     };

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

@@ -3,7 +3,7 @@
   A menu item group.
 -->
 <script>
-  import { getRandomId } from '../../services/util';
+  import { generateElementId } from '@sveltia/utils/element';
 
   /**
    * The `class` attribute on the wrapper element.
@@ -26,7 +26,7 @@
    */
   export let title = '';
 
-  const id = getRandomId('group');
+  const id = generateElementId('group');
 </script>
 
 <div

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;
-    disabled?: boolean | undefined;
     title?: string | undefined;
+    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -22,8 +22,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        disabled?: boolean | undefined;
         title?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
     };
     events: {