@mcp-b/web-components 0.2.0

package/dist/combobox-item-yM6tDrGG.js

@@ -0,0 +1,225 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query } 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";
+//#region src/components/combobox-item/combobox-item.styles.ts
+var combobox_item_styles_default = css`
+  :host {
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding: 0.33em 1em;
+    border-radius: var(--sigvelo-radius-sm);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    font-size: 0.9375em;
+    line-height: var(--sigvelo-leading-relaxed);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* Disabled state */
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* Hover state for non-selected items */
+  @media (hover: hover) {
+    :host(:hover:not(:state(disabled))) {
+      background-color: var(--sigvelo-color-neutral-bg-subtle);
+      color: var(--sigvelo-color-neutral-text-on-subtle);
+    }
+  }
+
+  /* Active state (keyboard navigation) for non-selected items */
+  :host(:state(active)) {
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+  }
+
+  /* Keyboard focus visible on active items */
+  :host(:state(active)[data-keyboard-nav]) {
+    z-index: 1;
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: var(--sigvelo-focus-offset);
+  }
+
+  /* Checkmark (hidden by default) */
+  .checkmark {
+    visibility: hidden;
+    flex: 0 0 auto;
+    width: fit-content;
+    margin-inline-start: -0.5em;
+    margin-inline-end: 0.25em;
+    color: var(--sigvelo-color-primary-text);
+    font-size: 1.25em;
+    opacity: 0;
+    transition:
+      opacity var(--sigvelo-motion-duration-interaction) ease,
+      visibility var(--sigvelo-motion-duration-interaction) ease;
+
+    /* Show checkmark when selected (works for both single and multiple mode) */
+    &.selected {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  /* Icon slot */
+  .icon {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+  .icon ::slotted(*) {
+    margin-inline-end: 0.5em !important;
+    font-size: 1.25em;
+  }
+
+  /* Label */
+  .label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Details */
+  .details {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: end;
+    margin-inline-start: 2em;
+    color: var(--sigvelo-color-text-muted);
+    font-size: 0.875em;
+  }
+
+  :host(:state(selected)) .details {
+    color: var(--sigvelo-color-text-muted);
+    opacity: 0.8;
+  }
+
+  /* Multiple mode */
+  :host(:has(.multiple)):hover:not(:state(disabled)):not(:state(selected)) {
+    background-color: var(--sigvelo-color-neutral-bg-muted);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+  }
+
+  :host(:has(.multiple)):state(active):not(:state(selected)) {
+    background-color: var(--sigvelo-color-neutral-bg-muted);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+  }
+`;
+//#endregion
+//#region src/components/combobox-item/combobox-item.ts
+/**
+* <sigvelo-combobox-item>
+*
+* @summary An item that can be selected from a combobox control.
+* @tag sigvelo-combobox-item
+* @documentation https://design-system.sigvelo.com/docs/components/combobox-item
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot - The item's label.
+* @slot icon - An optional icon to display at the start of the item.
+* @slot details - Optional details to display at the end of the item.
+*
+* @csspart icon - The container that wraps the icon slot.
+* @csspart label - The container that wraps the item's label.
+* @csspart details - The container that wraps the details slot.
+* @csspart checkmark - The checkmark icon shown when selected in multiple mode.
+*
+* @cssstate selected - Applied when the item is selected.
+* @cssstate disabled - Applied when the item is disabled.
+* @cssstate active - Applied when the item is active (keyboard navigation).
+*
+* @example Default
+* This component must only be used within a combobox. You can see some examples of combobox items being used in the combobox documentation.
+*/
+var SigveloComboboxItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.selected = false;
+		this.active = false;
+		this.combobox = null;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, combobox_item_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "option");
+		this.setAttribute("tabindex", "-1");
+	}
+	/** Gets the text content from the combobox item's label. */
+	getLabelText() {
+		if (this.defaultSlot) return this.defaultSlot.assignedNodes({ flatten: true }).map((node) => node.textContent || "").join("").trim();
+		return this.textContent?.trim() || "";
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("selected")) {
+			this.setAttribute("aria-selected", this.selected ? "true" : "false");
+			this.customStates.set("selected", this.selected);
+		}
+		if (changedProperties.has("disabled")) {
+			this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+			this.customStates.set("disabled", this.disabled);
+		}
+		if (changedProperties.has("active")) this.customStates.set("active", this.active);
+	}
+	render() {
+		const isMultiple = this.combobox?.multiple ?? false;
+		return html`
+      <sigvelo-icon
+        part="checkmark"
+        class=${classMap({
+			checkmark: true,
+			selected: this.selected,
+			multiple: isMultiple
+		})}
+        library="system"
+        name="check"
+      ></sigvelo-icon>
+
+      <span part="icon" class="icon">
+        <slot name="icon"></slot>
+      </span>
+
+      <span part="label" class="label">
+        <slot></slot>
+      </span>
+
+      <span part="details" class="details">
+        <slot name="details"></slot>
+      </span>
+    `;
+	}
+};
+__decorate([query("slot:not([name])")], SigveloComboboxItem.prototype, "defaultSlot", void 0);
+__decorate([property()], SigveloComboboxItem.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloComboboxItem.prototype, "disabled", void 0);
+__decorate([property({ type: Boolean })], SigveloComboboxItem.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloComboboxItem.prototype, "active", void 0);
+__decorate([property({ attribute: false })], SigveloComboboxItem.prototype, "combobox", void 0);
+customElements.define("sigvelo-combobox-item", SigveloComboboxItem);
+//#endregion
+export { SigveloComboboxItem as t };

package/dist/comparison-B1-nMwmp.d.ts

