@mcp-b/web-components 0.2.0

package/dist/checkbox-D6r7PVPj.js

@@ -0,0 +1,641 @@
+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/checkbox/checkbox.styles.ts
+var checkbox_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 checkbox's label */
+  #label {
+    display: contents; /* Makes children participate in the grid */
+    cursor: pointer;
+  }
+
+  :host(:state(disabled)) #label {
+    cursor: not-allowed;
+  }
+
+  #visual-box {
+    display: flex;
+    position: relative;
+    grid-row: 1;
+    grid-column: 1;
+    flex: 0 0 auto;
+    align-self: center; /* Vertically center with label text */
+    width: 1.125em;
+    height: 1.125em;
+    border-radius: var(--sigvelo-radius-sm);
+    transition:
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) border-color ease;
+
+    &:has(:focus-visible) {
+      outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+        var(--sigvelo-color-focus);
+      outline-offset: var(--sigvelo-border-width);
+    }
+
+    /* Normal */
+    &.normal {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-neutral-border-muted);
+      background-color: var(--sigvelo-color-surface);
+      color: var(--sigvelo-color-primary-text-on-bg);
+
+      &.checked,
+      &.indeterminate {
+        border-color: var(--sigvelo-color-primary-bg);
+        background-color: var(--sigvelo-color-primary-bg);
+      }
+    }
+
+    /* Filled */
+    &.filled {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-neutral-bg-muted);
+      background-color: var(--sigvelo-color-neutral-bg-muted);
+      color: var(--sigvelo-color-primary-text-on-bg);
+
+      &.checked,
+      &.indeterminate {
+        border-color: var(--sigvelo-color-primary-bg);
+        background-color: var(--sigvelo-color-primary-bg);
+      }
+    }
+
+    /* Check + indeterminate icons */
+    #check-icon,
+    #indeterminate-icon {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      scale: 0;
+      font-size: 1.25em;
+      opacity: 0;
+      stroke-width: 0.125em;
+      transition:
+        var(--sigvelo-motion-duration-interaction) opacity ease,
+        var(--sigvelo-motion-duration-interaction) scale ease;
+      will-change: opacity; /* prevents the icon from shifting slightly in Safari when checked */
+    }
+
+    /* Fix check alignment */
+    #check-icon {
+      margin-inline: -0.5px;
+    }
+
+    &.checked:not(.indeterminate) #check-icon,
+    &.indeterminate #indeterminate-icon {
+      scale: 1;
+      opacity: 1;
+    }
+
+    /* The actual checkbox control */
+    #checkbox {
+      appearance: none;
+      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/checkbox/checkbox.ts
+/**
+* <sigvelo-checkbox>
+*
+* @summary Allows users to select one or more options from a list or toggle single options on and off.
+* @tag sigvelo-checkbox
+* @documentation https://design-system.sigvelo.com/docs/components/checkbox
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot - The checkbox's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The checkbox's description. For plain-text descriptions, you can use the `description` attribute
+*  instead.
+*
+* @event sigvelo-blur - Emitted when the checkbox loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the checkbox'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 label - The `<label>` that wraps the entire control.
+* @csspart description - The element that contains the checkbox's description.
+* @csspart visual-box - The element that wraps the internal checkbox.
+* @csspart check-icon - The check icon, a `<sigvelo-icon>` element.
+* @csspart check-icon__svg - The check icon's `svg` part.
+* @csspart indeterminate-icon - The indeterminate icon, a `<sigvelo-icon>` element.
+* @csspart indeterminate-icon__svg - The indeterminate icon's `<svg>` part.
+*
+* @cssstate checked - Applied when the checkbox is checked.
+* @cssstate disabled - Applied when the checkbox is disabled.
+* @cssstate focused - Applied when the checkbox has focus.
+* @cssstate user-valid - Applied when the checkbox is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the checkbox is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* ```html
+* <sigvelo-checkbox name="feed" value="yes">I will feed the cats</sigvelo-checkbox>
+* ```
+*
+* @example Labels and descriptions
+* The checkbox'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-checkbox name="terms" value="accepted">
+*   I agree to the terms and conditions
+*   <span slot="description">
+*     By checking this box, you agree to our <a href="#">catnip usage policy</a>
+*   </span>
+* </sigvelo-checkbox>
+* ```
+*
+* @example Checked initially
+* Add the `checked` attribute to check the checkbox initially.
+*
+* ```html
+* <sigvelo-checkbox name="feed" value="yes" checked>I will feed the cats</sigvelo-checkbox>
+* ```
+*
+* @example Filled checkboxes
+* Set the `variant` attribute to `filled` to change the checkbox's variant.
+*
+* ```html
+* <sigvelo-checkbox variant="filled">Filled checkbox</sigvelo-checkbox>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the checkbox's size.
+*
+* ```html
+* <sigvelo-checkbox size="xs">Extra small</sigvelo-checkbox><br>
+* <sigvelo-checkbox size="sm">Small</sigvelo-checkbox><br>
+* <sigvelo-checkbox size="md">Medium</sigvelo-checkbox><br>
+* <sigvelo-checkbox size="lg">Large</sigvelo-checkbox><br>
+* <sigvelo-checkbox size="xl">Extra large</sigvelo-checkbox>
+* ```
+*
+* @example Indeterminate
+* Use the `indeterminate` attribute to put the checkbox in an indeterminate state. This can be used to show a mixed selection in a group of "child" checkboxes.
+*
+* ```html
+* <sigvelo-checkbox indeterminate>Indeterminate</sigvelo-checkbox>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the checkbox.
+*
+* ```html
+* <sigvelo-checkbox disabled>Unchecked and disabled</sigvelo-checkbox><br>
+* <sigvelo-checkbox checked disabled>Checked and disabled</sigvelo-checkbox><br>
+* <sigvelo-checkbox indeterminate disabled>Indeterminate and disabled</sigvelo-checkbox>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the checkbox is checked.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-checkbox name="feed" value="yes" required>I will feed the cats</sigvelo-checkbox>
+*   <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 checkbox 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="checkbox__custom-validation">
+*   <sigvelo-checkbox name="feed" value="yes" required>I will feed the cats</sigvelo-checkbox>
+*   <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('checkbox__custom-validation');
+*   const checkbox = form.querySelector('sigvelo-checkbox');
+*
+*   checkbox.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid checkboxes using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="checkbox__validation-pseudo">
+*   <sigvelo-checkbox name="feed" value="yes" required>I will feed the cats</sigvelo-checkbox>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .checkbox__validation-pseudo {
+*     sigvelo-checkbox:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-checkbox: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="checkbox__validation-custom">
+*   <sigvelo-checkbox name="feed" value="yes" required>I will feed the cats</sigvelo-checkbox>
+*   <br><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .checkbox__validation-custom {
+*     sigvelo-checkbox:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-checkbox:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Styling checkboxes
+* Checkboxes come with a simple, minimal appearance. Feel free to customize them with your own styles. Here's a quick way to turn a checkbox into a selectable tile.
+*
+* ```html
+* <sigvelo-checkbox checked class="checkbox__tile">
+*   <sigvelo-icon name="ball-basketball"></sigvelo-icon>
+*   <span>Basketball</span>
+* </sigvelo-checkbox>
+*
+* <sigvelo-checkbox class="checkbox__tile">
+*   <sigvelo-icon name="ball-american-football"></sigvelo-icon>
+*   <span>Football</span>
+* </sigvelo-checkbox>
+*
+* <sigvelo-checkbox class="checkbox__tile">
+*   <sigvelo-icon name="ping-pong"></sigvelo-icon>
+*   <span>Ping-pong</span>
+* </sigvelo-checkbox>
+*
+* <style>
+*   .checkbox__tile {
+*     position: relative;
+*     border: solid 1px var(--sigvelo-color-neutral-border-muted);
+*     border-radius: var(--sigvelo-radius-md);
+*     box-shadow: var(--sigvelo-elevation-hairline);
+*
+*     &::part(label) {
+*       display: flex;
+*       flex-direction: column;
+*       gap: .5rem;
+*       padding: 2rem 1.5rem .5rem 1.5rem;
+*     }
+*
+*     &::part(visual-box) {
+*       position: absolute;
+*       top: 0.5rem;
+*       left: 0.5rem;
+*     }
+*
+*     sigvelo-icon {
+*       font-size: 4rem;
+*       stroke-width: .75px;
+*     }
+*
+*     span {
+*       font-size: .875rem;
+*       color: var(--sigvelo-color-primary-text-on-subtle);
+*     }
+*
+*     &:state(checked) {
+*       background-color: var(--sigvelo-color-primary-bg-subtle);
+*       border-color: var(--sigvelo-color-primary-border);
+*     }
+*   }
+* </style>
+* ```
+*
+* ```html
+* <sigvelo-checkbox checked class="checkbox__image">
+*   <img draggable="false" src="https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray kitten plays with a blue toy mouse">
+* </sigvelo-checkbox>
+*
+* <sigvelo-checkbox class="checkbox__image">
+*   <img draggable="false" src="https://images.unsplash.com/photo-1597239351814-a5f03b4663c0?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray kitten practices prowling on a brown floor">
+* </sigvelo-checkbox>
+*
+* <sigvelo-checkbox class="checkbox__image">
+*   <img draggable="false" src="https://images.unsplash.com/photo-1503844281047-cf42eade5ca5?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray kitten looks at the camera from behind a tree">
+* </sigvelo-checkbox>
+*
+* <style>
+*   .checkbox__image {
+*     isolation: isolate;
+*     position: relative;
+*
+*     img {
+*       display: block;
+*       width: 150px;
+*       height: 150px;
+*       object-fit: cover;
+*       border-radius: .25rem;
+*     }
+*
+*     &::part(visual-box) {
+*       position: absolute;
+*       bottom: .5rem;
+*       left: .5rem;
+*       width: 1.5rem;
+*       height: 1.5rem;
+*       border: none;
+*       background-color: color-mix(in oklab, black, transparent 50%);
+*     }
+*
+*     &:state(checked)::part(visual-box) {
+*       background-color: var(--sigvelo-color-primary-bg);
+*     }
+*
+*     &::part(check-icon) {
+*       scale: .75;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Warning:** It's not recommended to hide the checkbox unless your styles make it very clear to users that the control is checkable.
+*/
+var SigveloCheckbox = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = "";
+		this.checked = false;
+		this.indeterminate = false;
+		this.disabled = false;
+		this.variant = "normal";
+		this.size = "md";
+		this.required = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, checkbox_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;
+		this.indeterminate = false;
+	}
+	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 checkbox. */
+	focus() {
+		this.checkbox.focus();
+	}
+	/** Removes focus from the checkbox. */
+	blur() {
+		this.checkbox.blur();
+	}
+	render() {
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		return html`
+      <label id="label" part="label">
+        <div
+          id="visual-box"
+          part="visual-box"
+          class=${classMap({
+			normal: this.variant === "normal",
+			filled: this.variant === "filled",
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			checked: this.checked,
+			indeterminate: this.indeterminate,
+			disabled: this.disabled,
+			required: this.required
+		})}
+        >
+          <input
+            id="checkbox"
+            type="checkbox"
+            value=${ifDefined(this.value)}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            aria-describedby="description"
+            @change=${this.handleChange}
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          />
+          <sigvelo-icon
+            id="check-icon"
+            part="check-icon"
+            exportparts="svg:check-icon__svg"
+            library="system"
+            name="check"
+          ></sigvelo-icon>
+          <sigvelo-icon
+            id="indeterminate-icon"
+            part="indeterminate-icon"
+            exportparts="svg:indeterminate-icon__svg"
+            library="system"
+            name="minus"
+          ></sigvelo-icon>
+        </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\"]")], SigveloCheckbox.prototype, "checkbox", void 0);
+__decorate([state()], SigveloCheckbox.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloCheckbox.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloCheckbox.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloCheckbox.prototype, "label", void 0);
+__decorate([property()], SigveloCheckbox.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloCheckbox.prototype, "name", void 0);
+__decorate([property()], SigveloCheckbox.prototype, "value", void 0);
+__decorate([property({ type: Boolean })], SigveloCheckbox.prototype, "checked", void 0);
+__decorate([property({ type: Boolean })], SigveloCheckbox.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCheckbox.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloCheckbox.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloCheckbox.prototype, "size", void 0);
+__decorate([property()], SigveloCheckbox.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCheckbox.prototype, "required", void 0);
+customElements.define("sigvelo-checkbox", SigveloCheckbox);
+//#endregion
+export { SigveloCheckbox as t };