@mcp-b/web-components 0.2.0

package/dist/toggle-tag-1sfTFJtg.js

@@ -0,0 +1,434 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import { live } from "lit/directives/live.js";
+//#region src/components/toggle-tag/toggle-tag.styles.ts
+var toggle_tag_styles_default = css`
+  :host {
+    display: inline-flex;
+  }
+
+  /* The toggle tag's label */
+  #label {
+    display: flex;
+    align-items: center;
+    padding: 0.4em 0.6em;
+    gap: 0.25em;
+    border: none;
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    cursor: pointer;
+    transition:
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) color ease,
+      var(--sigvelo-motion-duration-interaction) translate ease;
+    user-select: none;
+
+    &.xs {
+      font-size: calc(var(--sigvelo-control-text-xs) * 0.875);
+    }
+
+    &.sm {
+      font-size: calc(var(--sigvelo-control-text-sm) * 0.875);
+    }
+
+    &.md {
+      font-size: calc(var(--sigvelo-control-text-md) * 0.875);
+    }
+
+    &.lg {
+      font-size: calc(var(--sigvelo-control-text-lg) * 0.875);
+    }
+
+    &.xl {
+      font-size: calc(var(--sigvelo-control-text-xl) * 0.875);
+    }
+
+    &:has(:focus-visible) {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    &:not(.disabled):active {
+      translate: 0 var(--sigvelo-motion-distance-xs);
+    }
+
+    &.checked {
+      background-color: var(--sigvelo-color-primary-bg);
+      color: var(--sigvelo-color-primary-text-on-bg);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  ::slotted(sigvelo-icon) {
+    font-size: 1.25em;
+  }
+
+  /* The actual checkbox control - visually hidden */
+  #checkbox {
+    appearance: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: none;
+    background: none;
+    white-space: nowrap;
+    clip-path: inset(50%);
+    cursor: inherit;
+
+    &:focus {
+      outline: none;
+    }
+  }
+`;
+//#endregion
+//#region src/components/toggle-tag/toggle-tag.ts
+/**
+* <sigvelo-toggle-tag>
+*
+* @summary Similar to checkboxes, except with tags to represent the checked and unchecked states.
+* @tag sigvelo-toggle-tag
+* @documentation https://design-system.sigvelo.com/docs/components/toggle-tag
+* @status stable
+* @since 1.0
+*
+* @slot - The toggle tag's label. For plain-text labels, you can use the `label` attribute instead.
+*
+* @event sigvelo-blur - Emitted when the toggle tag loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the toggle tag's value.
+* @event sigvelo-focus - Emitted when the toggle tag receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the toggle tag receives input.
+*
+* @csspart label - The `<label>` that wraps the entire control.
+*
+* @cssstate checked - Applied when the toggle tag is checked.
+* @cssstate disabled - Applied when the toggle tag is disabled.
+* @cssstate focused - Applied when the toggle tag has focus.
+* @cssstate user-valid - Applied when the toggle tag is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the toggle tag is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* Toggle tags 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.
+*
+* Toggle tags should generally be used in groups. In fact, they work best when place inside of checkbox groups. Assistive devices will recognize tag checkboxes as standard checkboxes.
+*
+* ```html
+* <sigvelo-checkbox-group label="Amenities" style="--gap: .5em; max-width: 460px;">
+*   <sigvelo-toggle-tag name="amenities" value="coffee">
+*     <sigvelo-icon name="coffee"></sigvelo-icon>
+*     Coffee
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="amenities" value="laundry">
+*     <sigvelo-icon name="wash-machine"></sigvelo-icon>
+*     Laundry
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="amenities" value="microwave">
+*     <sigvelo-icon name="microwave"></sigvelo-icon>
+*     Microwave
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="amenities" value="parking">
+*     <sigvelo-icon name="parking"></sigvelo-icon>
+*     Parking
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="amenities" value="pet-friendly">
+*     <sigvelo-icon name="cat"></sigvelo-icon>
+*     Pet friendly
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="amenities" value="pool">
+*     <sigvelo-icon name="pool"></sigvelo-icon>
+*     Pool
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="amenities" value="tv">
+*     <sigvelo-icon name="device-tv"></sigvelo-icon>
+*     TV
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="amenities" value="wifi">
+*     <sigvelo-icon name="wifi"></sigvelo-icon>
+*     Wifi
+*   </sigvelo-toggle-tag>
+* </sigvelo-checkbox-group>
+* ```
+*
+* @example Checked initially
+* Add the `checked` attribute to check the toggle tag initially.
+*
+* ```html
+* <sigvelo-checkbox-group label="Default notifications" style="--gap: .5em;">
+*   <sigvelo-toggle-tag name="notifications" value="email" checked>
+*     <sigvelo-icon name="mail"></sigvelo-icon>
+*     Email updates
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="notifications" value="push" checked>
+*     <sigvelo-icon name="bell"></sigvelo-icon>
+*     Push notifications
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="notifications" value="sms">
+*     <sigvelo-icon name="message-circle"></sigvelo-icon>
+*     SMS alerts
+*   </sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="notifications" value="phone">
+*     <sigvelo-icon name="phone"></sigvelo-icon>
+*     Phone calls
+*   </sigvelo-toggle-tag>
+* </sigvelo-checkbox-group>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to make toggle tags larger or smaller. The available sizes are `xs`, `sm`, `md` (default), `lg`, and `xl`.
+*
+* ```html
+* <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+*  <div>
+*    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Extra small</label>
+*    <sigvelo-checkbox-group style="--gap: .5em;">
+*      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="xs">XS</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="s">S</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="m">M</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="l">L</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="xl">XL</sigvelo-toggle-tag>
+*    </sigvelo-checkbox-group>
+*  </div>
+*
+*  <div>
+*    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Small</label>
+*    <sigvelo-checkbox-group style="--gap: .5em;">
+*      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="xs">XS</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="s">S</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="m">M</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="l">L</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="xl">XL</sigvelo-toggle-tag>
+*    </sigvelo-checkbox-group>
+*  </div>
+*
+*  <div>
+*    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Medium (default)</label>
+*    <sigvelo-checkbox-group style="--gap: .5em;">
+*      <sigvelo-toggle-tag size="md" name="md-sizes" value="xs">XS</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="md" name="md-sizes" value="s">S</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="md" name="md-sizes" value="m">M</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="md" name="md-sizes" value="l">L</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="md" name="md-sizes" value="xl">XL</sigvelo-toggle-tag>
+*    </sigvelo-checkbox-group>
+*  </div>
+*
+*  <div>
+*    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Large</label>
+*    <sigvelo-checkbox-group style="--gap: .5em;">
+*      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="xs">XS</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="s">S</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="m">M</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="l">L</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="xl">XL</sigvelo-toggle-tag>
+*    </sigvelo-checkbox-group>
+*  </div>
+*
+*  <div>
+*    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Extra large</label>
+*    <sigvelo-checkbox-group style="--gap: .5em;">
+*      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="xs">XS</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="s">S</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="m">M</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="l">L</sigvelo-toggle-tag>
+*      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="xl">XL</sigvelo-toggle-tag>
+*    </sigvelo-checkbox-group>
+*  </div>
+* </div>
+* ```
+*
+* @example Disabling toggle tags
+* Use the `disabled` attribute to prevent interaction with toggle tags. Disabled tags will appear faded and won't respond to clicks or keyboard input.
+*
+* ```html
+* <sigvelo-checkbox-group label="Options" style="--gap: .5em;">
+*   <sigvelo-toggle-tag name="options" value="option1">Option 1</sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="options" value="option2" disabled>Option 2</sigvelo-toggle-tag>
+*   <sigvelo-toggle-tag name="options" value="option3">Option 3</sigvelo-toggle-tag>
+* </sigvelo-checkbox-group>
+* ```
+*
+* @example Handling form submission
+* Toggle tags are form-associated custom elements that behave like native checkboxes when submitting forms. When a toggle tag is checked, its `name` and `value` attributes are included in the form data, just like a standard checkbox.
+*
+* ```html
+* <form id="toggle-tag__form" action="about:blank" target="_blank">
+*   <sigvelo-checkbox-group label="Languages" style="--gap: .5em; margin-bottom: 1.5rem;">
+*     <sigvelo-toggle-tag name="languages" value="cpp">C++</sigvelo-toggle-tag>
+*     <sigvelo-toggle-tag name="languages" value="go">Go</sigvelo-toggle-tag>
+*     <sigvelo-toggle-tag name="languages" value="javascript" checked>JavaScript</sigvelo-toggle-tag>
+*     <sigvelo-toggle-tag name="languages" value="php">PHP</sigvelo-toggle-tag>
+*     <sigvelo-toggle-tag name="languages" value="python">Python</sigvelo-toggle-tag>
+*     <sigvelo-toggle-tag name="languages" value="qb">QBasic</sigvelo-toggle-tag>
+*     <sigvelo-toggle-tag name="languages" value="rust">Rust</sigvelo-toggle-tag>
+*   </sigvelo-checkbox-group>
+*
+*   <sigvelo-button type="submit">Submit</sigvelo-button>
+* </form>
+* ```
+*/
+var SigveloToggleTag = 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.required = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = [hostStyles, toggle_tag_styles_default];
+	}
+	get focusableAnchor() {
+		return this.checkbox;
+	}
+	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");
+	}
+	handleClick() {
+		this.checked = !this.checked;
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+	}
+	handleChange() {
+		this.hadUserInteraction = true;
+		this.dispatchEvent(new SigveloChangeEvent());
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleInput() {
+		this.dispatchEvent(new SigveloInputEvent());
+	}
+	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() : this.checkbox.validationMessage;
+		const flags = {
+			customError: hasCustomValidity,
+			valueMissing: this.checkbox.validity.valueMissing
+		};
+		this.isInvalid = hasCustomValidity ? true : !this.checkbox.validity.valid;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	/** Sets focus to the toggle tag. */
+	focus() {
+		this.checkbox.focus();
+	}
+	/** Removes focus from the toggle tag. */
+	blur() {
+		this.checkbox.blur();
+	}
+	render() {
+		return html`
+      <label
+        id="label"
+        part="label"
+        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,
+			required: this.required
+		})}
+      >
+        <input
+          id="checkbox"
+          type="checkbox"
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          @change=${this.handleChange}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        />
+        <slot>${this.label}</slot>
+      </label>
+    `;
+	}
+};
+__decorate([query("input[type=\"checkbox\"]")], SigveloToggleTag.prototype, "checkbox", void 0);
+__decorate([state()], SigveloToggleTag.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloToggleTag.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloToggleTag.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloToggleTag.prototype, "label", void 0);
+__decorate([property({ reflect: true })], SigveloToggleTag.prototype, "name", void 0);
+__decorate([property()], SigveloToggleTag.prototype, "value", void 0);
+__decorate([property({ type: Boolean })], SigveloToggleTag.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloToggleTag.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloToggleTag.prototype, "size", void 0);
+__decorate([property()], SigveloToggleTag.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloToggleTag.prototype, "required", void 0);
+customElements.define("sigvelo-toggle-tag", SigveloToggleTag);
+//#endregion
+export { SigveloToggleTag as t };