@@ -0,0 +1,134 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/comparison/comparison.d.ts
+/**
+ * <sigvelo-comparison>
+ *
+ * @summary Displays two elements side-by-side with a draggable divider, allowing users to adjust the visible portions
+ * @tag sigvelo-comparison
+ *  for direct visual comparison.
+ * @documentation https://design-system.sigvelo.com/docs/components/comparison
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-icon
+ *
+ * @slot start - The content to show on the left/start side or top side, depending on orientation.
+ * @slot end - The content to show on the right/end side or bottom side, depending on orientation.
+ * @slot handle-icon - A custom icon to use for the divider's handle.
+ *
+ * @event sigvelo-resize - Dispatched when the comparison's handle is moved.
+ *
+ * @csspart start - The container for the start content.
+ * @csspart end - The container for the end content.
+ * @csspart divider - The draggable divider between start and end.
+ * @csspart handle - The visual handle within the divider.
+ *
+ * @cssstate disabled - Applied when the comparison is disabled.
+ * @cssstate dragging - Applied when the divider is being dragged.
+ * @cssstate focused - Applied when the divider has focus.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-comparison>
+ *   <img slot="start" src="https://images.unsplash.com/photo-1671707696618-ca0685b0012e?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange cat smiles up at the camera">
+ *   <img slot="end" src="https://images.unsplash.com/photo-1671707696618-ca0685b0012e?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same orange cat in a grayscale photo">
+ * </sigvelo-comparison>
+ * ```
+ *
+ * @example Providing content
+ * Comparisons are commonly used for images, but you can compare just about any content. Use the `start` and `end` slots to place content on each side of the comparison. For best results, use elements that shares the same dimensions.
+ *
+ * ```html
+ * <sigvelo-comparison style="max-width: 380px;">
+ *   <sigvelo-card slot="start" inert data-theme="light">
+ *     <h3 slot="header">Secret Scientists</h3>
+ *     When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision.
+ *     <sigvelo-button slot="footer" color="primary">Tell me more</sigvelo-button>
+ *     <sigvelo-button slot="footer">I'm skeptical</sigvelo-button>
+ *   </sigvelo-card>
+ *
+ *   <sigvelo-card slot="end" inert data-theme="dark">
+ *     <h3 slot="header">Secret Scientists</h3>
+ *     When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision.
+ *     <sigvelo-button slot="footer" color="primary">Tell me more</sigvelo-button>
+ *     <sigvelo-button slot="footer">I'm skeptical</sigvelo-button>
+ *   </sigvelo-card>
+ * </sigvelo-comparison>
+ * ```
+ *
+ * **Note:** To prevent interactions while comparing, add the [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert) attribute to both slotted elements as shown above.
+ *
+ * @example Setting the initial position
+ * Set the initial position of the comparison using the `position` attribute.
+ *
+ * ```html
+ * <sigvelo-comparison position=".75">
+ *   <img slot="start" src="https://images.unsplash.com/photo-1736593494119-d0a69181b414?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten lays in its bed and cuddles a pillow">
+ *   <img slot="end" src="https://images.unsplash.com/photo-1736593494119-d0a69181b414?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same kitten in a grayscale photo">
+ * </sigvelo-comparison>
+ * ```
+ *
+ * @example Changing the orientation
+ * Set the `orientation` attribute to `vertical` to make the comparison vertical.
+ *
+ * ```html
+ * <sigvelo-comparison orientation="vertical">
+ *   <img slot="start" src="https://images.unsplash.com/photo-1622576041274-ae5dc580175d?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Two kittens nestled up on a blanket">
+ *   <img slot="end" src="https://images.unsplash.com/photo-1622576041274-ae5dc580175d?q=80&w=800&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same two kittens in a grayscale photo">
+ * </sigvelo-comparison>
+ * ```
+ *
+ * @example Using a custom icon
+ * Slot an icon or similar in the `handle-icon` slot to use a custom icon in the handle.
+ *
+ * ```html
+ * <sigvelo-comparison position=".66">
+ *   <sigvelo-icon slot="handle-icon" name="arrow-bar-both"></sigvelo-icon>
+ *   <img slot="start" src="https://images.unsplash.com/photo-1719310694054-6fc99b7c14ec?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange kitten explores a tall grassy yard">
+ *   <img slot="end" src="https://images.unsplash.com/photo-1719310694054-6fc99b7c14ec?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same kitten in a grayscale photo">
+ * </sigvelo-comparison>
+ * ```
+ *
+ * @example Disabling
+ * Add the `disabled` attribute to lock the comparison in place. You can still change the position programmatically when disabled.
+ *
+ * ```html
+ * <sigvelo-comparison position=".40" disabled>
+ *   <img slot="start" src="https://images.unsplash.com/photo-1601217156006-3358e1514676?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten peeks out from inside a cardboard box">
+ *   <img slot="end" src="https://images.unsplash.com/photo-1601217156006-3358e1514676?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same kitten in a grayscale photo">
+ * </sigvelo-comparison>
+ * ```
+ */
+declare class SigveloComparison extends SigveloElement {
+  static styles: CSSResultGroup;
+  private localize;
+  private dragHandler?;
+  private dragStartPosition;
+  private dragStartClientX;
+  private dragStartClientY;
+  private divider;
+  isDragging: boolean;
+  /** The position of the divider as a decimal (0-1). */
+  position: number;
+  /** The orientation of the comparison slider, either 'horizontal' or 'vertical'. */
+  orientation: "horizontal" | "vertical";
+  /** Disables the comparison component, preventing it from being focused and adjusted. */
+  disabled: boolean;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  disconnectedCallback(): void;
+  private handleFocus;
+  private handleBlur;
+  private handleKeydown;
+  private setupDragging;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-comparison": SigveloComparison;
+  }
+}
+//#endregion
+export { SigveloComparison as t };