@mcp-b/web-components 0.2.0

package/dist/button-5k_aL_gD.js

@@ -0,0 +1,802 @@
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./spinner-C04Dmc0H.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html as html$1, literal } from "lit/static-html.js";
+import { SigveloBlurEvent, SigveloFocusEvent } from "@mcp-b/wc-support/events/form";
+import { LongPress } from "@mcp-b/wc-support/utilities/long-press";
+//#region src/components/button/button.styles.ts
+var button_styles_default = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    width: auto;
+    cursor: pointer;
+  }
+
+  #button {
+    display: inline-flex;
+    appearance: none;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: 0.4em;
+    border: none;
+    border-radius: var(--sigvelo-radius-md);
+    background: none;
+    font: inherit;
+    font-weight: var(--sigvelo-font-weight-semibold);
+    text-decoration: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    cursor: inherit;
+    touch-action: manipulation;
+    transition:
+      var(--sigvelo-motion-duration-interaction) color ease,
+      var(--sigvelo-motion-duration-interaction) border-color ease,
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) translate ease;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &:active:not(.disabled) {
+      translate: 0 var(--sigvelo-motion-distance-xs);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    /* Sizes */
+    &.xs {
+      min-height: var(--sigvelo-control-height-xs);
+      padding-inline: 0.85em;
+      font-size: var(--sigvelo-control-text-xs);
+    }
+
+    &.sm {
+      min-height: var(--sigvelo-control-height-sm);
+      padding-inline: 1em;
+      font-size: var(--sigvelo-control-text-sm);
+    }
+
+    &.md {
+      min-height: var(--sigvelo-control-height-md);
+      padding-inline: 1.25em;
+      font-size: var(--sigvelo-control-text-md);
+    }
+
+    &.lg {
+      min-height: var(--sigvelo-control-height-lg);
+      padding-inline: 1.33em;
+      font-size: var(--sigvelo-control-text-lg);
+    }
+
+    &.xl {
+      min-height: var(--sigvelo-control-height-xl);
+      padding-inline: 1.5em;
+      font-size: var(--sigvelo-control-text-xl);
+    }
+
+    /* Normal buttons */
+    &.normal {
+      /* Neutral */
+      &.neutral {
+        background-color: var(--sigvelo-color-neutral-bg-subtle);
+        color: var(--sigvelo-color-neutral-text-on-subtle);
+
+        @media (hover: hover) {
+          &:hover:not(.disabled, [aria-pressed="true"]) {
+            background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), black 5%);
+          }
+        }
+
+        &[aria-pressed="true"] {
+          background-color: color-mix(
+            in oklab,
+            var(--sigvelo-color-neutral-bg-subtle),
+            light-dark(black, white) 7.5%
+          );
+        }
+      }
+
+      /* Primary */
+      &.primary {
+        background-color: var(--sigvelo-color-primary-bg);
+        color: var(--sigvelo-color-primary-text-on-bg);
+
+        @media (hover: hover) {
+          &:hover:not(.disabled, [aria-pressed="true"]) {
+            background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+          }
+        }
+
+        &[aria-pressed="true"] {
+          background-color: color-mix(
+            in oklab,
+            var(--sigvelo-color-primary-bg),
+            light-dark(black, white) 7.5%
+          );
+        }
+      }
+
+      /* Destructive */
+      &.destructive {
+        background-color: var(--sigvelo-color-danger-bg);
+        color: var(--sigvelo-color-danger-text-on-bg);
+
+        @media (hover: hover) {
+          &:hover:not(.disabled, [aria-pressed="true"]) {
+            background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), black 5%);
+          }
+        }
+
+        &[aria-pressed="true"] {
+          background-color: color-mix(
+            in oklab,
+            var(--sigvelo-color-danger-bg),
+            light-dark(black, white) 7.5%
+          );
+        }
+      }
+    }
+
+    /* Outline buttons */
+    &.outline.neutral {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-neutral-bg);
+      background: transparent;
+      color: var(--sigvelo-color-neutral-text);
+
+      @media (hover: hover) {
+        &:hover:not(.disabled, [aria-pressed="true"]) {
+          background: color-mix(in oklab, transparent, var(--sigvelo-color-neutral-bg) 7.5%);
+        }
+      }
+    }
+
+    &.outline.primary {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-primary-bg);
+      background: transparent;
+      color: var(--sigvelo-color-primary-text);
+
+      @media (hover: hover) {
+        &:hover:not(.disabled, [aria-pressed="true"]) {
+          background: color-mix(in oklab, transparent, var(--sigvelo-color-primary-bg) 7.5%);
+        }
+      }
+    }
+
+    &.outline.destructive {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-danger-bg);
+      background: transparent;
+      color: var(--sigvelo-color-danger-text);
+
+      @media (hover: hover) {
+        &:hover:not(.disabled, [aria-pressed="true"]) {
+          background: color-mix(in oklab, transparent, var(--sigvelo-color-danger-bg) 7.5%);
+        }
+      }
+    }
+
+    /* Ghost buttons */
+    &.ghost {
+      background: none;
+      color: var(--sigvelo-color-neutral-text-on-subtle);
+
+      @media (hover: hover) {
+        &:hover:not(.disabled, [aria-pressed="true"]) {
+          background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+        }
+      }
+
+      &[aria-pressed="true"] {
+        background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+      }
+    }
+
+    /* Raised surface buttons */
+    &.surface {
+      background-color: var(--sigvelo-color-surface-raised);
+      color: var(--sigvelo-color-text);
+      box-shadow: var(--sigvelo-elevation-raised);
+
+      @media (hover: hover) {
+        &:hover:not(.disabled, :active) {
+          background-color: var(--sigvelo-color-neutral-bg-subtle);
+        }
+      }
+    }
+
+    /* Link buttons */
+    &.link {
+      background: transparent;
+      border-color: transparent;
+      color: var(--sigvelo-color-primary-text);
+      text-underline-offset: 4px;
+
+      &:hover:not(.disabled) {
+        text-decoration: underline;
+      }
+    }
+
+    /* Icon buttons */
+    &.icon {
+      padding-inline: 0.75em;
+
+      &.xs {
+        padding-inline: 0.525em;
+      }
+
+      &.sm {
+        padding-inline: 0.65em;
+      }
+
+      &.lg {
+        padding-inline: 0.675em;
+      }
+
+      &.xl {
+        padding-inline: 0.55em;
+      }
+    }
+
+    /* Pills */
+    &.pill {
+      border-radius: var(--sigvelo-radius-full);
+    }
+
+    /* Toggle button indicators */
+    #toggle-indicator {
+      position: absolute;
+      bottom: 0.25em;
+      left: calc(50% - 0.5em);
+      width: 1em;
+      height: 0.25em;
+      border-radius: var(--sigvelo-radius-full);
+      background-color: currentColor;
+      opacity: 0.15;
+    }
+
+    &[aria-pressed="true"] #toggle-indicator {
+      opacity: 1;
+    }
+
+    /* Disabled */
+    &.disabled:not(.loading) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    /* Loading */
+    &.loading {
+      cursor: not-allowed;
+
+      #label {
+        visibility: hidden;
+      }
+    }
+
+    #spinner {
+      --indicator-color: currentColor;
+      --track-color: color-mix(in oklab, currentColor, transparent 75%);
+      position: absolute;
+      top: calc(50% - 0.5em);
+      left: calc(50% - 0.5em);
+    }
+
+    #caret {
+      font-size: 1.25em;
+    }
+
+    /* Visually hidden label */
+    slot[name="label"] {
+      display: inline;
+    }
+  }
+
+  /* Grouped buttons */
+  :host([data-button-group-middle]) #button {
+    border-radius: 0;
+  }
+
+  :host([data-button-group-horizontal][data-button-group-first]:not([data-button-group-last]))
+    #button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-button-group-horizontal][data-button-group-last]:not([data-button-group-first]))
+    #button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :host([data-button-group-vertical][data-button-group-first]:not([data-button-group-last]))
+    #button {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-button-group-vertical][data-button-group-last]:not([data-button-group-first]))
+    #button {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  :host([variant="outline"][data-button-group-middle]),
+  :host([variant="outline"][data-button-group-last]) {
+    margin-inline-start: calc(var(--sigvelo-border-width) * -2);
+  }
+
+  /* Icons */
+  ::slotted(sigvelo-icon) {
+    font-size: 1.25em;
+    stroke-width: 1.75px;
+  }
+
+  ::slotted(svg) {
+    width: 1.25em;
+    height: 1.25em;
+  }
+`;
+//#endregion
+//#region src/components/button/button.ts
+/**
+* <sigvelo-button>
+*
+* @summary Allows users to navigate, submit forms, and perform other actions.
+* @tag sigvelo-button
+* @documentation https://design-system.sigvelo.com/docs/components/button
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+* @dependency sigvelo-spinner
+*
+* @slot - The button's label.
+* @slot start - An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
+* @slot end - An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
+*
+* @event sigvelo-blur - Emitted when the button loses focus. This event does not bubble.
+* @event sigvelo-long-press - Emitted when the button is pressed and held by tapping or with the mouse. You can look at
+*  `event.detail.originalEvent.type` to see the type of event that initiated the long press.
+* @event sigvelo-focus - Emitted when the button receives focus. This event does not bubble.
+*
+* @csspart button - The internal `<button>` element. Other than `width`, this is where most custom styles should be
+*  applied.
+* @csspart caret - The caret icon, a `<sigvelo-icon>` element. Only present with the `with-caret` attribute.
+* @csspart caret__svg - The caret icon's `<svg>` part.
+* @csspart spinner - The loading indicator, a `<sigvelo-spinner>` element. Only present with the `loading` attribute.
+* @csspart toggle-indicator - When the button is a toggle button, this is the indicator that shows the current state.
+
+* @cssstate disabled - Applied when the button is disabled.
+* @cssstate focused - Applied when the button has focus.
+* @cssstate loading - Applied when a toggle button is loading.
+* @cssstate toggled - Applied when a toggle button is activated.
+*
+* @example Variants
+* Set the `color` attribute to `neutral`, `primary`, or `destructive` to change the button's color.
+*
+* ```html
+* <sigvelo-button color="neutral">
+*   Neutral
+* </sigvelo-button>
+* 
+* <sigvelo-button color="primary">
+*   Primary  
+* </sigvelo-button>
+* 
+* <sigvelo-button color="destructive">
+*   Destructive
+* </sigvelo-button>
+* ```
+*
+* **Note:** There is no `success` button by design. Use the `primary` color for success actions.
+*
+* @example Start & end icons
+* Use the `start` and `end` slots to add icons. For best results, use a `<sigvelo-icon>` or an `<svg>` element.
+*
+* ```html
+* <sigvelo-button>
+*   <sigvelo-icon slot="start" name="settings"></sigvelo-icon>
+*   Settings
+* </sigvelo-button>
+* 
+* <sigvelo-button>
+*   Favorite
+*   <sigvelo-icon slot="end" name="heart"></sigvelo-icon>
+* </sigvelo-button>
+* 
+* <sigvelo-button>
+*   <sigvelo-icon slot="start" name="link"></sigvelo-icon>
+*   Open
+*   <sigvelo-icon slot="end" name="external-link"></sigvelo-icon>
+* </sigvelo-button>
+* ```
+*
+* @example Link buttons
+* Any button can be rendered as a link by setting the `href` attribute. This is useful to allow buttons to act as navigation. When `href` is present, other link options such as `download`, `rel`, and `target` also become available.
+*
+* ```html
+* <sigvelo-button href="https://example.com/" target="_blank" rel="noreferrer noopener">
+*   I'm secretly a link
+* </sigvelo-button>
+* 
+* <sigvelo-button href="/assets/images/logo-light.svg" download>
+*   Download the logo
+* </sigvelo-button>
+* ```
+*
+* **Note:** Because link buttons become anchors, they cannot be used with `disabled` or `loading`.
+*
+* @example Changing the width
+* To change a button's width, use the CSS `width` property.
+*
+* ```html
+* <sigvelo-button style="width: 100%">
+*   I'm much longer now
+* </sigvelo-button>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the button's size. Available sizes include `xs`, `sm`, `md`, `lg`, and `xl`, with the default being `sm`.
+*
+* ```html
+* <sigvelo-button size="xs">Extra small</sigvelo-button>
+* <sigvelo-button size="sm">Small</sigvelo-button>
+* <sigvelo-button size="md">Medium</sigvelo-button>
+* <sigvelo-button size="lg">Large</sigvelo-button>
+* <sigvelo-button size="xl">Extra large</sigvelo-button>
+* ```
+*
+* @example Outline buttons
+* Set the `variant` attribute to `outline` to draw outlined buttons.
+*
+* ```html
+* <sigvelo-button variant="outline" color="neutral">
+*   Neutral
+* </sigvelo-button>
+* 
+* <sigvelo-button variant="outline" color="primary">
+*   Primary
+* </sigvelo-button>
+* 
+* <sigvelo-button variant="outline" color="destructive">
+*   Destructive
+* </sigvelo-button>
+* ```
+*
+* Set `variant="surface"` for a raised neutral action surface.
+*
+* ```html
+* <sigvelo-button variant="surface">Open details</sigvelo-button>
+* ```
+*
+* @example Text buttons
+* Set the `variant` attribute to `ghost` to draw ghost buttons. Ghost buttons share the same size and padding as normal buttons, but don't have a background.
+*
+* ```html
+* <sigvelo-button variant="ghost">
+*   I'm text
+* </sigvelo-button>
+* ```
+*
+* @example Pill-shaped buttons
+* Buttons can be rendered with pill-shaped edges by adding the `pill` attribute.
+*
+* ```html
+* <sigvelo-button pill color="neutral">
+*   Neutral
+* </sigvelo-button>
+* 
+* <sigvelo-button pill color="primary">
+*   Primary
+* </sigvelo-button>
+* 
+* <sigvelo-button pill color="destructive">
+*   Destructive
+* </sigvelo-button>
+* ```
+*
+* @example Icon buttons
+* To create an icon button, place an icon into the button's default slot and set the `icon-label` attribute to an appropriate label. The label won't be visible, but it will be available to assistive devices.
+*
+* ```html
+* <sigvelo-button icon-label="Accept" color="primary">
+*   <sigvelo-icon name="check"></sigvelo-icon>
+* </sigvelo-button>
+* 
+* <sigvelo-button icon-label="Reload">
+*   <sigvelo-icon name="refresh"></sigvelo-icon>
+* </sigvelo-button>
+* 
+* <sigvelo-button icon-label="Delete" color="destructive">
+*   <sigvelo-icon name="trash"></sigvelo-icon>
+* </sigvelo-button>
+* 
+* <sigvelo-button icon-label="Close" variant="ghost">
+*   <sigvelo-icon name="x"></sigvelo-icon>
+* </sigvelo-button>
+* ```
+*
+* @example Toggle buttons
+* Create a toggle button by adding the `toggle="off"` attribute. To make it active by default, use `toggle="on"` instead. An indicator is shown to make it obvious when the toggle is selected.
+*
+* ```html
+* <sigvelo-button color="neutral" toggle="off" icon-label="Filter">
+*   <sigvelo-icon name="filter"></sigvelo-icon>
+* </sigvelo-button>
+* 
+* <sigvelo-button color="primary" toggle="off" icon-label="Alarm">
+*   <sigvelo-icon name="bell"></sigvelo-icon>  
+* </sigvelo-button>
+* 
+* <sigvelo-button color="destructive" toggle="off" icon-label="Record">
+*   <sigvelo-icon name="microphone"></sigvelo-icon>
+* </sigvelo-button>
+* 
+* <sigvelo-button variant="ghost" toggle="off" icon-label="Mute">
+*   <sigvelo-icon name="volume-3"></sigvelo-icon>
+* </sigvelo-button>
+* ```
+*
+* **Warning:** Toggle buttons cannot be used with link buttons or submit buttons.
+*
+* @example Loading buttons
+* To show the button in a loading state, add the `loading` attribute. When a button is loading, it is effectively disabled and `click` events will not be emitted.
+*
+* ```html
+* <sigvelo-button loading>
+*   I'm loading
+* </sigvelo-button>
+* ```
+*
+* @example Disabling
+* To disable a button, add the `disabled` attribute. When a button is disabled, the `click` event will not be emitted.
+*
+* ```html
+* <sigvelo-button disabled>Regular button</sigvelo-button>
+* <sigvelo-button href="https://example.com/" disabled>Link button</sigvelo-button>
+* ```
+*
+* @example Adding a dropdown caret
+* A caret can be shown to indicate the button opens a dropdown menu by adding the `with-caret` attribute.
+*
+* ```html
+* <sigvelo-button with-caret>Dropdown</sigvelo-button>
+* ```
+*
+* @example Listening for long press
+* You can detect long presses by listening to the `sigvelo-long-press` event. The event is dispatched when the button is clicked or tapped and held for 700 milliseconds.
+*
+* You can determine if the initiating event was a click (`pointer`) or tap (`touch`) by looking at `event.detail.type`. You can also look at `event.detail.originalEvent` to get the coordinates and other details.
+*
+* ```html
+* <sigvelo-button id="button__long-press">Press and hold</sigvelo-button>
+* 
+* <script>
+*   const button = document.getElementById('button__long-press');
+* 
+*   button.addEventListener('sigvelo-long-press', async event => {
+*     // Log the coordinates and the type of event that initiated the 
+*     // long press, i.e. pointer (mouse) or touch (tap)
+*     const type = event.detail.type;
+*     const { clientX, clientY } = event.detail.originalEvent;
+*     
+*     console.log(`${type} at ${parseInt(clientX)}×${parseInt(clientY)}`);
+*     
+*     // Animate the button
+*     button.animate([
+*       { scale: 1, offset: 0 },
+*       { scale: 1.2, offset: 0.1 },
+*       { scale: 1, offset: 1 }
+*     ], {
+*       duration: 500,
+*       easing: 'linear'
+*     });
+*   });
+* <\/script>
+* ```
+*/
+var SigveloButton = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "normal";
+		this.color = "primary";
+		this.disabled = false;
+		this.loading = false;
+		this.size = "sm";
+		this.pill = false;
+		this.type = "button";
+		this.value = "";
+		this.withCaret = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.shadowRootOptions = {
+			...SigveloFormControlElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = [hostStyles, button_styles_default];
+	}
+	get focusableAnchor() {
+		return this.shadowRoot.querySelector("button");
+	}
+	firstUpdated() {
+		const button = this.shadowRoot.getElementById("button");
+		this.longPress = new LongPress(button, { eventName: "sigvelo-long-press" });
+		this.longPress.start();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("loading")) this.customStates.set("loading", this.loading);
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+	}
+	handleClick(event) {
+		if (this.disabled || this.loading) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return;
+		}
+		if (this.toggle !== void 0) {
+			this.toggle = this.toggle === "on" ? "off" : "on";
+			this.customStates.set("toggled", this.toggle === "on");
+		}
+		if (this.type === "reset" && this.internals.form) {
+			this.internals.form.reset();
+			return;
+		}
+		if (this.type === "submit" && this.internals.form) {
+			const submitter = document.createElement("button");
+			submitter.style.position = "absolute";
+			submitter.style.width = "1px";
+			submitter.style.height = "1px";
+			submitter.style.overflow = "hidden";
+			submitter.style.whiteSpace = "nowrap";
+			submitter.style.clipPath = "inset(50%)";
+			submitter.type = "submit";
+			if (this.name) submitter.name = this.name;
+			if (this.value) submitter.value = this.value;
+			[
+				"formaction",
+				"formenctype",
+				"formmethod",
+				"formnovalidate",
+				"formtarget"
+			].forEach((attr) => {
+				if (this.hasAttribute(attr)) submitter.setAttribute(attr, this.getAttribute(attr) ?? "");
+			});
+			this.internals.form.append(submitter);
+			requestAnimationFrame(() => {
+				submitter.click();
+				submitter.remove();
+			});
+		}
+	}
+	render() {
+		const isLink = typeof this.href === "string";
+		const isDisabled = this.disabled || !isLink && this.loading;
+		const isLoading = !isLink && this.loading;
+		const isSubmit = this.type === "submit";
+		const isToggle = this.toggle !== void 0 && !isLink && !isSubmit;
+		const tag = isLink ? literal`a` : literal`button`;
+		return html$1`
+      <${tag}
+        id="button"
+        part="button"
+        class=${classMap({
+			neutral: this.color === "neutral",
+			primary: this.color === "primary",
+			destructive: this.color === "destructive",
+			normal: this.variant === "normal",
+			surface: this.variant === "surface",
+			outline: this.variant === "outline",
+			ghost: this.variant === "ghost",
+			link: this.variant === "link",
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			pill: this.pill,
+			icon: this.iconLabel?.length > 0,
+			disabled: isDisabled,
+			loading: isLoading
+		})}
+        type=${ifDefined(isLink ? void 0 : this.type)}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        value=${ifDefined(isLink ? void 0 : this.value)}
+        href=${ifDefined(isLink && !this.disabled ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink && this.rel ? this.rel : void 0)}
+        aria-label=${ifDefined(this.iconLabel ? this.iconLabel : void 0)}
+        aria-pressed=${ifDefined(isToggle ? this.toggle === "on" ? "true" : "false" : void 0)}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        ${isLoading ? html$1` <sigvelo-spinner id="spinner" part="spinner"></sigvelo-spinner> ` : ""}
+        <slot name="start"></slot>
+        <slot id="label" part="label"></slot>
+        <slot name="end"></slot>
+        ${this.withCaret ? html$1`
+                <sigvelo-icon
+                  id="caret"
+                  part="caret"
+                  exportparts="svg:caret__svg"
+                  slot="end"
+                  name="chevron-down"
+                  library="system"
+                ></sigvelo-icon>
+              ` : ""}
+        ${isToggle ? html$1` <span part="toggle-indicator" id="toggle-indicator"></span> ` : ""}
+      </${tag}>
+    `;
+	}
+};
+__decorate([property({ reflect: true })], SigveloButton.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloButton.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloButton.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloButton.prototype, "loading", void 0);
+__decorate([property({ reflect: true })], SigveloButton.prototype, "toggle", void 0);
+__decorate([property({ reflect: true })], SigveloButton.prototype, "size", void 0);
+__decorate([property({ attribute: "icon-label" })], SigveloButton.prototype, "iconLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloButton.prototype, "pill", void 0);
+__decorate([property()], SigveloButton.prototype, "type", void 0);
+__decorate([property({ reflect: true })], SigveloButton.prototype, "name", void 0);
+__decorate([property()], SigveloButton.prototype, "value", void 0);
+__decorate([property({
+	attribute: "with-caret",
+	type: Boolean,
+	reflect: true
+})], SigveloButton.prototype, "withCaret", void 0);
+__decorate([property()], SigveloButton.prototype, "href", void 0);
+__decorate([property()], SigveloButton.prototype, "target", void 0);
+__decorate([property()], SigveloButton.prototype, "rel", void 0);
+__decorate([property()], SigveloButton.prototype, "download", void 0);
+__decorate([property()], SigveloButton.prototype, "form", void 0);
+__decorate([property({ attribute: "formaction" })], SigveloButton.prototype, "formAction", void 0);
+__decorate([property({ attribute: "formenctype" })], SigveloButton.prototype, "formEnctype", void 0);
+__decorate([property({ attribute: "formmethod" })], SigveloButton.prototype, "formMethod", void 0);
+__decorate([property({
+	attribute: "formnovalidate",
+	type: Boolean
+})], SigveloButton.prototype, "formNoValidate", void 0);
+__decorate([property({ attribute: "formtarget" })], SigveloButton.prototype, "formTarget", void 0);
+customElements.define("sigvelo-button", SigveloButton);
+//#endregion
+export { SigveloButton as t };