@mcp-b/web-components 0.2.0

package/dist/switch-CPaEKbog.js

@@ -0,0 +1,581 @@
+import "./icon-BPVkNsY4.js";
+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/switch/switch.styles.ts
+var switch_styles_default = css`
+  :host {
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    gap: 0.5em;
+  }
+
+  /* Sizes */
+  :host([size="xs"]) {
+    font-size: var(--sigvelo-control-text-xs);
+  }
+
+  :host([size="sm"]) {
+    font-size: var(--sigvelo-control-text-sm);
+  }
+
+  :host([size="md"]) {
+    font-size: var(--sigvelo-control-text-md);
+  }
+
+  :host([size="lg"]) {
+    font-size: var(--sigvelo-control-text-lg);
+  }
+
+  :host([size="xl"]) {
+    font-size: var(--sigvelo-control-text-xl);
+  }
+
+  /* The switch's label */
+  #label {
+    display: contents; /* Makes children participate in the grid */
+    cursor: pointer;
+  }
+
+  :host(:state(disabled)) #label {
+    cursor: not-allowed;
+  }
+
+  #visual-box {
+    --height: 1.5em;
+    --width: calc(var(--height) * 2);
+    --thumb-size: calc(var(--height) - 0.25em);
+    --thumb-padding: calc((var(--height) - var(--thumb-size)) / 2);
+    display: flex;
+    position: relative;
+    grid-row: 1;
+    grid-column: 1;
+    flex: 0 0 auto;
+    align-items: center;
+    align-self: center; /* Vertically center with label text */
+    width: var(--width);
+    height: var(--height);
+    border-radius: var(--sigvelo-radius-full);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    transition:
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) border-color ease;
+
+    &.checked {
+      border-color: transparent;
+      background-color: var(--sigvelo-color-primary-bg);
+    }
+
+    &:has(:focus-visible) {
+      outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+        var(--sigvelo-color-focus);
+      outline-offset: var(--sigvelo-border-width);
+    }
+
+    /* Thumb */
+    #thumb {
+      position: absolute;
+      top: calc(50% - (var(--thumb-size) / 2));
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+      border-radius: var(--sigvelo-radius-full);
+      background-color: var(--sigvelo-color-canvas);
+      transition:
+        var(--sigvelo-motion-duration-interaction) width ease,
+        var(--sigvelo-motion-duration-interaction) left ease,
+        var(--sigvelo-motion-duration-interaction) right ease;
+
+      &:dir(ltr) {
+        left: var(--thumb-padding);
+      }
+
+      &:dir(rtl) {
+        right: var(--thumb-padding);
+      }
+    }
+
+    &.checked #thumb {
+      &:dir(ltr) {
+        left: calc(100% - var(--thumb-size) - var(--thumb-padding));
+      }
+
+      &:dir(rtl) {
+        right: calc(100% - var(--thumb-size) - var(--thumb-padding));
+      }
+    }
+
+    /* Stretch the thumb when active */
+    &:active:not(.disabled) #thumb {
+      width: calc(var(--thumb-size) * 1.25);
+    }
+
+    &.checked:not(.disabled):active #thumb {
+      &:dir(ltr) {
+        left: calc(100% - calc(var(--thumb-size) * 1.25) - var(--thumb-padding));
+      }
+
+      &:dir(rtl) {
+        right: calc(100% - calc(var(--thumb-size) * 1.25) - var(--thumb-padding));
+      }
+    }
+
+    /* Inner labels */
+    #on-label,
+    #off-label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 50%;
+      overflow: hidden;
+      font-weight: var(--sigvelo-font-weight-semibold);
+      font-size: 0.625em;
+      text-transform: uppercase;
+      white-space: nowrap;
+      transition:
+        var(--sigvelo-motion-duration-interaction) opacity ease,
+        var(--sigvelo-motion-duration-interaction) translate ease;
+
+      ::slotted(sigvelo-icon) {
+        font-size: 1.75em;
+      }
+    }
+
+    #on-label {
+      margin-inline-start: calc(var(--thumb-padding) * 2);
+      color: var(--sigvelo-color-primary-text-on-bg);
+    }
+
+    #off-label {
+      margin-inline-end: calc(var(--thumb-padding) * 2);
+      color: var(--sigvelo-color-primary-text-on-subtle);
+    }
+
+    &:not(.checked) #on-label {
+      opacity: 0;
+
+      &:dir(ltr) {
+        translate: 50%;
+      }
+
+      &:dir(rtl) {
+        translate: -50%;
+      }
+    }
+
+    &.checked #off-label {
+      opacity: 0;
+
+      &:dir(ltr) {
+        translate: -50%;
+      }
+
+      &:dir(rtl) {
+        translate: 50%;
+      }
+    }
+
+    /* The actual checkbox control */
+    #switch {
+      appearance: none;
+      z-index: 1;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: none;
+      cursor: inherit;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  /* Label slot content */
+  #label > slot {
+    grid-row: 1;
+    grid-column: 2;
+  }
+
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  #description {
+    display: block;
+    grid-row: 2;
+    grid-column: 2;
+    margin-block-start: -0.5em;
+    color: var(--sigvelo-color-text-muted);
+    font-size: max(12px, 0.875em); /* never smaller than 12px */
+  }
+`;
+//#endregion
+//#region src/components/switch/switch.ts
+/**
+* <sigvelo-switch>
+*
+* @summary Allows the user to toggle between two mutually exclusive states, such as on and off.
+* @tag sigvelo-switch
+* @documentation https://design-system.sigvelo.com/docs/components/switch
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot - The switch's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The switch's description. For plain-text descriptions, you can use the `description` attribute
+*  instead.
+* @slot off-label - The label to show when the switch is off.
+* @slot on-label - The label to show when the switch is on.
+*
+* @event sigvelo-blur - Emitted when the switch loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the switch's value.
+* @event sigvelo-focus - Emitted when the switch receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the switch receives input.
+*
+* @csspart label - The `<label>` that wraps the entire control.
+* @csspart description - The element that contains the switch's description.
+* @csspart visual-box - The element that wraps the internal switch.
+* @csspart switch - The internal switch, an `<input type="checkbox" role="switch">` element.
+* @csspart thumb - The switch's thumb.
+* @csspart on-label - The container wrapping the `on-label`.
+* @csspart off-label - The container wrapping the `off-label`.
+*
+* @cssstate disabled - Applied when the switch is disabled.
+* @cssstate focused - Applied when the switch has focus.
+* @cssstate user-valid - Applied when the switch is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the switch is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* ```html
+* <sigvelo-switch name="mode" value="kitten">Kitten mode</sigvelo-switch>
+* ```
+*
+* @example Labels and descriptions
+* The switch's label is provided via its default slot. You can use the `description` attribute to provide a plain text description. If you want to provide HTML, use the `description` slot instead.
+*
+* ```html
+* <sigvelo-switch name="notifications" value="enabled">
+*   Enable notifications
+*   <span slot="description">
+*     Get updates when your cat takes a nap. <a href="#">Learn more</a>
+*   </span>
+* </sigvelo-switch>
+* ```
+*
+* @example Checked initially
+* Add the `checked` attribute to check the switch initially.
+*
+* ```html
+* <sigvelo-switch name="mode" value="kitten" checked>Kitten mode</sigvelo-switch>
+* ```
+*
+*
+* Use the `on` and `off` slots to show inner labels or icons that align with the switch's checked state. Space is very limited, so make sure the labels are short enough to fit.
+*
+* ```html
+* <sigvelo-switch name="mode" value="kitten">
+*   Kitten mode
+*   <span slot="on-label">on</span>
+*   <span slot="off-label">off</span>
+* </sigvelo-switch>
+*
+* <sigvelo-switch name="mode" value="kitten">
+*   Kitten mode
+*   <sigvelo-icon slot="on-label" name="check" label="On"></sigvelo-icon>
+*   <sigvelo-icon slot="off-label" name="x" label="Off"></sigvelo-icon>
+* </sigvelo-switch>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the text field's size.
+*
+* ```html
+* <sigvelo-switch size="xs">Extra small</sigvelo-switch>
+* <sigvelo-switch size="sm">Small</sigvelo-switch>
+* <sigvelo-switch size="md">Medium</sigvelo-switch>
+* <sigvelo-switch size="lg">Large</sigvelo-switch>
+* <sigvelo-switch size="xl">Extra large</sigvelo-switch>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the switch.
+*
+* ```html
+* <sigvelo-switch disabled>Unchecked and disabled</sigvelo-switch><br>
+* <sigvelo-switch checked disabled>Checked and disabled</sigvelo-switch>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the switch is checked.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
+*   <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 switch 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="switch__custom-validation">
+*   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
+*   <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('switch__custom-validation');
+*   const toggle = form.querySelector('sigvelo-switch');
+*
+*   toggle.setCustomValidity('Have you taken a nap first?');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid switches using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="switch__validation-pseudo">
+*   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .switch__validation-pseudo {
+*     sigvelo-switch:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-switch: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="switch__validation-custom">
+*   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .switch__validation-custom {
+*     sigvelo-switch:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-switch:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloSwitch = 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.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, switch_styles_default];
+	}
+	get focusableAnchor() {
+		return this.switch;
+	}
+	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("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());
+	}
+	handleKeyUp(event) {
+		if (event.key === "Enter" && !this.disabled) this.handleClick();
+	}
+	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.switch.validationMessage;
+		const flags = {
+			customError: hasCustomValidity,
+			valueMissing: this.switch.validity.valueMissing
+		};
+		this.isInvalid = hasCustomValidity ? true : !this.switch.validity.valid;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	/** Sets focus to the switch. */
+	focus() {
+		this.switch.focus();
+	}
+	/** Removes focus from the switch. */
+	blur() {
+		this.switch.blur();
+	}
+	render() {
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		return html`
+      <label part="label" id="label">
+        <div
+          id="visual-box"
+          part="visual-box"
+          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="switch"
+            part="switch"
+            type="checkbox"
+            value=${ifDefined(this.value)}
+            role="switch"
+            aria-checked=${this.checked ? "true" : "false"}
+            aria-describedby="description"
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            @change=${this.handleChange}
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @keyup=${this.handleKeyUp}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          />
+          <span id="on-label" part="on-label"><slot name="on-label"></slot></span>
+          <span id="off-label" part="off-label"><slot name="off-label"></slot></span>
+          <span id="thumb" part="thumb"></span>
+        </div>
+        <slot>${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("input[type=\"checkbox\"]")], SigveloSwitch.prototype, "switch", void 0);
+__decorate([state()], SigveloSwitch.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloSwitch.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloSwitch.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloSwitch.prototype, "label", void 0);
+__decorate([property()], SigveloSwitch.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloSwitch.prototype, "name", void 0);
+__decorate([property()], SigveloSwitch.prototype, "value", void 0);
+__decorate([property({ type: Boolean })], SigveloSwitch.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSwitch.prototype, "disabled", void 0);
+__decorate([property()], SigveloSwitch.prototype, "size", void 0);
+__decorate([property()], SigveloSwitch.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSwitch.prototype, "required", void 0);
+customElements.define("sigvelo-switch", SigveloSwitch);
+//#endregion
+export { SigveloSwitch as t };