@intechstudio/grid-uikit 1.20260714.912 → 1.20260805.1241

package/dist/InfoBox.svelte

@@ -14,7 +14,7 @@
     padding: 0.25rem;
     margin-top: auto;
     margin-bottom: auto;
-    border-radius: 0.25rem;
+    border-radius: var(--radius);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

package/dist/LogMessage.svelte

@@ -53,7 +53,7 @@
     display: flex;
     align-items: center;
     width: 30rem;
-    border: none;
+    border: solid 1px var(--border);
     background: none;
     cursor: pointer;
   }

package/dist/MeltCheckbox.svelte

@@ -11,7 +11,6 @@
 
   const {
     elements: { root, input },
-    helpers: { isChecked, isIndeterminate },
     states: { checked },
   } = createCheckbox({
     defaultChecked: target,
@@ -42,6 +41,7 @@
   <button
     {...$root}
     use:root
+    class="checkbox-button"
     class:disabled
     on:keydown={(e) => {
       if (e.key === "Enter") {
@@ -58,18 +58,12 @@
       />
     </div>
 
+    {#if title}
+      <span class:disabled>{title}</span>
+    {/if}
+
     <input {...$input} use:input />
   </button>
-
-  {#if title}
-    <div
-      class:checkbox-title-selected={target}
-      class="checkbox-title"
-      class:disabled
-    >
-      {title}
-    </div>
-  {/if}
 </label>
 
 <style>
@@ -77,7 +71,8 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: 0.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
   }
 
   label.disabled {
@@ -90,10 +85,11 @@
   }
 
   .checkbox-outer {
+    position: relative;
     width: 1.5em;
     height: 1.5em;
-    border-radius: 0.25em;
-    margin: auto;
+    border-radius: var(--radius);
+    margin-right: 0.75em;
     border: 1px solid var(--foreground);
     display: flex;
     align-items: center;
@@ -105,32 +101,38 @@
   }
 
   .checkbox-inner {
+    position: absolute;
     width: 0.75em;
     height: 0.75em;
     background-color: var(--foreground);
-    border-radius: 0.125em;
+    border-radius: var(--radius);
   }
 
   .checkbox-inner.disabled {
     background-color: var(--foreground-disabled);
   }
 
-  .checkbox-title {
-    padding-left: 0.5em;
-    color: var(--foreground-muted);
-  }
-
-  .checkbox-title.disabled {
-    color: var(--foreground-disabled);
-  }
-
   button {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
     margin: 0; /* 2 */
     padding: 0; /* 3 */
     background-color: transparent; /* 2 */
     cursor: pointer;
-    font-size: inherit;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  button.checkbox-button {
+    color: var(--foreground-muted);
   }
+
   button:focus {
     outline: var(--focus-outline);
     outline-offset: var(--focus-offset);
@@ -139,4 +141,8 @@
   button.disabled {
     cursor: default;
   }
+
+  span.disabled {
+    color: var(--foreground-disabled);
+  }
 </style>

package/dist/MeltRadio.svelte

@@ -122,7 +122,7 @@
     overflow: visible;
     display: grid;
     grid-auto-flow: column;
-    padding: 0.5em 0;
+    padding: 0em 0;
   }
   div.container-full {
     width: 100%;
@@ -195,7 +195,7 @@
     position: relative;
     padding: 0.25em 0.5em;
     width: 100%;
-    border-radius: 0.25em;
+    border-radius: var(--radius);
     border: 1px solid var(--background-soft);
     justify-content: center;
   }

package/dist/MeltSlider.svelte

@@ -88,19 +88,16 @@
     width: 100%;
     background-color: var(--background-muted);
     border: 1px solid var(--background-soft);
-    border-radius: 9999px;
     height: 8px;
   }
   span.range-selected {
     height: 8px;
     background-color: var(--foreground-disabled);
-    border-radius: 9999px;
   }
   span.thumb {
     display: block;
     height: var(--thumb-size);
-    width: var(--thumb-size);
-    border-radius: 9999px;
+    width: calc(var(--thumb-size) / 2);
     background-color: var(--foreground-muted);
   }
   span.thumb:focus {

package/dist/MoltenPushButton.svelte

@@ -3,10 +3,9 @@
 
   export let text: string = "";
   export let style: "normal" | "outlined" | "accept" = "normal";
+  export let snap: "auto" | "full" | "wide" = "auto";
   export let disabled: boolean = false;
   export let popup: { duration?: number } | undefined = undefined;
-  export let ratio = "normal";
-  export let snap = "auto";
   export let click: (...args: any) => void;
   export let options: any = undefined;
   export let target: any = undefined;
@@ -67,10 +66,9 @@
     }}
     {disabled}
     class="main style-{style}"
-    class:px-4={ratio === "normal"}
-    class:px-1={ratio === "box"}
     class:w-full={snap === "full"}
     class:w-fit={snap === "auto"}
+    class:w-wide={snap === "wide"}
     class:grouped
   >
     <span>{text}</span>
@@ -105,11 +103,11 @@
 
   button {
     cursor: pointer;
-    border-radius: 0.25rem;
+    border-radius: var(--radius);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding: 0.25rem;
+    padding: 0.5rem;
 
     font-family: inherit;
     font-feature-settings: inherit;
@@ -132,16 +130,16 @@
     width: 100%;
   }
 
+  button.w-wide {
+    width: 10em;
+    height: 3em;
+  }
+
   button.w-fit {
     width: -moz-fit-content;
     width: fit-content;
   }
 
-  button.px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
   button:focus {
     outline: var(--focus-outline);
     outline-offset: var(--focus-offset);
@@ -157,24 +155,24 @@
   }
 
   button.style-normal {
-    color: var(--foreground-muted);
+    color: var(--foreground);
     background-color: var(--background-muted);
-    border: 1px solid var(--background-soft);
+    border: 1px solid var(--foreground-soft);
   }
 
   button.style-normal:hover {
-    background-color: var(--background-soft);
+    background-color: var(--background);
   }
 
   button.style-normal:disabled {
     color: var(--foreground-disabled);
     background-color: var(--background-soft);
-    border: 1px solid var(--background-soft);
+    border: var(--border-thickness) solid var(--background-soft);
   }
 
   button.style-outlined {
     background-color: var(--background-muted);
-    border: 1px solid var(--accent);
+    border: var(--border-thickness) solid var(--accent);
     color: var(--foreground-muted);
   }
 
@@ -186,16 +184,17 @@
   button.style-outlined:disabled {
     background-color: var(--background-muted);
     color: var(--foreground-disabled);
-    border: 1px solid var(--accent-soft);
+    border: var(--border-thickness) solid var(--accent-soft);
   }
 
   button.style-accept {
     color: var(--foreground);
-    background-color: var(--accent);
+    background-color: var(--accent-soft);
+    border: var(--border-thickness) solid var(--accent-muted);
   }
 
   button.style-accept:hover {
-    background-color: var(--accent-soft);
+    background-color: var(--accent);
   }
 
   button.style-accept:disabled {

package/dist/MoltenPushButton.svelte.d.ts

@@ -14,12 +14,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const MoltenPushButton: $$__sveltets_2_IsomorphicComponent<{
     text?: string;
     style?: "normal" | "outlined" | "accept";
+    snap?: "auto" | "full" | "wide";
     disabled?: boolean;
     popup?: {
         duration?: number;
     } | undefined;
-    ratio?: string;
-    snap?: string;
     click: (...args: any) => void;
     options?: any;
     target?: any;

package/dist/MoltenTooltip.svelte

@@ -312,14 +312,14 @@
   </Popover>
 {/key}
 
-<style global>
+<style>
   div.tooltip-container {
     background-color: var(--popover-background);
     cursor: default;
     display: flex;
     flex-direction: column;
     position: relative;
-    border-radius: 0.375rem;
+    border-radius: 0em;
     z-index: 99;
     padding: 0.25rem;
     outline: 1px dashed transparent;

package/dist/SvgIcon.svelte

@@ -2,14 +2,23 @@
   import iconMap from "./icons";
 
   export let iconPath: string = "";
-  export let width: number = 15;
-  export let height: number = 15;
+  export let width: number = 1.2;
+  export let height: number = 1.2;
   export let fill: string | undefined = undefined;
+  export let iconData: string | undefined = undefined;
+  export let scale: number = 1;
 </script>
 
-<svg style:fill style:width={`${width}px`} style:height={`${height}px`}>
+<svg
+  style:fill
+  style:width={`${width}em`}
+  style:height={`${height}em`}
+  style:transform={`scale(${scale})`}
+>
   <g>
-    {#if iconMap[iconPath]}
+    {#if iconData}
+      {@html iconData}
+    {:else if iconMap[iconPath]}
       {@html iconMap[iconPath]}
     {:else}
       <text x="10" y="20">Icon not found: {iconPath}</text>

package/dist/SvgIcon.svelte.d.ts

@@ -16,6 +16,8 @@ declare const SvgIcon: $$__sveltets_2_IsomorphicComponent<{
     width?: number;
     height?: number;
     fill?: string | undefined;
+    iconData?: string | undefined;
+    scale?: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Toggle.svelte

@@ -13,12 +13,7 @@
   }
 </script>
 
-<div class="toggle-container">
-  {#if title}
-    <span class="toggle-label">
-      {title}
-    </span>
-  {/if}
+<label class="toggle-container" class:disabled>
   <input
     data-testid={testid}
     type="checkbox"
@@ -34,16 +29,31 @@
       }
     }}
   />
-</div>
+  {#if title}
+    <span class="toggle-label" class:disabled>
+      {title}
+    </span>
+  {/if}
+</label>
 
 <style>
   .toggle-container {
     display: flex;
     align-items: center;
+    cursor: pointer;
+    color: var(--foreground-muted);
+  }
+
+  .toggle-container.disabled {
+    cursor: default;
   }
 
   .toggle-label {
-    margin-right: 0.5em;
+    margin-left: 0.75em;
+  }
+
+  .toggle-label.disabled {
+    color: var(--foreground-disabled);
   }
 
   input[type="checkbox"] {
@@ -61,9 +71,9 @@
   }
 
   .toggle {
-    --toggle-height: 1.75em;
+    --toggle-height: 1.5em;
     --toggle-padding: 0.25em;
-    --toggle-border: 0.0625em; /* 1px at 16px base = 0.0625em */
+    --toggle-border: 1px;
     --toggle-knob-size: calc(
       var(--toggle-height) - 2 * var(--toggle-padding) - 2 *
         var(--toggle-border)
@@ -76,13 +86,13 @@
 
     height: var(--toggle-height);
     width: var(--toggle-width);
-    border-radius: calc(var(--toggle-height) / 2);
+    border-radius: var(--radius);
     display: inline-block;
     position: relative;
     margin: 0;
-    border: var(--toggle-border) solid var(--background-soft);
+    border: var(--toggle-border) solid var(--border);
     background-color: var(--background-muted);
-    transition: border-color 0.2s ease;
+    transition: background-color 0.2s ease;
     pointer-events: auto;
     box-sizing: border-box;
   }
@@ -94,7 +104,7 @@
     left: var(--toggle-padding);
     width: var(--toggle-knob-size);
     height: var(--toggle-knob-size);
-    border-radius: 50%;
+    border-radius: var(--radius);
     background-color: var(--foreground-muted);
     transition:
       transform 0.15s ease-out,
@@ -102,11 +112,12 @@
   }
 
   .toggle:checked {
-    border-color: var(--accent);
+    background-color: var(--accent-soft);
   }
 
   .toggle:checked::after {
     transform: translateX(var(--toggle-translate));
+    background-color: var(--foreground-muted);
   }
 
   .toggle:disabled {
@@ -118,6 +129,6 @@
   }
 
   .toggle:checked:disabled {
-    border-color: var(--accent-soft);
+    background-color: var(--background-muted);
   }
 </style>

package/dist/index.d.ts

@@ -10,7 +10,6 @@ export { default as MeltSelect } from "./MeltSelect.svelte";
 export { default as MoltenInput } from "./MoltenInput.svelte";
 export { default as MoltenTooltip } from "./MoltenTooltip.svelte";
 export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
-export { default as MoltenPushButtonDropdown } from "./MoltenPushButtonDropdown.svelte";
 export { default as MoltenPushButtonGroup } from "./MoltenPushButtonGroup.svelte";
 export { contextMenu, contextTarget, type ContextMenuOptions, } from "./context-target";
 export { default as SvgIcon } from "./SvgIcon.svelte";

package/dist/index.js

@@ -10,7 +10,6 @@ export { default as MeltSelect } from "./MeltSelect.svelte";
 export { default as MoltenInput } from "./MoltenInput.svelte";
 export { default as MoltenTooltip } from "./MoltenTooltip.svelte";
 export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
-export { default as MoltenPushButtonDropdown } from "./MoltenPushButtonDropdown.svelte";
 export { default as MoltenPushButtonGroup } from "./MoltenPushButtonGroup.svelte";
 export { contextMenu, contextTarget, } from "./context-target";
 export { default as SvgIcon } from "./SvgIcon.svelte";

package/dist/theme.css

@@ -1,6 +1,6 @@
 :root {
-  --foreground: #fff;
-  --background: #1e2628;
+  --foreground: #e3e3e3;
+  --background: #1f1f1f;
   --shadow: #000;
 
   --foreground-muted: color-mix(
@@ -22,15 +22,16 @@
   --background-muted: color-mix(in srgb, var(--background), var(--shadow) 20%);
   --background-soft: color-mix(in srgb, var(--background), var(--shadow) 50%);
 
+  --border: #6a6a6a;
   --accent: #0ba484;
   --accent-muted: color-mix(in srgb, var(--accent), var(--shadow) 30%);
   --accent-soft: color-mix(in srgb, var(--accent), var(--shadow) 50%);
 
-  --focus: #0000ff;
+  --focus: #ffffff6a;
   --focus-outline: 1px solid var(--focus);
   --focus-offset: 1px;
 
-  --error: #dc2626;
+  --error: #ff0000;
 
   --popover-background: color-mix(
     in srgb,
@@ -40,17 +41,75 @@
 
   --popover-selection: var(--background-muted);
   --popover-reference: var(--background-soft);
+
+  --radius: 0em;
+  --border-thickness: 1px;
 }
 
-html[color-scheme="light"] {
-  --foreground: #000;
-  --background: #e0e0e0;
+html[color-scheme="moss"] {
+  --foreground: #24352c;
+  --background: #e1ebdf;
+  --shadow: #8ca08d;
+
+  --border: #6e8473;
+  --accent: #16735f;
+  --focus: #16735f80;
+  --error: #af4355;
+
+  --foreground-disabled: #5c715f;
+  --background-soft: #b7c9b5;
+
   --popover-background: color-mix(
     in srgb,
     var(--background),
     rgba(255, 255, 255, 1) 70%
   );
-  --shadow: #787878;
+
+  --popover-selection: var(--background-soft);
+  --popover-reference: var(--background-muted);
+}
+
+html[color-scheme="sunset"] {
+  --foreground: #30194d;
+  --background: #fffaf2;
+  --shadow: #76519a;
+
+  --border: #69458b;
+  --accent: #e76f2d;
+  --focus: #69458b80;
+  --error: #bd3b4c;
+
+  --foreground-disabled: #c7bcd2;
+  --background-soft: #d2cac0;
+
+  --popover-background: color-mix(
+    in srgb,
+    var(--background),
+    rgba(255, 255, 255, 1) 78%
+  );
+
+  --popover-selection: var(--background-soft);
+  --popover-reference: var(--background-muted);
+}
+
+html[color-scheme="icy"] {
+  --foreground: #000000;
+  --background: #ffffff;
+  --shadow: #3d5899;
+
+  --border: #5d8d9b;
+  --accent: #087ea4;
+  --focus: #087ea480;
+  --error: #b74c61;
+
+  --foreground-disabled: #818282;
+  --background-soft: #d1f6fe;
+
+  --popover-background: color-mix(
+    in srgb,
+    var(--background),
+    rgba(255, 255, 255, 1) 82%
+  );
 
   --popover-selection: var(--background-soft);
   --popover-reference: var(--background-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20260714.912",
+  "version": "1.20260805.1241",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"

package/src/lib/theme.css

@@ -1,6 +1,6 @@
 :root {
-  --foreground: #fff;
-  --background: #1e2628;
+  --foreground: #e3e3e3;
+  --background: #1f1f1f;
   --shadow: #000;
 
   --foreground-muted: color-mix(
@@ -22,15 +22,16 @@
   --background-muted: color-mix(in srgb, var(--background), var(--shadow) 20%);
   --background-soft: color-mix(in srgb, var(--background), var(--shadow) 50%);
 
+  --border: #6a6a6a;
   --accent: #0ba484;
   --accent-muted: color-mix(in srgb, var(--accent), var(--shadow) 30%);
   --accent-soft: color-mix(in srgb, var(--accent), var(--shadow) 50%);
 
-  --focus: #0000ff;
+  --focus: #ffffff6a;
   --focus-outline: 1px solid var(--focus);
   --focus-offset: 1px;
 
-  --error: #dc2626;
+  --error: #ff0000;
 
   --popover-background: color-mix(
     in srgb,
@@ -40,17 +41,75 @@
 
   --popover-selection: var(--background-muted);
   --popover-reference: var(--background-soft);
+
+  --radius: 0em;
+  --border-thickness: 1px;
 }
 
-html[color-scheme="light"] {
-  --foreground: #000;
-  --background: #e0e0e0;
+html[color-scheme="moss"] {
+  --foreground: #24352c;
+  --background: #e1ebdf;
+  --shadow: #8ca08d;
+
+  --border: #6e8473;
+  --accent: #16735f;
+  --focus: #16735f80;
+  --error: #af4355;
+
+  --foreground-disabled: #5c715f;
+  --background-soft: #b7c9b5;
+
   --popover-background: color-mix(
     in srgb,
     var(--background),
     rgba(255, 255, 255, 1) 70%
   );
-  --shadow: #787878;
+
+  --popover-selection: var(--background-soft);
+  --popover-reference: var(--background-muted);
+}
+
+html[color-scheme="sunset"] {
+  --foreground: #30194d;
+  --background: #fffaf2;
+  --shadow: #76519a;
+
+  --border: #69458b;
+  --accent: #e76f2d;
+  --focus: #69458b80;
+  --error: #bd3b4c;
+
+  --foreground-disabled: #c7bcd2;
+  --background-soft: #d2cac0;
+
+  --popover-background: color-mix(
+    in srgb,
+    var(--background),
+    rgba(255, 255, 255, 1) 78%
+  );
+
+  --popover-selection: var(--background-soft);
+  --popover-reference: var(--background-muted);
+}
+
+html[color-scheme="icy"] {
+  --foreground: #000000;
+  --background: #ffffff;
+  --shadow: #3d5899;
+
+  --border: #5d8d9b;
+  --accent: #087ea4;
+  --focus: #087ea480;
+  --error: #b74c61;
+
+  --foreground-disabled: #818282;
+  --background-soft: #d1f6fe;
+
+  --popover-background: color-mix(
+    in srgb,
+    var(--background),
+    rgba(255, 255, 255, 1) 82%
+  );
 
   --popover-selection: var(--background-soft);
   --popover-reference: var(--background-muted);

package/dist/MoltenPushButtonDropdown.svelte

@@ -1,244 +0,0 @@
-<script lang="ts">
-  import { tick } from "svelte";
-
-  export let options;
-  export let style: "normal" | "outlined" | "accept" = "normal";
-  export let disabled: boolean = false;
-  export let target: any;
-  export let menuWidth: number = 0;
-  export let width = 0;
-
-  import { writable } from "svelte/store";
-  import { createSelect, melt } from "@melt-ui/svelte";
-
-  let windowWidth = 0;
-
-  async function updateWidth() {
-    if (element) {
-      await tick();
-      requestAnimationFrame(() => {
-        if (element) {
-          width = element.offsetWidth;
-        }
-      });
-    }
-  }
-
-  $: (element, windowWidth, updateWidth());
-
-  const customOpen = writable(false);
-
-  function getDefaultSelected() {
-    if (typeof options === "undefined") {
-      return;
-    }
-
-    const obj = options.find((e) => e.value === target);
-    return { label: obj?.title, value: obj?.value };
-  }
-
-  const {
-    elements: { trigger, menu, option },
-    states: { selected, selectedLabel, open },
-    helpers: { isSelected },
-  } = createSelect({
-    open: customOpen,
-    disabled: disabled,
-    forceVisible: true,
-    positioning: {
-      placement: "bottom-start",
-      fitViewport: true,
-    },
-    defaultSelected: getDefaultSelected(),
-  });
-
-  $: if ($selected) {
-    handleSelectionChange();
-  }
-
-  $: if (target) {
-    handleTargetChange();
-  }
-
-  function handleTargetChange() {
-    if ($selected.value === target) {
-      return;
-    }
-
-    const obj = options.find((e) => e.value === target);
-    selected.set({ label: obj?.title, value: obj?.value });
-  }
-
-  function handleSelectionChange() {
-    if ($selected.value === target) {
-      return;
-    }
-    target = $selected.value;
-  }
-
-  let element: HTMLButtonElement;
-
-  export function focus() {
-    element?.focus();
-  }
-</script>
-
-<svelte:window bind:innerWidth={windowWidth} />
-
-<div
-  class="dropdown-container"
-  style={menuWidth > 0 ? `margin-left: -${menuWidth}px;` : ""}
->
-  <div {...$trigger} use:trigger style="display: inline-flex;">
-    <button
-      bind:this={element}
-      on:click={(e) => {
-        e.stopPropagation();
-        $customOpen = !$customOpen;
-      }}
-      {disabled}
-      class="dropdown-button style-{style}"
-      class:grouped={menuWidth > 0}
-      style={menuWidth > 0 ? `padding-left: ${menuWidth}px;` : ""}
-    >
-      &#9660;
-    </button>
-
-    {#if $open}
-      <div
-        {...$menu}
-        use:menu
-        class="menu"
-        style={`min-width: ${menuWidth > 0 ? menuWidth : width}px;`}
-      >
-        {#each options as item}
-          <div
-            {...$option({ value: item.value, label: item.title })}
-            use:option
-            class="option"
-            class:option-selected={$isSelected(item.value)}
-          >
-            {item.title}
-          </div>
-        {/each}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .dropdown-container {
-    position: relative;
-    display: inline-flex;
-  }
-
-  .menu {
-    background-color: var(--popover-background);
-    color: var(--foreground-muted);
-    border: 1px solid var(--foreground-muted);
-    border-radius: 0.25rem;
-    z-index: 40;
-  }
-
-  div.option {
-    cursor: pointer;
-    padding: 0.5rem;
-  }
-
-  div.option:hover {
-    background-color: var(--popover-selection);
-    color: var(--foreground);
-  }
-
-  div.option-selected {
-    background-color: var(--popover-reference);
-  }
-
-  .dropdown-button {
-    cursor: pointer;
-    border-radius: 0.25rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 0.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.5rem;
-
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    margin: 0;
-    text-transform: none;
-    background-color: transparent;
-    border: 1px solid transparent;
-  }
-
-  .dropdown-button:disabled {
-    cursor: default;
-  }
-
-  .dropdown-button:focus {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-offset);
-  }
-
-  .dropdown-button.grouped {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  /* Style variants */
-  .dropdown-button.style-normal {
-    color: var(--foreground-muted);
-    background-color: var(--background-muted);
-    border: 1px solid var(--background-soft);
-  }
-
-  .dropdown-button.style-normal:hover {
-    background-color: var(--background-soft);
-  }
-
-  .dropdown-button.style-normal:disabled {
-    color: var(--foreground-disabled);
-    background-color: var(--background-soft);
-    border: 1px solid var(--background-soft);
-  }
-
-  .dropdown-button.style-outlined {
-    background-color: var(--background-muted);
-    border: 1px solid var(--accent);
-    color: var(--foreground-muted);
-  }
-
-  .dropdown-button.style-outlined:hover {
-    background-color: var(--accent-soft);
-    border-color: var(--accent-muted);
-  }
-
-  .dropdown-button.style-outlined:disabled {
-    background-color: var(--background-muted);
-    color: var(--foreground-disabled);
-    border: 1px solid var(--accent);
-  }
-
-  .dropdown-button.style-accept {
-    color: var(--foreground);
-    background-color: var(--accent);
-  }
-
-  .dropdown-button.style-accept:hover {
-    background-color: var(--accent-soft);
-  }
-
-  .dropdown-button.style-accept:disabled {
-    color: var(--foreground-disabled);
-    background-color: var(--accent-soft);
-  }
-</style>

package/dist/MoltenPushButtonDropdown.svelte.d.ts

@@ -1,28 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MoltenPushButtonDropdown: $$__sveltets_2_IsomorphicComponent<{
-    options: any;
-    style?: "normal" | "outlined" | "accept";
-    disabled?: boolean;
-    target: any;
-    menuWidth?: number;
-    width?: number;
-    focus?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    focus: () => void;
-}, string>;
-type MoltenPushButtonDropdown = InstanceType<typeof MoltenPushButtonDropdown>;
-export default MoltenPushButtonDropdown;