@spaethtech/svelte-ui 0.15.1-dev.71.e357f8b → 0.15.1-dev.72.768dcbb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.15.1-dev.71.e357f8b",
+  "version": "0.15.1-dev.72.768dcbb",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"

package/dist/components/ButtonDropdown.svelte

@@ -1,145 +0,0 @@
-<!--
-/**
- * ButtonDropdown — a split-button compound built from Button + Menu.
- *
- * Same prop surface as Button (variant, size, icon, text, children,
- * disabled, onclick, …); when `items` is empty/absent it renders
- * identically to a single Button. With items, it splits into a primary
- * half (the consumer's button) and a secondary chevron half that opens
- * a Menu anchored to the chevron.
- *
- * Compound rule: nothing in this file builds primitives — it composes
- * Button + Menu. The split visual is enforced by overriding the two
- * halves' rounded corners + adjacent border via the {class} prop both
- * Buttons already accept; the outer wrapper carries the shape so a
- * consumer-applied shadow (e.g. `class="shadow-md"`) lands on the
- * combined silhouette rather than splitting at the seam between the
- * two halves.
- */
--->
-<script lang="ts">
-  import ChevronDown from "~icons/mdi/chevron-down";
-  import Button from "./Button.svelte";
-  import Menu from "./Menu.svelte";
-  import type { Variant } from "../types/variants.js";
-  import type { Size } from "../types/sizes.js";
-  import type { Responsive } from "../types/responsive.js";
-  import type { Snippet } from "svelte";
-  import type { MenuItem } from "../data/table/types.js";
-
-  // Mirrors Button's button-flavour Props (the anchor-flavour `href` is
-  // intentionally not on offer here — a split-button's two halves can't
-  // both be a single navigation target). Adds `items`.
-  interface Props {
-    /** Icon slot for the primary half — same contract as Button.icon. */
-    icon?: Snippet;
-    text?: string;
-    variant?: Variant;
-    size?: Responsive<Size>;
-    children?: Snippet;
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-    title?: string;
-    /** Append-extra classes — applied to the OUTER wrapper so consumer
-     *  styling (margin, shadow, alignment) targets the combined shape
-     *  rather than just one half. */
-    class?: string;
-    onclick?: (event: MouseEvent) => void;
-    /** Menu items shown when the chevron is clicked. Empty / absent →
-     *  the component degrades gracefully to a plain Button. */
-    items?: MenuItem[];
-    /** Menu placement passed through to `<Menu>`. Defaults match the
-     *  ActionBar split-button convention: opens below, right-aligned. */
-    menuSide?: "top" | "bottom" | "left" | "right";
-    menuAlign?: "start" | "center" | "end";
-  }
-
-  let {
-    icon,
-    text,
-    variant = "secondary",
-    size = "md",
-    children,
-    disabled = false,
-    type = "button",
-    title,
-    class: additionalClass = "",
-    onclick,
-    items,
-    menuSide = "bottom",
-    menuAlign = "end",
-  }: Props = $props();
-
-  // No items → degrade to a plain Button with the exact same prop
-  // surface. Keeps `<ButtonDropdown {variant} {size} text="…" />`
-  // usable as a drop-in for sites that may or may not declare items
-  // dynamically.
-  const hasItems = $derived(!!items && items.length > 0);
-
-  // Chevron-half state. `chevronEl` is what Menu anchors against; the
-  // element gets bound through Button's existing `bind:element` prop so
-  // we never poke at the DOM ourselves.
-  let menuOpen = $state(false);
-  let chevronEl = $state<HTMLButtonElement | HTMLAnchorElement | undefined>(undefined);
-
-  // Class overrides applied via Button's {class} pass-through. The
-  // outer wrapper is `inline-flex` and the two halves abut; we strip
-  // the inner corners + the primary's right border so the seam reads
-  // as a single divider rather than two stacked borders.
-  const primaryHalfClass = "rounded-r-none border-r-0";
-  const secondaryHalfClass = "rounded-l-none px-2";
-</script>
-
-{#if hasItems}
-  <span class="inline-flex {additionalClass}">
-    <Button
-      {icon}
-      {text}
-      {children}
-      {variant}
-      {size}
-      {disabled}
-      {type}
-      {title}
-      {onclick}
-      class={primaryHalfClass}
-    />
-    <Button
-      {variant}
-      {size}
-      {disabled}
-      type="button"
-      title="More actions"
-      aria-haspopup="menu"
-      aria-expanded={menuOpen}
-      onclick={() => (menuOpen = !menuOpen)}
-      bind:element={chevronEl}
-      class={secondaryHalfClass}
-      icon={chevronIcon}
-    />
-  </span>
-  <Menu
-    anchor={chevronEl as HTMLElement | undefined}
-    bind:open={menuOpen}
-    items={items!}
-    side={menuSide}
-    align={menuAlign}
-  />
-{:else}
-  <Button
-    {icon}
-    {text}
-    {children}
-    {variant}
-    {size}
-    {disabled}
-    {type}
-    {title}
-    {onclick}
-    class={additionalClass}
-  />
-{/if}
-
-{#snippet chevronIcon()}
-  <ChevronDown />
-{/snippet}

package/dist/components/ButtonDropdown.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { Variant } from "../types/variants.js";
-import type { Size } from "../types/sizes.js";
-import type { Responsive } from "../types/responsive.js";
-import type { Snippet } from "svelte";
-import type { MenuItem } from "../data/table/types.js";
-interface Props {
-    /** Icon slot for the primary half — same contract as Button.icon. */
-    icon?: Snippet;
-    text?: string;
-    variant?: Variant;
-    size?: Responsive<Size>;
-    children?: Snippet;
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-    title?: string;
-    /** Append-extra classes — applied to the OUTER wrapper so consumer
-     *  styling (margin, shadow, alignment) targets the combined shape
-     *  rather than just one half. */
-    class?: string;
-    onclick?: (event: MouseEvent) => void;
-    /** Menu items shown when the chevron is clicked. Empty / absent →
-     *  the component degrades gracefully to a plain Button. */
-    items?: MenuItem[];
-    /** Menu placement passed through to `<Menu>`. Defaults match the
-     *  ActionBar split-button convention: opens below, right-aligned. */
-    menuSide?: "top" | "bottom" | "left" | "right";
-    menuAlign?: "start" | "center" | "end";
-}
-declare const ButtonDropdown: import("svelte").Component<Props, {}, "">;
-type ButtonDropdown = ReturnType<typeof ButtonDropdown>;
-export default ButtonDropdown;