@mcp-b/web-components 0.2.0

package/dist/toggle-icon-4oLDeEt4.js

@@ -0,0 +1,752 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query, state } 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 { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+//#region src/components/toggle-icon/toggle-icon.styles.ts
+var toggle_icon_styles_default = css`
+  :host {
+    --animation-speed: var(--sigvelo-motion-duration-layout);
+    --checked-color: #f59e0b;
+    --unchecked-color: var(--sigvelo-color-neutral-bg);
+
+    display: inline-flex;
+  }
+
+  button {
+    /* Make button a grid container */
+    display: grid;
+    appearance: none;
+    position: relative;
+    grid-template-areas: "icon";
+    align-items: center;
+    justify-items: center;
+    width: 100%;
+    padding: 0.25em;
+    overflow: hidden;
+    border: none;
+    border-radius: var(--sigvelo-radius-md);
+    background: none;
+    font: inherit;
+    text-decoration: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    cursor: pointer;
+    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,
+      var(--animation-speed) opacity ease,
+      var(--animation-speed) transform ease;
+    user-select: none;
+    -webkit-user-select: none;
+
+    @media (prefers-reduced-motion) {
+      --animation-speed: 0;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    /* Sizes */
+    &.xs {
+      font-size: calc(var(--sigvelo-control-text-xs) * 1.25);
+    }
+
+    &.sm {
+      font-size: calc(var(--sigvelo-control-text-sm) * 1.25);
+    }
+
+    &.md {
+      font-size: calc(var(--sigvelo-control-text-md) * 1.25);
+    }
+
+    &.lg {
+      font-size: calc(var(--sigvelo-control-text-lg) * 1.25);
+    }
+
+    &.xl {
+      font-size: calc(var(--sigvelo-control-text-xl) * 1.25);
+    }
+  }
+
+  /* Both slots are positioned in the same grid area to ensure overlap */
+  .checked-icon,
+  .unchecked-icon {
+    display: grid;
+    grid-area: icon;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    transition:
+      opacity var(--sigvelo-motion-duration-interaction) ease,
+      transform var(--sigvelo-motion-duration-interaction) ease;
+  }
+
+  /* Untoggled state */
+  .unchecked-icon {
+    transform: scale(1);
+    color: var(--unchecked-color);
+    opacity: 1;
+  }
+
+  .checked-icon {
+    transform: scale(0.8);
+    color: var(--checked-color);
+    opacity: 0;
+  }
+
+  /* Toggled state */
+  .checked .checked-icon {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  .checked .unchecked-icon {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  /* Disabled */
+  .disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Fade animation */
+  button[data-effect="fade"] {
+    .checked-icon,
+    .unchecked-icon {
+      transform: scale(1);
+      transition: opacity var(--animation-speed) ease;
+    }
+  }
+
+  /* Flip X animation */
+  button[data-effect="flip-x"] {
+    .checked-icon,
+    .unchecked-icon {
+      backface-visibility: hidden; /* Hide the back face during animation */
+      transition:
+        opacity var(--animation-speed) ease,
+        transform var(--animation-speed) ease;
+    }
+
+    .unchecked-icon {
+      transform: rotateY(0deg);
+    }
+
+    &:dir(ltr) .checked-icon {
+      transform: rotateY(180deg);
+      opacity: 0;
+    }
+
+    &:dir(rtl) .checked-icon {
+      transform: rotateY(-180deg);
+      opacity: 0;
+    }
+
+    &:dir(ltr).checked .unchecked-icon {
+      transform: rotateY(-180deg);
+      opacity: 0;
+      transition:
+        opacity calc(var(--animation-speed) * 0.6) ease,
+        transform var(--animation-speed) ease;
+    }
+
+    &:dir(rtl).checked .unchecked-icon {
+      transform: rotateY(180deg);
+      opacity: 0;
+      transition:
+        opacity calc(var(--animation-speed) * 0.6) ease,
+        transform var(--animation-speed) ease;
+    }
+
+    &.checked .checked-icon {
+      transform: rotateY(0deg);
+      opacity: 1;
+    }
+  }
+
+  /* Flip Y animation */
+  button[data-effect="flip-y"] {
+    .checked-icon,
+    .unchecked-icon {
+      backface-visibility: hidden; /* Hide the back face during animation */
+      transition:
+        opacity var(--animation-speed) ease,
+        transform var(--animation-speed) ease;
+    }
+
+    .unchecked-icon {
+      transform: rotateX(0deg);
+    }
+
+    .checked-icon {
+      transform: rotateX(180deg);
+      opacity: 0;
+    }
+
+    &.checked .unchecked-icon {
+      transform: rotateX(-180deg);
+      opacity: 0;
+      /* Add a slightly faster opacity transition to hide it more quickly */
+      transition:
+        opacity calc(var(--animation-speed) * 0.6) ease,
+        transform var(--animation-speed) ease;
+    }
+
+    &.checked .checked-icon {
+      transform: rotateX(0deg);
+      opacity: 1;
+    }
+  }
+
+  /* Translate X animation */
+  button[data-effect="translate-x"] {
+    .checked-icon,
+    .unchecked-icon {
+      transition:
+        opacity var(--animation-speed) ease,
+        transform var(--animation-speed) ease;
+    }
+
+    .unchecked-icon {
+      transform: translateX(0);
+    }
+
+    &:dir(ltr) .checked-icon {
+      transform: translateX(-20px);
+    }
+
+    &:dir(rtl) .checked-icon {
+      transform: translateX(20px);
+    }
+
+    &:dir(ltr).checked .unchecked-icon {
+      transform: translateX(20px);
+    }
+
+    &:dir(rtl).checked .unchecked-icon {
+      transform: translateX(-20px);
+    }
+
+    &.checked .checked-icon {
+      transform: translateX(0);
+    }
+  }
+
+  /* Translate Y animation */
+  button[data-effect="translate-y"] {
+    .checked-icon,
+    .unchecked-icon {
+      transition:
+        opacity var(--animation-speed) ease,
+        transform var(--animation-speed) ease;
+    }
+
+    .unchecked-icon {
+      transform: translateY(0);
+    }
+
+    .checked-icon {
+      transform: translateY(-20px);
+    }
+
+    &.checked .unchecked-icon {
+      transform: translateY(20px);
+    }
+
+    &.checked .checked-icon {
+      transform: translateY(0);
+    }
+  }
+
+  /* Scale animation */
+  button[data-effect="scale"] {
+    .checked-icon,
+    .unchecked-icon {
+      transition:
+        opacity var(--animation-speed) ease,
+        transform var(--animation-speed) var(--sigvelo-ease-snappy);
+    }
+
+    .unchecked-icon {
+      transform: scale(1);
+    }
+
+    .checked-icon {
+      transform: scale(0);
+    }
+
+    &.checked .unchecked-icon {
+      transform: scale(0);
+    }
+
+    &.checked .checked-icon {
+      transform: scale(1);
+    }
+  }
+`;
+//#endregion
+//#region src/components/toggle-icon/toggle-icon.ts
+const nativeFileInput = document.createElement("input");
+nativeFileInput.name = "sigvelo-faux-input";
+nativeFileInput.type = "checkbox";
+nativeFileInput.required = true;
+const VALIDATION_MESSAGE = nativeFileInput.validationMessage;
+/**
+* <sigvelo-toggle-icon>
+*
+* @summary Similar to checkboxes, except with icons to represent the checked and unchecked states.
+* @tag sigvelo-toggle-icon
+* @documentation https://design-system.sigvelo.com/docs/components/toggle-icon
+* @status stable
+* @since 1.0
+*
+* @slot checked - The icon to show when checked. Works best with a `<sigvelo-icon>` element.
+* @slot unchecked - The default icon to show when unchecked. Works best with a `<sigvelo-icon>` element.
+*
+* @event sigvelo-blur - Emitted when the toggle icon loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the toggle's value.
+* @event sigvelo-focus - Emitted when the checkbox receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the checkbox receives input.
+*
+* @csspart button - The internal button that contains the toggle icons, a `<button>` element.
+*
+* @cssproperty [--animation-speed=300ms] - The animation speed to use when effects are selected.
+* @cssproperty [--checked-color=#f59e0b] - The color to use for checked toggle icons.
+* @cssproperty [--unchecked-color=var(--sigvelo-color-neutral-bg)] - The color to use for unchecked toggle icons.
+*
+* @cssstate checked - Applied when the toggle icon is active.
+* @cssstate disabled - Applied when the toggle icon is disabled.
+* @cssstate focused - Applied when the toggle icon has focus.
+* @cssstate user-valid - Applied when the toggle icon is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the toggle icon is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* Toggle icons can be used just like checkboxes and switches to turn features on and off. You can listen for state changes with the `sigvelo-input` event and submit them with forms by adding `name` and `value` attributes.
+*
+* Assistive devices will recognize toggle icons as toggle buttons. The default icon is a star, but you can customize it with any icon you want.
+*
+* ```html
+* <sigvelo-toggle-icon
+*   label="Star this"
+*   effect="fade"
+* ></sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Save to favorites"
+*   effect="scale"
+*   style="--checked-color: crimson;"
+* >
+*   <sigvelo-icon slot="unchecked" name="heart" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="heart" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Like this post"
+*   effect="flip-x"
+*   style="--checked-color: dodgerblue;"
+* >
+*   <sigvelo-icon slot="unchecked" name="thumb-up" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="thumb-up" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Play / pause"
+*   effect="scale"
+*   style="
+*     --checked-color: var(--sigvelo-color-neutral-bg);
+*     --unchecked-color: var(--sigvelo-color-neutral-bg);
+*   "
+* >
+*   <sigvelo-icon slot="unchecked" name="player-pause" family="filled"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="player-play" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+* ```
+*
+* @example Checked initially
+* Add the `checked` attribute to check the toggle icon initially.
+*
+* ```html
+* <sigvelo-toggle-icon
+*   label="Star this"
+*   name="favorite"
+*   value="1"
+*   checked
+* ></sigvelo-toggle-icon>
+* ```
+*
+* @example Custom icons
+* Place a `<sigvelo-icon>` into the default slot to show a custom unchecked state. Place one into the `checked` slot to show a custom checked state.
+*
+* You can use any icon you want for each state, but `outline` for unchecked icons and `filled` for checked icons usually work best. Use the `--unchecked-color` and `--checked-color` custom properties to change colors.
+*
+* ```html
+* <sigvelo-toggle-icon
+*   label="Save to favorites"
+*   style="--checked-color: crimson;"
+* >
+*   <sigvelo-icon slot="unchecked" name="heart" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="heart" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Like this post"
+*   style="--checked-color: dodgerblue;"
+* >
+*   <sigvelo-icon slot="unchecked" name="thumb-up" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="thumb-up" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Enable filter"
+*   style="--checked-color: blueviolet;"
+* >
+*   <sigvelo-icon slot="unchecked" name="filter" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="filter" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+* ```
+*
+* @example Changing the effect
+* Set the `effect` attribute to change the toggle icon's animation. This works great with custom icons.
+*
+* ```html
+* <sigvelo-toggle-icon
+*   label="Star this"
+*   effect="fade"
+* ></sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Love this"
+*   effect="scale"
+*   style="--checked-color: crimson;"
+* >
+*   <sigvelo-icon slot="unchecked" name="heart" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="heart" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Mark as complete"
+*   effect="flip-x"
+*   style="--checked-color: cadetblue;"
+* >
+*   <sigvelo-icon slot="unchecked" name="clipboard" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="clipboard-check" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Secure this"
+*   effect="flip-y"
+*   style="--checked-color: forestgreen;"
+* >
+*   <sigvelo-icon slot="unchecked" name="shield" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="shield-check" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Ship this"
+*   effect="translate-x"
+*   style="--checked-color: blueviolet;"
+* >
+*   <sigvelo-icon slot="unchecked" name="truck" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="truck" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+*
+* <sigvelo-toggle-icon
+*   label="Enable reader mode"
+*   effect="translate-y"
+*   style="--checked-color: dodgerblue;"
+* >
+*   <sigvelo-icon slot="unchecked" name="eyeglass" family="outline"></sigvelo-icon>
+*   <sigvelo-icon slot="checked" name="eyeglass" family="filled"></sigvelo-icon>
+* </sigvelo-toggle-icon>
+* ```
+*
+* @example Sizes
+* Use the `size` attribute to change the size of the toggle icon.
+*
+* ```html
+* <sigvelo-toggle-icon size="xs"></sigvelo-toggle-icon>
+* <sigvelo-toggle-icon size="sm"></sigvelo-toggle-icon>
+* <sigvelo-toggle-icon size="md"></sigvelo-toggle-icon>
+* <sigvelo-toggle-icon size="lg"></sigvelo-toggle-icon>
+* <sigvelo-toggle-icon size="xl"></sigvelo-toggle-icon>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the toggle icon.
+*
+* ```html
+* <sigvelo-toggle-icon disabled></sigvelo-toggle-icon>
+* <sigvelo-toggle-icon checked disabled></sigvelo-toggle-icon>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the toggle icon is checked.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-toggle-icon
+*     label="Star this"
+*     name="star"
+*     value="1"
+*     required
+*   ></sigvelo-toggle-icon>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the toggle icon invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="toggle__custom-validation">
+*   <sigvelo-toggle-icon
+*     label="Star this"
+*     name="star"
+*     value="1"
+*     required
+*   ></sigvelo-toggle-icon>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('toggle__custom-validation');
+*   const toggleIcon = form.querySelector('sigvelo-toggle-icon');
+*
+*   toggleIcon.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid toggle icons using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="toggle__validation-pseudo">
+*   <sigvelo-toggle-icon
+*     label="Star this"
+*     name="star"
+*     value="1"
+*     required
+*   ></sigvelo-toggle-icon>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .toggle__validation-pseudo {
+*     sigvelo-toggle-icon:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-toggle-icon:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="toggle__validation-custom">
+*   <sigvelo-toggle-icon
+*     label="Star this"
+*     name="star"
+*     value="1"
+*     required
+*   ></sigvelo-toggle-icon>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .toggle__validation-custom {
+*     sigvelo-toggle-icon:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-toggle-icon:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloToggleIcon = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = "";
+		this.checked = false;
+		this.disabled = false;
+		this.size = "md";
+		this.effect = "none";
+		this.required = false;
+	}
+	static {
+		this.shadowRootOptions = {
+			...SigveloFormControlElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = [hostStyles, toggle_icon_styles_default];
+	}
+	get focusableAnchor() {
+		return this.button;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("checked") || changedProperties.has("value")) this.internals.setFormValue(this.checked ? this.value : null);
+		if (changedProperties.has("checked")) this.customStates.set("checked", this.checked);
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+	}
+	/** @internal Called when a containing fieldset is disabled. */
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+	}
+	/** @internal Called when the form is reset. */
+	formResetCallback() {
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.checked = this.hasAttribute("checked");
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+	}
+	handleClick() {
+		if (this.disabled) return;
+		this.checked = !this.checked;
+		this.dispatchEvent(new SigveloChangeEvent());
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new SigveloInputEvent());
+		this.dispatchEvent(new InputEvent("input"));
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	/** Sets the form control's validity */
+	async updateValidity() {
+		await this.updateComplete;
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		const validationMessage = hasCustomValidity ? this.getCustomValidity() : VALIDATION_MESSAGE;
+		const flags = {
+			customError: hasCustomValidity,
+			valueMissing: this.required && !this.checked
+		};
+		this.isInvalid = hasCustomValidity ? true : !this.checked;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	render() {
+		return html`
+      <button
+        part="button"
+        class=${classMap({
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			checked: this.checked,
+			disabled: this.disabled
+		})}
+        data-effect=${this.effect}
+        name=${this.name}
+        value=${this.value}
+        type="button"
+        aria-label=${this.label}
+        aria-pressed=${this.checked ? "true" : "false"}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <slot name="unchecked" class="unchecked-icon">
+          <sigvelo-icon name="star" family="outline" library="system"></sigvelo-icon>
+        </slot>
+        <slot name="checked" class="checked-icon">
+          <sigvelo-icon name="star" family="filled" library="system"></sigvelo-icon>
+        </slot>
+      </button>
+    `;
+	}
+};
+__decorate([query("button")], SigveloToggleIcon.prototype, "button", void 0);
+__decorate([state()], SigveloToggleIcon.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloToggleIcon.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloToggleIcon.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloToggleIcon.prototype, "label", void 0);
+__decorate([property({ reflect: true })], SigveloToggleIcon.prototype, "name", void 0);
+__decorate([property()], SigveloToggleIcon.prototype, "value", void 0);
+__decorate([property({ type: Boolean })], SigveloToggleIcon.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloToggleIcon.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloToggleIcon.prototype, "size", void 0);
+__decorate([property({ reflect: true })], SigveloToggleIcon.prototype, "effect", void 0);
+__decorate([property()], SigveloToggleIcon.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloToggleIcon.prototype, "required", void 0);
+customElements.define("sigvelo-toggle-icon", SigveloToggleIcon);
+//#endregion
+export { SigveloToggleIcon as t };