@medyll/idae-slotui-svelte 0.25.0 → 0.27.0

package/dist/controls/autocomplete/AutoComplete.svelte.d.ts

@@ -25,7 +25,7 @@ declare class __sveltets_Render<T> {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "element" | "data" | "selectedIndex" | "filteredData";
+    bindings(): "data" | "selectedIndex" | "element" | "filteredData";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/controls/switch/Switch.svelte.d.ts

@@ -16,7 +16,7 @@ declare class __sveltets_Render<T = Data> {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "element" | "name" | "disabled" | "checked";
+    bindings(): "name" | "element" | "disabled" | "checked";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/controls/textfield/TextField.svelte.d.ts

@@ -36,6 +36,6 @@ declare const TextField: $$__sveltets_2_IsomorphicComponent<{
     inputFirst?: import("svelte").Snippet | undefined;
 } & Partial<HTMLInputElement>, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "width" | "element" | "value">;
+}, {}, {}, "value" | "width" | "element">;
 type TextField = InstanceType<typeof TextField>;
 export default TextField;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from './componentCite.js';
-export * from './types/slotui-ambient.d.js';
+export * from './csss/csss.js';
 export * as windowMinCss from './slotui-css/window.min.css';
 export * as windowCss from './slotui-css/window.css';
 export * as treeMinCss from './slotui-css/tree.min.css';
@@ -35,6 +35,8 @@ export * as slotuiMixinsCss from './slotui-css/slotui-mixins.css';
 export * as slotuiCombinedCss from './slotui-css/slotui-combined.css';
 export * as sliderMinCss from './slotui-css/slider.min.css';
 export * as sliderCss from './slotui-css/slider.css';
+export * as sheetConfigMinCss from './slotui-css/sheetConfig.min.css';
+export * as sheetConfigCss from './slotui-css/sheetConfig.css';
 export * as selectMinCss from './slotui-css/select.min.css';
 export * as selectCss from './slotui-css/select.css';
 export * as ratingMinCss from './slotui-css/rating.min.css';
@@ -71,6 +73,8 @@ export * as csssMinCss from './slotui-css/csss.min.css';
 export * as csssCss from './slotui-css/csss.css';
 export * as contentSwitcherMinCss from './slotui-css/content-switcher.min.css';
 export * as contentSwitcherCss from './slotui-css/content-switcher.css';
+export * as containerConfigMinCss from './slotui-css/containerConfig.min.css';
+export * as containerConfigCss from './slotui-css/containerConfig.css';
 export * as confirmMinCss from './slotui-css/confirm.min.css';
 export * as confirmCss from './slotui-css/confirm.css';
 export * as chromeFrameMinCss from './slotui-css/chrome-frame.min.css';
@@ -103,7 +107,6 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
 export * as autoCompleteCss from './slotui-css/auto-complete.css';
 export * as alertMinCss from './slotui-css/alert.min.css';
 export * as alertCss from './slotui-css/alert.css';
-export * from './csss/csss.js';
 export * from './utils/uses/toggler.js';
 export * from './utils/uses/positioner.js';
 export * from './utils/uses/navigation.js';
@@ -112,7 +115,6 @@ export * from './utils/uses/event.js';
 export * from './utils/uses/draggabler.js';
 export * from './utils/stylesheet/utils.js';
 export * from './utils/stylesheet/types.js';
-export * as containerConfigCss from './utils/stylesheet/containerConfig.css';
 export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
 export { default as Slotted } from './utils/slotted/Slotted.svelte';
 export * from './utils/looper/types.js';
@@ -185,7 +187,6 @@ export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
 export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
 export * from './styles/slotuisheet/utils.js';
 export * from './styles/slotuisheet/types.js';
-export * as sheetConfigCss from './styles/slotuisheet/sheetConfig.css';
 export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
 export * from './navigation/tabs/types.js';
 export { default as Tabs } from './navigation/tabs/Tabs.svelte';

package/dist/index.js

@@ -1,6 +1,6 @@
 // auto exports of entry components
 export * from './componentCite.js';
-export * from './types/slotui-ambient.d.js';
+export * from './csss/csss.js';
 export * as windowMinCss from './slotui-css/window.min.css';
 export * as windowCss from './slotui-css/window.css';
 export * as treeMinCss from './slotui-css/tree.min.css';
@@ -36,6 +36,8 @@ export * as slotuiMixinsCss from './slotui-css/slotui-mixins.css';
 export * as slotuiCombinedCss from './slotui-css/slotui-combined.css';
 export * as sliderMinCss from './slotui-css/slider.min.css';
 export * as sliderCss from './slotui-css/slider.css';
+export * as sheetConfigMinCss from './slotui-css/sheetConfig.min.css';
+export * as sheetConfigCss from './slotui-css/sheetConfig.css';
 export * as selectMinCss from './slotui-css/select.min.css';
 export * as selectCss from './slotui-css/select.css';
 export * as ratingMinCss from './slotui-css/rating.min.css';
@@ -72,6 +74,8 @@ export * as csssMinCss from './slotui-css/csss.min.css';
 export * as csssCss from './slotui-css/csss.css';
 export * as contentSwitcherMinCss from './slotui-css/content-switcher.min.css';
 export * as contentSwitcherCss from './slotui-css/content-switcher.css';
+export * as containerConfigMinCss from './slotui-css/containerConfig.min.css';
+export * as containerConfigCss from './slotui-css/containerConfig.css';
 export * as confirmMinCss from './slotui-css/confirm.min.css';
 export * as confirmCss from './slotui-css/confirm.css';
 export * as chromeFrameMinCss from './slotui-css/chrome-frame.min.css';
@@ -104,7 +108,6 @@ export * as autoCompleteMinCss from './slotui-css/auto-complete.min.css';
 export * as autoCompleteCss from './slotui-css/auto-complete.css';
 export * as alertMinCss from './slotui-css/alert.min.css';
 export * as alertCss from './slotui-css/alert.css';
-export * from './csss/csss.js';
 export * from './utils/uses/toggler.js';
 export * from './utils/uses/positioner.js';
 export * from './utils/uses/navigation.js';
@@ -113,7 +116,6 @@ export * from './utils/uses/event.js';
 export * from './utils/uses/draggabler.js';
 export * from './utils/stylesheet/utils.js';
 export * from './utils/stylesheet/types.js';
-export * as containerConfigCss from './utils/stylesheet/containerConfig.css';
 export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
 export { default as Slotted } from './utils/slotted/Slotted.svelte';
 export * from './utils/looper/types.js';
@@ -186,7 +188,6 @@ export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
 export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
 export * from './styles/slotuisheet/utils.js';
 export * from './styles/slotuisheet/types.js';
-export * as sheetConfigCss from './styles/slotuisheet/sheetConfig.css';
 export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
 export * from './navigation/tabs/types.js';
 export { default as Tabs } from './navigation/tabs/Tabs.svelte';

package/dist/slotui-css/alert.min.css

@@ -1 +1,96 @@
-:root{--alert-radius: var(--sld-radius-small);--alert-color-border: var(--sld-color-border);--alert-color-background: var(--sld-color-background);--alert-elevation: var(--sld-elevation-4);--alert-pad: var(--sld-pad-small);--alert-gap: var(--sld-gap-small)}dialog.alert{position:relative;min-width:350px;display:inline-block;border-radius:var(--alert-radius);border:1px solid var(--alert-color-border);background-color:var(--alert-color-background);box-shadow:var(--alert-elevation);overflow:hidden;padding:0}dialog.alert[open=true]{display:none}dialog.alert article.dialog-content{padding:var(--alert-pad);border-bottom:4px solid var(--alert-color-border)}dialog.alert article.dialog-content header.header-bar{display:flex;align-items:center;padding:var(--alert-pad-small);gap:var(--alert-gap-small, 1rem)}dialog.alert article.dialog-content header.header-bar .dot{display:inline-block;border:1px solid var(--alert-color-border);border-radius:var(--alert-radius);height:16px;width:4px;transform:translate(-50%, 0)}dialog.alert article.dialog-content header.header-bar .title{flex:1;display:flex;align-items:center}dialog.alert article.dialog-content header.header-bar [data-close]{border-radius:var(--alert-radius);margin:.25rem;padding:.25rem}dialog.alert article.dialog-content footer.dialog-footer{display:flex;justify-content:flex-end;padding:var(--alert-pad);border-top:1px solid var(--alert-color-border)}dialog.alert article.dialog-content footer.dialog-footer button{margin-left:1rem}.bg-themed-scheme-discrete{color:#000;text-shadow:0 0 .125rem #b3b3b3;background-color:#ccc}.bg-themed-scheme-success{color:#fff;text-shadow:0 0 .125rem #004d00;background-color:green}.bg-themed-scheme-info{color:#000;text-shadow:0 0 .125rem #ffd324;background-color:#ffdd57}.bg-themed-scheme-warning{color:#000;text-shadow:0 0 .125rem #b49104;background-color:#e6b905}.bg-themed-scheme-alert{color:#000;text-shadow:0 0 .125rem #cc5c00;background-color:#ff7300}.bg-themed-scheme-error{color:#fff;text-shadow:0 0 .125rem #c00;background-color:red}
+:root {
+  --alert-radius: var(--sld-radius-small);
+  --alert-color-border: var(--sld-color-border);
+  --alert-color-background: var(--sld-color-background);
+  --alert-elevation: var(--sld-elevation-4);
+  --alert-pad: var(--sld-pad-small);
+  --alert-gap: var(--sld-gap-small);
+}
+
+dialog.alert {
+  position: relative;
+  min-width: 350px;
+  display: inline-block;
+  border-radius: var(--alert-radius);
+  border: 1px solid var(--alert-color-border);
+  background-color: var(--alert-color-background);
+  box-shadow: var(--alert-elevation);
+  overflow: hidden;
+  padding: 0;
+}
+dialog.alert[open=true] {
+  display: none;
+}
+dialog.alert article.dialog-content {
+  padding: var(--alert-pad);
+  border-bottom: 4px solid var(--alert-color-border);
+}
+dialog.alert article.dialog-content header.header-bar {
+  display: flex;
+  align-items: center;
+  padding: var(--alert-pad-small);
+  gap: var(--alert-gap-small, 1rem);
+}
+dialog.alert article.dialog-content header.header-bar .dot {
+  display: inline-block;
+  border: 1px solid var(--alert-color-border);
+  border-radius: var(--alert-radius);
+  height: 16px;
+  width: 4px;
+  transform: translate(-50%, 0);
+}
+dialog.alert article.dialog-content header.header-bar .title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+dialog.alert article.dialog-content header.header-bar [data-close] {
+  border-radius: var(--alert-radius);
+  margin: 0.25rem;
+  padding: 0.25rem;
+}
+dialog.alert article.dialog-content footer.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--alert-pad);
+  border-top: 1px solid var(--alert-color-border);
+}
+dialog.alert article.dialog-content footer.dialog-footer button {
+  margin-left: 1rem;
+}
+
+.bg-themed-scheme-discrete {
+  color: black;
+  text-shadow: 0 0 0.125rem #b3b3b3;
+  background-color: #ccc;
+}
+
+.bg-themed-scheme-success {
+  color: white;
+  text-shadow: 0 0 0.125rem #004d00;
+  background-color: green;
+}
+
+.bg-themed-scheme-info {
+  color: black;
+  text-shadow: 0 0 0.125rem #ffd324;
+  background-color: #ffdd57;
+}
+
+.bg-themed-scheme-warning {
+  color: black;
+  text-shadow: 0 0 0.125rem #b49104;
+  background-color: #e6b905;
+}
+
+.bg-themed-scheme-alert {
+  color: black;
+  text-shadow: 0 0 0.125rem #cc5c00;
+  background-color: #ff7300;
+}
+
+.bg-themed-scheme-error {
+  color: white;
+  text-shadow: 0 0 0.125rem #cc0000;
+  background-color: red;
+}

