@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

package/dist/controls/button/ButtonAction.svelte

@@ -1,22 +1,35 @@
-<script lang="ts">import Popper from "../../ui/popper/Popper.svelte";
-import Button from "./Button.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  element,
-  class: className = "",
-  menuProps = {},
-  popperProps = {},
-  popperContent = void 0,
-  disabled = false,
-  variant = "bordered",
-  tall = "kind",
-  children,
-  ...rest
-} = $props();
-let holder;
-let isOpen = $state(popperProps?.isOpen);
-let chevron = "fluent:chevron-down-20-regular";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { PopperProps } from '../../ui/popper/types.js';
+	import type { MenuProps } from '../../ui/menu/types.js';
+	import Popper from '../../ui/popper/Popper.svelte';
+	import Button from './Button.svelte';
+	import type { ButtonProps } from './types.js';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	type ButtonActionProps = ButtonProps & {
+		menuProps?: MenuProps;
+		popperProps?: PopperProps;
+		popperContent?: Snippet;
+	};
+
+	let {
+		element,
+		class: className = '',
+		menuProps = {},
+		popperProps = {},
+		popperContent = undefined,
+		disabled = false,
+		variant = 'bordered',
+		tall = 'small',
+		children,
+		...rest
+	}: ExpandProps<ButtonActionProps> = $props();
+	let holder: HTMLDivElement;
+	let isOpen = $state(popperProps?.isOpen);
+	let chevron = 'fluent:chevron-down-20-regular';
 </script>
 
 <div bind:this={holder} class="button button-action selected {variant} tall-{tall} {className}">
@@ -29,12 +42,12 @@ let chevron = "fluent:chevron-down-20-regular";
 			isOpen = true;
 		}}
 		{tall}
-		variant="naked"
-		class="chevron"><Icon icon={chevron} rotation={isOpen ? 180 : 0} /></Button
-	>
+		variant="naked" 
+		icon={{icon:chevron,rotation:isOpen ? 180 : 0}}
+		class="chevron" />
 </div>
 {#if isOpen && !disabled}
-	<Popper bind:isOpen parentNode={holder} stickToHookWidth={true} {...popperProps}>
+	<Popper bind:isOpen parentNode={holder} stickToHookWidth={true} autoClose={true} {...popperProps}>
 		<Slotted child={popperContent} />
 	</Popper>
 {/if}
@@ -47,7 +60,7 @@ let chevron = "fluent:chevron-down-20-regular";
   --sld-button-text-align: center;
   --sld-button-padding: 0;
   --sld-button-background: var(--sld-color-foreground-alpha-high);
-  --sld-button-contained-background: var(--sld-color-primary);
+  --sld-button-contained-background: var(--sld-color-primary-alpha-high);
   --sld-button-hover-border-color: var(--sld-color-primary);
   --sld-button-active-border-color: var(--sld-color-secondary);
   --sld-button-focus-border-color: var(--sld-color-primary);
@@ -74,6 +87,7 @@ let chevron = "fluent:chevron-down-20-regular";
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
   border: none;
+  border-radius: 0;
   margin: 0;
   text-align: var(--sld-button-text-align);
   font-size: var(--sld-button-font-size);
@@ -81,35 +95,13 @@ let chevron = "fluent:chevron-down-20-regular";
   color: var(--sld-color-foreground);
   padding: var(--sld-button-padding);
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   transition: all 0.2s ease-in-out;
   overflow: hidden;
   cursor: pointer;
-  align-content: center;
-  align-items: center;
+  align-content: stretch;
+  align-items: stretch;
   background: var(--sld-button-background);
-  /*  &:focus {
-      outline: 1px solid var(--sld-button-focus-border-color);
-      outline-offset: 2px;
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  &:focus-visible {
-      outline: 1px solid var(--sld-button-focus-border-color);
-      outline-offset: -2px;
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  &:focus:not(:focus-visible) {
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  &:hover {
-      background-color: var(--sld-button-hover-background);
-      box-shadow: var(--sld-button-hover-shadow);
-  }
-
-  &:active {
-      transform: translateY(1px);
-      box-shadow: var(--sld-button-active-shadow);
-  } */
   --preset-width: var(--sld-width-small);
   width: var(--preset-width-small);
 }
