@mcp-b/web-components 0.2.0

package/dist/checkbox-DoFcDEKB.d.ts

@@ -0,0 +1,354 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/checkbox/checkbox.d.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.
+ */
+declare class SigveloCheckbox extends SigveloFormControlElement {
+  static formAssociated: boolean;
+  static observeSlots: boolean;
+  static styles: CSSResultGroup;
+  protected get focusableAnchor(): HTMLInputElement;
+  private checkbox;
+  isInvalid: boolean;
+  hadUserInteraction: boolean;
+  wasSubmitted: boolean;
+  /**
+   * The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead.
+   */
+  label: string;
+  /** The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead. */
+  description: string;
+  /** The name of the checkbox. This will be submitted with the form as a name/value pair. */
+  name: string;
+  /** The checkbox's value. */
+  value: string;
+  /** The checkbox's checked state. */
+  checked: boolean;
+  /** Puts the checkbox in an indeterminate state. */
+  indeterminate: boolean;
+  /** Disables the checkbox. */
+  disabled: boolean;
+  /** The type of checkbox to render. */
+  variant: "normal" | "filled";
+  /** The checkbox'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 checkbox required. Form submission will not be allowed until the checkbox 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 checkbox. */
+  focus(): void;
+  /** Removes focus from the checkbox. */
+  blur(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-checkbox": SigveloCheckbox;
+  }
+}
+//#endregion
+export { SigveloCheckbox as t };

package/dist/checkbox-group-CLvNAO_F.js

@@ -0,0 +1,201 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+//#region src/components/checkbox-group/checkbox-group.styles.ts
+var checkbox_group_styles_default = css`
+  :host {
+    --gap: 1rem;
+  }
+
+  #group {
+    display: flex;
+    margin-block-start: 0.5rem;
+  }
+
+  :host([orientation="horizontal"]) #group {
+    flex-wrap: wrap;
+    gap: var(--gap);
+  }
+
+  :host([orientation="vertical"]) #group {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+`;
+//#endregion
+//#region src/components/checkbox-group/checkbox-group.ts
+/**
+* <sigvelo-checkbox-group>
+*
+* @summary Attaches a label and description to a group of related checkboxes or switches.
+* @tag sigvelo-checkbox-group
+* @documentation https://design-system.sigvelo.com/docs/components/checkbox-group
+* @status stable
+* @since 1.0
+*
+* @slot - The checkboxes to place in the group.
+* @slot label - 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.
+*
+* @csspart label - The element that contains the checkbox group's label.
+* @csspart description - The element that contains the checkbox group's description.
+* @csspart group - The element that wraps the grouped checkboxes.
+*
+* @cssproperty [--gap=1em] - The gap between checkboxes.
+*
+* @example Default
+* You can use checkboxes without grouping them but, when you want to apply a label and description to a group of related checkboxes, this component will come in handy.
+*
+* You can also use checkbox groups with toggle icons and toggle tags.
+*
+* ```html
+* <sigvelo-checkbox-group label="Things for the cats" description="Select as few or as many as you'd like.">
+*   <sigvelo-checkbox name="catnip">Catnip</sigvelo-checkbox>
+*   <sigvelo-checkbox name="food">Food</sigvelo-checkbox>
+*   <sigvelo-checkbox name="litter">Litter</sigvelo-checkbox>
+*   <sigvelo-checkbox name="treats">Treats</sigvelo-checkbox>
+* </sigvelo-checkbox-group>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the checkbox group. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-checkbox-group label="Things for the cats">
+*   <span slot="description">
+*     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
+*   </span>
+*   <sigvelo-checkbox name="catnip">Catnip</sigvelo-checkbox>
+*   <sigvelo-checkbox name="food">Food</sigvelo-checkbox>
+*   <sigvelo-checkbox name="litter">Litter</sigvelo-checkbox>
+*   <sigvelo-checkbox name="treats">Treats</sigvelo-checkbox>
+* </sigvelo-checkbox-group>
+* ```
+*
+* @example Changing the orientation
+* To stack checkboxes on top of each other instead of side by side, set the `orientation` attribute to `vertical`.
+*
+* ```html
+* <sigvelo-checkbox-group label="Places to hide" orientation="vertical">
+*   <sigvelo-checkbox name="couch">Behind the couch</sigvelo-checkbox>
+*   <sigvelo-checkbox name="backyard">In the backyard</sigvelo-checkbox>
+*   <sigvelo-checkbox name="fridge">On top of the refrigerator</sigvelo-checkbox>
+*   <sigvelo-checkbox name="bed">Under the bed</sigvelo-checkbox>
+* </sigvelo-checkbox-group>
+* ```
+*
+* @example Grouping switches
+* You can also group switches in a checkbox group. For best results, avoid mixing checkboxes and switches in the same group.
+*
+* ```html
+* <sigvelo-checkbox-group
+*   label="Remote control kitty"
+*   description="Toggle an option and watch your cat react instantly!"
+* >
+*   <sigvelo-switch name="eating">Eating</sigvelo-switch>
+*   <sigvelo-switch name="hiding">Hiding</sigvelo-switch>
+*   <sigvelo-switch name="purring">Purring</sigvelo-switch>
+*   <sigvelo-switch name="sleeping">Sleeping</sigvelo-switch>
+* </sigvelo-checkbox-group>
+* ```
+*
+* @example Adding a required indicator
+* Use the `required` attribute to show a required indicator in the checkbox group's label. This just adds a visual indicator. To perform validation, use the checkbox's `required` attribute and/or `setCustomValidity()` method.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="checkbox-group__required">
+*   <sigvelo-checkbox-group
+*     label="Things for the cats"
+*     description="Please select at least two items."
+*     required
+*   >
+*     <sigvelo-checkbox name="catnip">Catnip</sigvelo-checkbox>
+*     <sigvelo-checkbox name="food">Food</sigvelo-checkbox>
+*     <sigvelo-checkbox name="litter">Litter</sigvelo-checkbox>
+*     <sigvelo-checkbox name="treats">Treats</sigvelo-checkbox>
+*   </sigvelo-checkbox-group>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('checkbox-group__required');
+*   const checkboxes = form.querySelectorAll('sigvelo-checkbox');
+*   const firstCheckbox = checkboxes[0];
+*   const validationMessage = 'Select at least two items before continuing.';
+*
+*   firstCheckbox.setCustomValidity(validationMessage);
+*
+*   // Listen for checkboxes to be checked
+*   form.addEventListener('sigvelo-input', () => {
+*     const numChecked = [...checkboxes].filter(checkbox => checkbox.checked).length;
+*
+*     // If less than two are checked, set the custom validation message. Otherwise, remove it.
+*     if (numChecked < 2) {
+*       firstCheckbox.setCustomValidity(validationMessage);
+*     } else {
+*       firstCheckbox.setCustomValidity('');
+*     }
+*   });
+* <\/script>
+* ```
+*/
+var SigveloCheckboxGroup = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "horizontal";
+		this.required = false;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			checkbox_group_styles_default
+		];
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		return html`
+      <label id="label" part="label" for="text-box" class=${classMap({ vh: !hasLabel })}>
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+
+      <div
+        id="group"
+        part="group"
+        role="group"
+        aria-labelledby="label"
+        aria-describedby="description"
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property()], SigveloCheckboxGroup.prototype, "label", void 0);
+__decorate([property()], SigveloCheckboxGroup.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloCheckboxGroup.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloCheckboxGroup.prototype, "required", void 0);
+customElements.define("sigvelo-checkbox-group", SigveloCheckboxGroup);
+//#endregion
+export { SigveloCheckboxGroup as t };