package/dist/toggle-tag-IVvMGT4R.d.ts

@@ -0,0 +1,245 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/toggle-tag/toggle-tag.d.ts
+/**
+ * <sigvelo-toggle-tag>
+ *
+ * @summary Similar to checkboxes, except with tags to represent the checked and unchecked states.
+ * @tag sigvelo-toggle-tag
+ * @documentation https://design-system.sigvelo.com/docs/components/toggle-tag
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The toggle tag's label. For plain-text labels, you can use the `label` attribute instead.
+ *
+ * @event sigvelo-blur - Emitted when the toggle tag loses focus. This event does not bubble.
+ * @event sigvelo-change - Emitted when the user commits changes to the toggle tag's value.
+ * @event sigvelo-focus - Emitted when the toggle tag receives focus. This event does not bubble.
+ * @event sigvelo-input - Emitted when the toggle tag receives input.
+ *
+ * @csspart label - The `<label>` that wraps the entire control.
+ *
+ * @cssstate checked - Applied when the toggle tag is checked.
+ * @cssstate disabled - Applied when the toggle tag is disabled.
+ * @cssstate focused - Applied when the toggle tag has focus.
+ * @cssstate user-valid - Applied when the toggle tag is valid and the user has sufficiently interacted with it.
+ * @cssstate user-invalid - Applied when the toggle tag is invalid and the user has sufficiently interacted with it.
+ *
+ * @example Default
+ * Toggle tags 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.
+ *
+ * Toggle tags should generally be used in groups. In fact, they work best when place inside of checkbox groups. Assistive devices will recognize tag checkboxes as standard checkboxes.
+ *
+ * ```html
+ * <sigvelo-checkbox-group label="Amenities" style="--gap: .5em; max-width: 460px;">
+ *   <sigvelo-toggle-tag name="amenities" value="coffee">
+ *     <sigvelo-icon name="coffee"></sigvelo-icon>
+ *     Coffee
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="amenities" value="laundry">
+ *     <sigvelo-icon name="wash-machine"></sigvelo-icon>
+ *     Laundry
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="amenities" value="microwave">
+ *     <sigvelo-icon name="microwave"></sigvelo-icon>
+ *     Microwave
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="amenities" value="parking">
+ *     <sigvelo-icon name="parking"></sigvelo-icon>
+ *     Parking
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="amenities" value="pet-friendly">
+ *     <sigvelo-icon name="cat"></sigvelo-icon>
+ *     Pet friendly
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="amenities" value="pool">
+ *     <sigvelo-icon name="pool"></sigvelo-icon>
+ *     Pool
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="amenities" value="tv">
+ *     <sigvelo-icon name="device-tv"></sigvelo-icon>
+ *     TV
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="amenities" value="wifi">
+ *     <sigvelo-icon name="wifi"></sigvelo-icon>
+ *     Wifi
+ *   </sigvelo-toggle-tag>
+ * </sigvelo-checkbox-group>
+ * ```
+ *
+ * @example Checked initially
+ * Add the `checked` attribute to check the toggle tag initially.
+ *
+ * ```html
+ * <sigvelo-checkbox-group label="Default notifications" style="--gap: .5em;">
+ *   <sigvelo-toggle-tag name="notifications" value="email" checked>
+ *     <sigvelo-icon name="mail"></sigvelo-icon>
+ *     Email updates
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="notifications" value="push" checked>
+ *     <sigvelo-icon name="bell"></sigvelo-icon>
+ *     Push notifications
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="notifications" value="sms">
+ *     <sigvelo-icon name="message-circle"></sigvelo-icon>
+ *     SMS alerts
+ *   </sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="notifications" value="phone">
+ *     <sigvelo-icon name="phone"></sigvelo-icon>
+ *     Phone calls
+ *   </sigvelo-toggle-tag>
+ * </sigvelo-checkbox-group>
+ * ```
+ *
+ * @example Changing the size
+ * Use the `size` attribute to make toggle tags larger or smaller. The available sizes are `xs`, `sm`, `md` (default), `lg`, and `xl`.
+ *
+ * ```html
+ * <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+ *  <div>
+ *    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Extra small</label>
+ *    <sigvelo-checkbox-group style="--gap: .5em;">
+ *      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="xs">XS</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="s">S</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="m">M</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="l">L</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xs" name="xs-sizes" value="xl">XL</sigvelo-toggle-tag>
+ *    </sigvelo-checkbox-group>
+ *  </div>
+ *
+ *  <div>
+ *    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Small</label>
+ *    <sigvelo-checkbox-group style="--gap: .5em;">
+ *      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="xs">XS</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="s">S</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="m">M</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="l">L</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="sm" name="sm-sizes" value="xl">XL</sigvelo-toggle-tag>
+ *    </sigvelo-checkbox-group>
+ *  </div>
+ *
+ *  <div>
+ *    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Medium (default)</label>
+ *    <sigvelo-checkbox-group style="--gap: .5em;">
+ *      <sigvelo-toggle-tag size="md" name="md-sizes" value="xs">XS</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="md" name="md-sizes" value="s">S</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="md" name="md-sizes" value="m">M</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="md" name="md-sizes" value="l">L</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="md" name="md-sizes" value="xl">XL</sigvelo-toggle-tag>
+ *    </sigvelo-checkbox-group>
+ *  </div>
+ *
+ *  <div>
+ *    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Large</label>
+ *    <sigvelo-checkbox-group style="--gap: .5em;">
+ *      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="xs">XS</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="s">S</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="m">M</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="l">L</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="lg" name="lg-sizes" value="xl">XL</sigvelo-toggle-tag>
+ *    </sigvelo-checkbox-group>
+ *  </div>
+ *
+ *  <div>
+ *    <label style="display: block; margin-block-end: 0.5rem; font-weight: 600;">Extra large</label>
+ *    <sigvelo-checkbox-group style="--gap: .5em;">
+ *      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="xs">XS</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="s">S</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="m">M</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="l">L</sigvelo-toggle-tag>
+ *      <sigvelo-toggle-tag size="xl" name="xl-sizes" value="xl">XL</sigvelo-toggle-tag>
+ *    </sigvelo-checkbox-group>
+ *  </div>
+ * </div>
+ * ```
+ *
+ * @example Disabling toggle tags
+ * Use the `disabled` attribute to prevent interaction with toggle tags. Disabled tags will appear faded and won't respond to clicks or keyboard input.
+ *
+ * ```html
+ * <sigvelo-checkbox-group label="Options" style="--gap: .5em;">
+ *   <sigvelo-toggle-tag name="options" value="option1">Option 1</sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="options" value="option2" disabled>Option 2</sigvelo-toggle-tag>
+ *   <sigvelo-toggle-tag name="options" value="option3">Option 3</sigvelo-toggle-tag>
+ * </sigvelo-checkbox-group>
+ * ```
+ *
+ * @example Handling form submission
+ * Toggle tags are form-associated custom elements that behave like native checkboxes when submitting forms. When a toggle tag is checked, its `name` and `value` attributes are included in the form data, just like a standard checkbox.
+ *
+ * ```html
+ * <form id="toggle-tag__form" action="about:blank" target="_blank">
+ *   <sigvelo-checkbox-group label="Languages" style="--gap: .5em; margin-bottom: 1.5rem;">
+ *     <sigvelo-toggle-tag name="languages" value="cpp">C++</sigvelo-toggle-tag>
+ *     <sigvelo-toggle-tag name="languages" value="go">Go</sigvelo-toggle-tag>
+ *     <sigvelo-toggle-tag name="languages" value="javascript" checked>JavaScript</sigvelo-toggle-tag>
+ *     <sigvelo-toggle-tag name="languages" value="php">PHP</sigvelo-toggle-tag>
+ *     <sigvelo-toggle-tag name="languages" value="python">Python</sigvelo-toggle-tag>
+ *     <sigvelo-toggle-tag name="languages" value="qb">QBasic</sigvelo-toggle-tag>
+ *     <sigvelo-toggle-tag name="languages" value="rust">Rust</sigvelo-toggle-tag>
+ *   </sigvelo-checkbox-group>
+ *
+ *   <sigvelo-button type="submit">Submit</sigvelo-button>
+ * </form>
+ * ```
+ */
+declare class SigveloToggleTag extends SigveloFormControlElement {
+  static formAssociated: boolean;
+  static styles: CSSResultGroup;
+  protected get focusableAnchor(): HTMLInputElement;
+  private checkbox;
+  isInvalid: boolean;
+  hadUserInteraction: boolean;
+  wasSubmitted: boolean;
+  /**
+   * The toggle tag's label. If you need to provide HTML in the label, use the `label` slot instead.
+   */
+  label: string;
+  /** The name of the toggle tag. This will be submitted with the form as a name/value pair. */
+  name: string;
+  /** The toggle tag's value. */
+  value: string;
+  /** The toggle tag's checked state. */
+  checked: boolean;
+  /** Disables the toggle tag. */
+  disabled: boolean;
+  /** The toggle tag's size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  /**
+   * The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
+   * this attribute must be an ID of a form in the same document or shadow root.
+   */
+  form: string;
+  /**
+   * Makes the toggle tag required. Form submission will not be allowed until the toggle tag is checked.
+   */
+  required: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** @internal Called when a containing fieldset is disabled. */
+  formDisabledCallback(isDisabled: boolean): void;
+  /** @internal Called when the form is reset. */
+  formResetCallback(): void;
+  private handleClick;
+  private handleBlur;
+  private handleChange;
+  private handleInput;
+  private handleFocus;
+  private handleHostInvalid;
+  /** Sets the form control's validity */
+  private updateValidity;
+  /** Sets focus to the toggle tag. */
+  focus(): void;
+  /** Removes focus from the toggle tag. */
+  blur(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-toggle-tag": SigveloToggleTag;
+  }
+}
+//#endregion
+export { SigveloToggleTag as t };