@@ -442,36 +434,58 @@ let chevron = "fluent:chevron-down-20-regular";
 :global(button.button) .button-start,
 :global(input[type="button"]) .button-start,
 :global(input[type="submit"]) .button-start {
-  --preset-ellipsis-line: 1;
-  position: absolute;
+  position: relative;
   top: 0;
   left: 0;
-  height: 100%;
-  display: flex;
+  max-height: 100%;
   align-items: center;
-  justify-content: center;
-  padding: 0 0.5rem;
+  align-content: center;
+  padding: 0 0.15rem;
+  display: block;
 }
 
-:global(button) .button-start[ellipsis], :global(button) .button-start.ellipsis,
-:global(.button) .button-start[ellipsis],
-:global(.button) .button-start.ellipsis,
-:global(button.button) .button-start[ellipsis],
-:global(button.button) .button-start.ellipsis,
-:global(input[type="button"]) .button-start[ellipsis],
-:global(input[type="button"]) .button-start.ellipsis,
-:global(input[type="submit"]) .button-start[ellipsis],
-:global(input[type="submit"]) .button-start.ellipsis {
+:global(button) .button-start:empty,
+:global(.button) .button-start:empty,
+:global(button.button) .button-start:empty,
+:global(input[type="button"]) .button-start:empty,
+:global(input[type="submit"]) .button-start:empty {
+  display: none;
+}
+
+:global(button) .button-central,
+:global(.button) .button-central,
+:global(button.button) .button-central,
+:global(input[type="button"]) .button-central,
+:global(input[type="submit"]) .button-central {
+  --preset-ellipsis-line: 1;
+  max-width: 100%;
+  max-height: 100%;
+  flex: 1;
+  align-items: center;
+  align-content: center;
+  padding-right: calc(var(--content-padding, 0.25rem) / 2);
+  text-align: var(--sld-button-text-align, center);
+}
+
+:global(button) .button-central[ellipsis], :global(button) .button-central.ellipsis,
+:global(.button) .button-central[ellipsis],
+:global(.button) .button-central.ellipsis,
+:global(button.button) .button-central[ellipsis],
+:global(button.button) .button-central.ellipsis,
+:global(input[type="button"]) .button-central[ellipsis],
+:global(input[type="button"]) .button-central.ellipsis,
+:global(input[type="submit"]) .button-central[ellipsis],
+:global(input[type="submit"]) .button-central.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-:global(button) .button-start.ellipsis-line-1,
-:global(.button) .button-start.ellipsis-line-1,
-:global(button.button) .button-start.ellipsis-line-1,
-:global(input[type="button"]) .button-start.ellipsis-line-1,
-:global(input[type="submit"]) .button-start.ellipsis-line-1 {
+:global(button) .button-central.ellipsis-line-1,
+:global(.button) .button-central.ellipsis-line-1,
+:global(button.button) .button-central.ellipsis-line-1,
+:global(input[type="button"]) .button-central.ellipsis-line-1,
+:global(input[type="submit"]) .button-central.ellipsis-line-1 {
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
@@ -481,11 +495,11 @@ let chevron = "fluent:chevron-down-20-regular";
   --preset-ellipsis-line: 1;
 }
 
-:global(button) .button-start.ellipsis-line-2,
-:global(.button) .button-start.ellipsis-line-2,
-:global(button.button) .button-start.ellipsis-line-2,
-:global(input[type="button"]) .button-start.ellipsis-line-2,
-:global(input[type="submit"]) .button-start.ellipsis-line-2 {
+:global(button) .button-central.ellipsis-line-2,
+:global(.button) .button-central.ellipsis-line-2,
+:global(button.button) .button-central.ellipsis-line-2,
+:global(input[type="button"]) .button-central.ellipsis-line-2,
+:global(input[type="submit"]) .button-central.ellipsis-line-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -495,11 +509,11 @@ let chevron = "fluent:chevron-down-20-regular";
   --preset-ellipsis-line: 2;
 }
 
-:global(button) .button-start.ellipsis-line-3,
-:global(.button) .button-start.ellipsis-line-3,
-:global(button.button) .button-start.ellipsis-line-3,
-:global(input[type="button"]) .button-start.ellipsis-line-3,
-:global(input[type="submit"]) .button-start.ellipsis-line-3 {
+:global(button) .button-central.ellipsis-line-3,
+:global(.button) .button-central.ellipsis-line-3,
+:global(button.button) .button-central.ellipsis-line-3,
+:global(input[type="button"]) .button-central.ellipsis-line-3,
+:global(input[type="submit"]) .button-central.ellipsis-line-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -509,11 +523,11 @@ let chevron = "fluent:chevron-down-20-regular";
   --preset-ellipsis-line: 3;
 }
 
-:global(button) .button-start.ellipsis-line-4,
-:global(.button) .button-start.ellipsis-line-4,
-:global(button.button) .button-start.ellipsis-line-4,
-:global(input[type="button"]) .button-start.ellipsis-line-4,
-:global(input[type="submit"]) .button-start.ellipsis-line-4 {
+:global(button) .button-central.ellipsis-line-4,
+:global(.button) .button-central.ellipsis-line-4,
+:global(button.button) .button-central.ellipsis-line-4,
+:global(input[type="button"]) .button-central.ellipsis-line-4,
+:global(input[type="submit"]) .button-central.ellipsis-line-4 {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
@@ -523,11 +537,11 @@ let chevron = "fluent:chevron-down-20-regular";
   --preset-ellipsis-line: 4;
 }
 
-:global(button) .button-start.ellipsis-line-5,
-:global(.button) .button-start.ellipsis-line-5,
-:global(button.button) .button-start.ellipsis-line-5,
-:global(input[type="button"]) .button-start.ellipsis-line-5,
-:global(input[type="submit"]) .button-start.ellipsis-line-5 {
+:global(button) .button-central.ellipsis-line-5,
+:global(.button) .button-central.ellipsis-line-5,
+:global(button.button) .button-central.ellipsis-line-5,
+:global(input[type="button"]) .button-central.ellipsis-line-5,
+:global(input[type="submit"]) .button-central.ellipsis-line-5 {
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
@@ -537,28 +551,6 @@ let chevron = "fluent:chevron-down-20-regular";
   --preset-ellipsis-line: 5;
 }
 
-:global(button) .button-start:empty,
-:global(.button) .button-start:empty,
-:global(button.button) .button-start:empty,
-:global(input[type="button"]) .button-start:empty,
-:global(input[type="submit"]) .button-start:empty {
-  display: none;
-}
-
-:global(button) .button-central,
-:global(.button) .button-central,
-:global(button.button) .button-central,
-:global(input[type="button"]) .button-central,
-:global(input[type="submit"]) .button-central {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.5rem;
-  text-align: var(--sld-button-text-align);
-}
-
 :global(button) .button-central:empty,
 :global(.button) .button-central:empty,
 :global(button.button) .button-central:empty,
@@ -567,36 +559,32 @@ let chevron = "fluent:chevron-down-20-regular";
   display: none;
 }
 
-:global(button) .button-action,
-:global(.button) .button-action,
-:global(button.button) .button-action,
-:global(input[type="button"]) .button-action,
-:global(input[type="submit"]) .button-action {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
+:global(button) .button-end,
+:global(.button) .button-end,
+:global(button.button) .button-end,
+:global(input[type="button"]) .button-end,
+:global(input[type="submit"]) .button-end {
+  position: relative;
   align-items: center;
-  justify-content: center;
-  width: var(--w-tiny);
+  align-content: center;
   padding: 0 0.5rem;
+  text-align: center;
   cursor: pointer;
 }
 
-:global(button) .button-action:empty,
-:global(.button) .button-action:empty,
-:global(button.button) .button-action:empty,
-:global(input[type="button"]) .button-action:empty,
-:global(input[type="submit"]) .button-action:empty {
+:global(button) .button-end:empty,
+:global(.button) .button-end:empty,
+:global(button.button) .button-end:empty,
+:global(input[type="button"]) .button-end:empty,
+:global(input[type="submit"]) .button-end:empty {
   display: none;
 }
 
-:global(button) .button-action:hover,
-:global(.button) .button-action:hover,
-:global(button.button) .button-action:hover,
-:global(input[type="button"]) .button-action:hover,
-:global(input[type="submit"]) .button-action:hover {
+:global(button) .button-end:hover,
+:global(.button) .button-end:hover,
+:global(button.button) .button-end:hover,
+:global(input[type="button"]) .button-end:hover,
+:global(input[type="submit"]) .button-end:hover {
   background-color: var(--sld-button-action-hover-background);
 }
 
@@ -1320,6 +1308,7 @@ let chevron = "fluent:chevron-down-20-regular";
 .button-action {
   display: inline-flex;
   position: relative;
+  align-items: center;
 }
 
 .button-action .chevron {

package/dist/controls/button/ButtonAction.svelte.d.ts

@@ -19,15 +19,16 @@ declare const ButtonAction: $$__sveltets_2_IsomorphicComponent<{
     type?: ("button" | "submit" | "reset") | undefined;
     icon?: import("../../types/index.js").ElementProps["icon"] | undefined;
     wrap?: import("../../types/index.js").ElementProps["wrap"] | undefined;
+    nowrap?: boolean | undefined;
+    ellipsis?: boolean | undefined;
     iconEnd?: import("../../types/index.js").ElementProps["icon"] | undefined;
     bgTheme?: string | undefined;
-    usePopper?: import("../..").UsePopperProps | undefined;
+    usePopperProps?: import("../..").UsePopperProps | undefined;
     popperOpen?: boolean | undefined;
     loading?: boolean | undefined;
     showChip?: boolean | undefined;
     variant?: import("../../types/index.js").ElementProps["buttonVariant"] | undefined;
     width?: import("../../types/index.js").ElementProps["width"] | undefined;
-    nowrap?: boolean | undefined;
     tall?: import("../../types/index.js").ElementProps["tall"] | undefined;
     selected?: boolean | undefined;
     value?: string | undefined;

package/dist/controls/button/ButtonMenu.svelte

@@ -1,19 +1,25 @@
-<script lang="ts" generics="T">import Popper from "../../ui/popper/Popper.svelte";
-import MenuList from "../../ui/menuList/MenuList.svelte";
-import Button from "./Button.svelte";
-import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
-let {
-  menuProps = {},
-  popperProps = {},
-  disabled = false,
-  element = $bindable(),
-  popperElement,
-  menuItem,
-  children,
-  ...rest
-} = $props();
-let isOpen = $state(popperProps?.isOpen);
-let chevron = $derived(disabled ? "fluent:chevron-up-20-regular" : "fluent:chevron-up-12-down");
+<script lang="ts" generics="T">
+	import Popper from '../../ui/popper/Popper.svelte';
+	import MenuList from '../../ui/menuList/MenuList.svelte';
+	import Button from './Button.svelte';
+	import type { ButtonMenuProps } from './types.js';
+	import type { MenuListProps } from '../../ui/menuList/types.js';
+	import type { PopperProps } from '../../ui/popper/types.js';
+	import MenuListItem from '../../ui/menuList/MenuListItem.svelte';
+
+	let {
+		menuProps = {} as MenuListProps<T>,
+		popperProps = {} as PopperProps,
+		disabled = false,
+		element = $bindable(),
+		popperElement,
+		menuItem,
+		children,
+		...rest
+	}: ButtonMenuProps<T> = $props();
+
+	let isOpen = $state(popperProps?.isOpen);
+	let chevron = $derived(disabled ? 'fluent:chevron-up-20-regular' : 'fluent:chevron-up-12-down');
 </script>
 
 <Button

package/dist/controls/button/IconButton.svelte

@@ -1,17 +1,43 @@
-<script lang="ts">import Icon from "../../base/icon/Icon.svelte";
-import Button from "./Button.svelte";
-let {
-  element,
-  icon,
-  ratio = "1/1",
-  iconFontSize = "full",
-  rotation = 0,
-  size = "mini",
-  children,
-  ...rest
-} = $props();
+<script lang="ts">
+	import Icon from '../../base/icon/Icon.svelte';
+	import Button from './Button.svelte';
+	import type { ElementProps } from '../../types/index.js';
+	import type { Snippet } from 'svelte';
+	import type { ButtonProps } from './types.js';
+	type IconButtonProps = {
+		/** Icon to be displayed */
+		icon: ElementProps['icon'];
+		showShip?: boolean;
+		/** Font size of the icon */
+		iconFontSize?: ElementProps['iconSize'];
+		element?: HTMLButtonElement | null;
+
+		/** Aspect ratio of the icon button */
+		ratio?: string;
+
+		/** Whether to show the chip or not */
+		showChip?: boolean;
+
+		/** Rotation of the icon */
+		rotation?: number;
+
+		size?: ElementProps['width'];
+		/** Children   for the default content */
+		children?: Snippet;
+	} & Partial<ButtonProps>;
+
+	let {
+		element,
+		icon,
+		ratio = '1/1',
+		iconFontSize = 'full',
+		rotation = 0,
+		size = 'mini',
+		children,
+		...rest
+	}: IconButtonProps = $props();
 </script>
 
-<Button variant="square" bind:element width={size} tall="unset" {ratio} {...rest}>
+<!-- <Button variant="square" bind:element width={size} tall="unset" {ratio} {...rest}>
 	<Icon style="display:block; " {rotation} {icon} iconSize={iconFontSize} />
-</Button>
+</Button> -->

package/dist/controls/button/button-action.scss

@@ -1,7 +1,7 @@
 .button-action {
   display: inline-flex;
   position: relative;
-
+  align-items: center;
   .chevron {
     flex-shrink: 1;
   }

package/dist/controls/button/button.scss

@@ -8,7 +8,7 @@
     --sld-button-text-align: center;
     --sld-button-padding: 0;
     --sld-button-background: var(--sld-color-foreground-alpha-high);
-    --sld-button-contained-background: var(--sld-color-primary);
+    --sld-button-contained-background: var(--sld-color-primary-alpha-high);
     --sld-button-hover-border-color: var(--sld-color-primary);
     --sld-button-active-border-color: var(--sld-color-secondary);
     --sld-button-focus-border-color: var(--sld-color-primary);
@@ -38,6 +38,7 @@
     @include elevation;
 
     border: none;
+    border-radius: 0;
     margin: 0;
 
     text-align: var(--sld-button-text-align);
@@ -48,14 +49,14 @@
     padding: var(--sld-button-padding);
     position: relative;
 
-    display: inline-block;
+    display: inline-flex;
 
     transition: all 0.2s ease-in-out;
     overflow: hidden;
     cursor: pointer;
 
-    align-content: center;
-    align-items: center;
+    align-content: stretch;
+    align-items: stretch;
 
     background: var(--sld-button-background);
 
@@ -82,68 +83,42 @@
             box-shadow: var(--sld-button-focus-shadow);
         }
     }
-    /*  &:focus {
-        outline: 1px solid var(--sld-button-focus-border-color);
-        outline-offset: 2px;
-        box-shadow: var(--sld-button-focus-shadow);
-    }
-    &:focus-visible {
-        outline: 1px solid var(--sld-button-focus-border-color);
-        outline-offset: -2px;
-        box-shadow: var(--sld-button-focus-shadow);
-    }
-    &:focus:not(:focus-visible) {
-        box-shadow: var(--sld-button-focus-shadow);
-    }
-    &:hover {
-        background-color: var(--sld-button-hover-background);
-        box-shadow: var(--sld-button-hover-shadow);
-    }
-
-    &:active {
-        transform: translateY(1px);
-        box-shadow: var(--sld-button-active-shadow);
-    } */
 
     .button-start {
-        @include ui-ellipsises-presets;
-        position: absolute;
+        position: relative;
         top: 0;
         left: 0;
-        height: 100%;
-        display: flex;
+        max-height: 100%;
         align-items: center;
-        justify-content: center;
-        padding: 0 0.5rem;
-
+        align-content: center;
+        padding: 0 0.15rem;
+        display: block;
         &:empty {
             display: none;
         }
     }
 
     .button-central {
-        width: 100%;
-        height: 100%;
-        display: flex;
+        @include ui-ellipsises-presets;
+        max-width: 100%;
+        max-height: 100%;
+        flex: 1;
         align-items: center;
-        justify-content: center;
-        padding: 0 0.5rem; //var(--content-padding, 0.25rem);
-        text-align: var(--sld-button-text-align);
+        align-content: center;
+        padding-right: calc(var(--content-padding, 0.25rem) / 2);
+        text-align: var(--sld-button-text-align, center);
         &:empty {
             display: none;
         }
     }
 
-    .button-action {
-        position: absolute;
-        top: 0;
-        right: 0;
-        height: 100%;
-        display: flex;
+    .button-end {
+        position: relative;
         align-items: center;
-        justify-content: center;
-        width: var(--w-tiny);
+        align-content: center;
+        //width: var(--w-tiny);
         padding: 0 0.5rem;
+        text-align: center;
         cursor: pointer;
 
         &:empty {

package/dist/controls/button/types.d.ts

@@ -1,21 +1,26 @@
-import type { DemoerStoryProps } from '../../base/demoer/types.js';
-import { type ElementProps } from '../../types/index.js';
-import type { MenuListProps } from '../../ui/menuList/types.js';
-import type { PopperProps } from '../../ui/popper/types.js';
-import type { UsePopperProps } from '../../ui/popper/usePopper.js';
-import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from "../../base/demoer/types.js";
+import { type ElementProps } from "../../types/index.js";
+import type { MenuListProps } from "../../ui/menuList/types.js";
+import type { PopperProps } from "../../ui/popper/types.js";
+import type { UsePopperProps } from "../../ui/popper/usePopper.js";
+import type { Snippet } from "svelte";
 export type ButtonProps = {
     element?: HTMLButtonElement;
     /** button type */
-    type?: 'button' | 'submit' | 'reset';
-    icon?: ElementProps['icon'];
-    wrap?: ElementProps['wrap'];
+    type?: "button" | "submit" | "reset";
+    icon?: ElementProps["icon"];
+    /** add ellipsis on overflowed text */
+    wrap?: ElementProps["wrap"];
+    /** @deprecated  add ellipsis on overflowed text */
+    nowrap?: boolean;
+    /** add ellipsis on overflowed text */
+    ellipsis?: boolean;
     /** endIcon as a parameter */
-    iconEnd?: ElementProps['icon'];
+    iconEnd?: ElementProps["icon"];
     /** background color theme */
     bgTheme?: string;
     /** paramters for usePopper */
-    usePopper?: UsePopperProps;
+    usePopperProps?: UsePopperProps;
     /** show / hide popper   */
     popperOpen?: boolean;
     /** show loading state */
@@ -23,12 +28,10 @@ export type ButtonProps = {
     /** show chip */
     showChip?: boolean;
     /** button style */
-    variant?: ElementProps['buttonVariant'];
+    variant?: ElementProps["buttonVariant"];
     /** preset width of the button */
-    width?: ElementProps['width'];
-    /** add ellipsis on overflowed text */
-    nowrap?: boolean;
-    tall?: ElementProps['tall'];
+    width?: ElementProps["width"];
+    tall?: ElementProps["tall"];
     /**  button selected */
     selected?: boolean;
     /** button value */