package/dist/slotui-css/auto-complete.min.css

@@ -1 +1,12 @@
-:root{--auto-complete-pad: var(--sld-pad-medium);--auto-complete-gap: var(--sld-gap-small)}.auto-complete-no-results,.auto-complete-boot{padding:var(--auto-complete-pad);gap:var(--auto-complete-gap);display:flex;flex-direction:row;align-items:center}
+:root {
+  --auto-complete-pad: var(--sld-pad-medium);
+  --auto-complete-gap: var(--sld-gap-small);
+}
+
+.auto-complete-no-results, .auto-complete-boot {
+  padding: var(--auto-complete-pad);
+  gap: var(--auto-complete-gap);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

package/dist/slotui-css/avatar.min.css

@@ -1 +1,13 @@
-:root{--avatar-radius: var(--css-radius-small);--avatar-border-color: var(--sld-color-border)}.avatar{position:relative;border-radius:var(--avatar-radius);border:1px solid var(--avatar-border-color);display:grid;place-items:center;overflow:hidden}
+:root {
+  --avatar-radius: var(--css-radius-small);
+  --avatar-border-color: var(--sld-color-border);
+}
+
+.avatar {
+  position: relative;
+  border-radius: var(--avatar-radius);
+  border: 1px solid var(--avatar-border-color);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}

package/dist/slotui-css/backdrop.min.css

@@ -1 +1,32 @@
-:root{--backdrop-background-color: var(--sld-color-foreground-alpha-high)}.backdrop{z-index:10000;height:100%;width:100%;top:0;left:0}.backdrop-content{z-index:10001;position:absolute;height:100%;width:100%;background-color:var(--backdrop-background-color);backdrop-filter:blur(5px);--moz-backdrop-filter: blur(5px);display:flex;align-items:center;justify-content:center}.backdrop-content-loader{display:flex;justify-content:center;align-content:center;align-items:center}.backdrop-content-inner{display:inherit}
+:root {
+  --backdrop-background-color: var(--sld-color-foreground-alpha-high);
+}
+
+.backdrop {
+  z-index: 10000;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.backdrop-content {
+  z-index: 10001;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: var(--backdrop-background-color);
+  backdrop-filter: blur(5px);
+  --moz-backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.backdrop-content-loader {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+.backdrop-content-inner {
+  display: inherit;
+}

package/dist/slotui-css/badge.min.css

@@ -1 +1,16 @@
-:root{--badge-color-border: var(--sld-color-border)}.badge{position:absolute;border-radius:50%;border:1px solid var(--badge-color-border);display:grid;place-items:center;width:16px;height:16px}.badge .hidden{transform:scale(0, 0)}
+:root {
+  --badge-color-border: var(--sld-color-border);
+}
+
+.badge {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid var(--badge-color-border);
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+}
+.badge .hidden {
+  transform: scale(0, 0);
+}

package/dist/slotui-css/boot-menu.min.css

@@ -1 +1,77 @@
-:root{--boot-menu-background-color: rgba(90, 67, 52, 0.9);--boot-menu-backdrop-filter: blur(10px);--boot-menu-color: white;--boot-menu-max-height: 600px;--boot-menu-height: 80%;--boot-menu-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);--boot-menu-z-index: 3000;--boot-menu-margin-top: 1rem;--boot-menu-button-pole-border-radius: var(--sld-radius-small);--boot-menu-button-pole-border: 1px solid rgba(208, 191, 151, 0.3);--boot-menu-button-pole-padding: var(--sld-pad-tiny);--boot-menu-grid-icon-gap: 10px;--boot-menu-grid-icon-template-columns: repeat(auto-fill, minmax(30%, auto));--boot-menu-grid-icon-bis-template-columns: repeat(auto-fill, minmax(15%, auto));--boot-menu-grid-icon-mid-template-columns: repeat(auto-fill, minmax(49%, auto));--boot-menu-grid-one-template-columns: repeat(auto-fill, minmax(100%, auto));--boot-menu-bottom-bar-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);--boot-menu-bottom-bar-padding: var(--sld-pad-small) var(--sld-pad-medium)}.boot-menu{background-color:var(--boot-menu-background-color);backdrop-filter:var(--boot-menu-backdrop-filter);color:var(--boot-menu-color);display:flex;flex-direction:column;max-height:var(--boot-menu-max-height);height:var(--boot-menu-height);left:50%;transform:translate(-50%, 0);box-shadow:var(--boot-menu-box-shadow);overflow:hidden;z-index:var(--boot-menu-z-index);position:absolute;margin-top:var(--boot-menu-margin-top)}.boot-menu .boot-menuContent{flex:1;overflow-y:auto;overflow-x:hidden}.boot-menu .buttonPole{border-radius:var(--boot-menu-button-pole-border-radius);border:var(--boot-menu-button-pole-border);padding:var(--boot-menu-button-pole-padding)}.boot-menu .gridIcon{width:100%;display:grid;grid-gap:var(--boot-menu-grid-icon-gap);grid-template-columns:var(--boot-menu-grid-icon-template-columns)}.boot-menu .gridIconBis{width:100%;display:grid;grid-gap:var(--boot-menu-grid-icon-gap);grid-template-columns:var(--boot-menu-grid-icon-bis-template-columns)}.boot-menu .gridIconMid{width:100%;display:grid;grid-gap:var(--boot-menu-grid-icon-gap);grid-template-columns:var(--boot-menu-grid-icon-mid-template-columns)}.boot-menu .gridOne{width:100%;display:grid;grid-gap:var(--boot-menu-grid-icon-gap);grid-template-columns:var(--boot-menu-grid-one-template-columns)}.boot-menu .bottomBar{box-shadow:var(--boot-menu-bottom-bar-box-shadow);display:flex;align-items:end;padding:var(--boot-menu-bottom-bar-padding)}
+:root {
+  --boot-menu-background-color: rgba(90, 67, 52, 0.9);
+  --boot-menu-backdrop-filter: blur(10px);
+  --boot-menu-color: white;
+  --boot-menu-max-height: 600px;
+  --boot-menu-height: 80%;
+  --boot-menu-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+  --boot-menu-z-index: 3000;
+  --boot-menu-margin-top: 1rem;
+  --boot-menu-button-pole-border-radius: var(--sld-radius-small);
+  --boot-menu-button-pole-border: 1px solid rgba(208, 191, 151, 0.3);
+  --boot-menu-button-pole-padding: var(--sld-pad-tiny);
+  --boot-menu-grid-icon-gap: 10px;
+  --boot-menu-grid-icon-template-columns: repeat(auto-fill, minmax(30%, auto));
+  --boot-menu-grid-icon-bis-template-columns: repeat(auto-fill, minmax(15%, auto));
+  --boot-menu-grid-icon-mid-template-columns: repeat(auto-fill, minmax(49%, auto));
+  --boot-menu-grid-one-template-columns: repeat(auto-fill, minmax(100%, auto));
+  --boot-menu-bottom-bar-box-shadow: 0px 0px 3px 1px rgba(51, 51, 51, 0.5);
+  --boot-menu-bottom-bar-padding: var(--sld-pad-small) var(--sld-pad-medium);
+}
+
+.boot-menu {
+  background-color: var(--boot-menu-background-color);
+  backdrop-filter: var(--boot-menu-backdrop-filter);
+  color: var(--boot-menu-color);
+  display: flex;
+  flex-direction: column;
+  max-height: var(--boot-menu-max-height);
+  height: var(--boot-menu-height);
+  left: 50%;
+  transform: translate(-50%, 0);
+  box-shadow: var(--boot-menu-box-shadow);
+  overflow: hidden;
+  z-index: var(--boot-menu-z-index);
+  position: absolute;
+  margin-top: var(--boot-menu-margin-top);
+}
+.boot-menu .boot-menuContent {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.boot-menu .buttonPole {
+  border-radius: var(--boot-menu-button-pole-border-radius);
+  border: var(--boot-menu-button-pole-border);
+  padding: var(--boot-menu-button-pole-padding);
+}
+.boot-menu .gridIcon {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-icon-template-columns);
+}
+.boot-menu .gridIconBis {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-icon-bis-template-columns);
+}
+.boot-menu .gridIconMid {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-icon-mid-template-columns);
+}
+.boot-menu .gridOne {
+  width: 100%;
+  display: grid;
+  grid-gap: var(--boot-menu-grid-icon-gap);
+  grid-template-columns: var(--boot-menu-grid-one-template-columns);
+}
+.boot-menu .bottomBar {
+  box-shadow: var(--boot-menu-bottom-bar-box-shadow);
+  display: flex;
+  align-items: end;
+  padding: var(--boot-menu-bottom-bar-padding);
+}

