@mcp-b/web-components 0.2.0

package/dist/switch-Cief9M59.d.ts

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

package/dist/tab-BcqYGsuW.d.ts

@@ -0,0 +1,44 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/tab/tab.d.ts
+/**
+ * <sigvelo-tab>
+ *
+ * @summary Describes and selects a tab panel within a tab list.
+ * @tag sigvelo-tab
+ * @documentation https://design-system.sigvelo.com/docs/components/tab
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The tab's content. This is usually a short label, but sometimes includes an icon.
+ *
+ * @cssstate active - Applied when the tab is selected.
+ * @cssstate disabled - Applied when the tab is selected.
+ *
+ * @example Default
+ * This component must only be used within a tab list. You can see some examples of tabs being used in the tab list documentation.
+ */
+declare class SigveloTab extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** @internal The controller will set this property to true when the tab is active. */
+  active: boolean;
+  /**
+   * The name of the tab panel this tab will link to. The tab panel must be an HTML element inside the
+   * `<sigvelo-tab-list>` element with a `name` attribute.
+   */
+  panel?: string;
+  /** Disables the tab, preventing it from being activated. */
+  disabled: boolean;
+  firstUpdated(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-tab": SigveloTab;
+  }
+}
+//#endregion
+export { SigveloTab as t };

package/dist/tab-C-FtuNmh.js

@@ -0,0 +1,102 @@
+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";
+//#region src/components/tab/tab.styles.ts
+var tab_styles_default = css`
+  :host {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    align-self: stretch;
+    padding-inline: 1.5em;
+    padding-block: 1em;
+    gap: 0.5em;
+    font-weight: var(--sigvelo-font-weight-semibold);
+    font-size: 0.9375em;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :host(:focus-visible) {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(var(--sigvelo-focus-width) * -1) !important;
+  }
+
+  :host([aria-selected="true"]) {
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+//#endregion
+//#region src/components/tab/tab.ts
+/**
+* <sigvelo-tab>
+*
+* @summary Describes and selects a tab panel within a tab list.
+* @tag sigvelo-tab
+* @documentation https://design-system.sigvelo.com/docs/components/tab
+* @status stable
+* @since 1.0
+*
+* @slot - The tab's content. This is usually a short label, but sometimes includes an icon.
+*
+* @cssstate active - Applied when the tab is selected.
+* @cssstate disabled - Applied when the tab is selected.
+*
+* @example Default
+* This component must only be used within a tab list. You can see some examples of tabs being used in the tab list documentation.
+*/
+var SigveloTab = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.active = false;
+		this.disabled = false;
+	}
+	static {
+		this.styles = [hostStyles, tab_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "tab");
+		this.setAttribute("aria-selected", "false");
+		this.setAttribute("aria-disabled", "false");
+		this.setAttribute("tabindex", "-1");
+		this.setAttribute("slot", "tab");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.active = false;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("active")) {
+			this.setAttribute("aria-selected", this.active ? "true" : "false");
+			this.setAttribute("tabindex", this.active ? "0" : "-1");
+			this.customStates.set("active", this.active);
+		}
+		if (changedProperties.has("disabled")) {
+			this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+			this.customStates.set("disabled", this.disabled);
+			if (this.active && this.disabled) {
+				this.active = false;
+				this.closest("sigvelo-tab-list")?.resetRovingTabIndex();
+			}
+		}
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ type: Boolean })], SigveloTab.prototype, "active", void 0);
+__decorate([property({ reflect: true })], SigveloTab.prototype, "panel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloTab.prototype, "disabled", void 0);
+customElements.define("sigvelo-tab", SigveloTab);
+//#endregion
+export { SigveloTab as t };