package/dist/slotui-css/box.min.css

@@ -1 +1,29 @@
-:root{--box-color-background: var(--sld-color-background);--box-border-bottom: var(--sld-color-primary);--box-radius: var(--sld-radius-small);--box-elevation: var(--sld-elevation-3);--box-gap: var(--sld-gap-tiny);--box-pad: var(--sld-pad-small)}.box{min-height:160px;min-width:320px;background-color:var(--box-color-background);border-bottom:1px solid var(--box-border-bottom);border-radius:var(--box-radius);box-shadow:var(--box-elevation);display:flex;flex-direction:column}.box-content{flex:1}.box-button-zone{display:flex;gap:var(--box-gap);padding:var(--box-pad);text-align:right;justify-content:end}
+:root {
+  --box-color-background: var(--sld-color-background);
+  --box-border-bottom: var(--sld-color-primary);
+  --box-radius: var(--sld-radius-small);
+  --box-elevation: var(--sld-elevation-3);
+  --box-gap: var(--sld-gap-tiny);
+  --box-pad: var(--sld-pad-small);
+}
+
+.box {
+  min-height: 160px;
+  min-width: 320px;
+  background-color: var(--box-color-background);
+  border-bottom: 1px solid var(--box-border-bottom);
+  border-radius: var(--box-radius);
+  box-shadow: var(--box-elevation);
+  display: flex;
+  flex-direction: column;
+}
+.box-content {
+  flex: 1;
+}
+.box-button-zone {
+  display: flex;
+  gap: var(--box-gap);
+  padding: var(--box-pad);
+  text-align: right;
+  justify-content: end;
+}

package/dist/slotui-css/breadcrumb.min.css

@@ -1 +1,3 @@
-.breadCrumb ul{display:flex}
+.breadCrumb ul {
+  display: flex;
+}

package/dist/slotui-css/button-action.min.css

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

package/dist/slotui-css/button-menu.min.css

@@ -1 +1,31 @@
-.buttonActionRoot{display:inline-block;position:relative;width:64px}.buttonText{text-align:center}.button{display:block;width:64px}.button:hover{background-color:rgba(255,255,255,.3)}.action{position:absolute;display:block;top:0;bottom:0;right:0;background-color:rgba(255,255,255,.1);width:30%;padding:.5rem}.action:hover{background-color:rgba(255,255,255,.5)}
+.buttonActionRoot {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+}
+
+.buttonText {
+  text-align: center;
+}
+
+.button {
+  display: block;
+  width: 64px;
+}
+.button:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.action {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  width: 30%;
+  padding: 0.5rem;
+}
+.action:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}