@mcp-b/web-components 0.2.0

package/dist/dropdown-item-i77cRuN6.js

@@ -0,0 +1,504 @@
+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 { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/dropdown-item/dropdown-item.styles.ts
+var dropdown_item_styles_default = css`
+  :host {
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding: 0.33em 1em;
+    border-radius: var(--sigvelo-radius-sm);
+    isolation: isolate;
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    font-size: 0.9375em;
+    line-height: var(--sigvelo-leading-relaxed);
+    cursor: pointer;
+    transition:
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) color ease;
+  }
+
+  @media (hover: hover) {
+    :host(:hover:not(:state(disabled))) {
+      background-color: var(--sigvelo-color-neutral-bg-subtle);
+      color: var(--sigvelo-color-neutral-text-on-subtle);
+    }
+  }
+
+  :host(:focus-visible) {
+    z-index: 1;
+    border-radius: calc(var(--sigvelo-radius-sm) / 2); /* to align with the menu's curve */
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: var(--sigvelo-focus-offset);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+  }
+
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+  }
+
+  /* Destructive color */
+  :host([color="destructive"]),
+  :host([color="destructive"]) #details {
+    color: var(--sigvelo-color-danger-text);
+  }
+
+  @media (hover: hover) {
+    :host([color="destructive"]:hover) {
+      background-color: var(--sigvelo-color-danger-bg-subtle);
+      color: var(--sigvelo-color-danger-text);
+    }
+  }
+
+  :host([color="destructive"]:focus-visible) {
+    background-color: var(--sigvelo-color-danger-bg-subtle);
+    color: var(--sigvelo-color-danger-text);
+  }
+
+  :host(:state(disabled)) {
+    opacity: 0.5;
+  }
+
+  :host([checkbox-adjacent]) {
+    padding-inline-start: 2em;
+  }
+
+  /* Only add padding when item actually has a submenu */
+  :host([submenu-adjacent]:not(:state(has-submenu))) #details {
+    padding-inline-end: 0;
+  }
+
+  :host(:state(has-submenu)[submenu-adjacent]) #details {
+    padding-inline-end: 1.75em;
+  }
+
+  #check {
+    visibility: hidden;
+    margin-inline-start: -1.25em;
+    margin-inline-end: 0.25em;
+    font-size: 1.25em;
+  }
+
+  :host(:state(checked)) #check {
+    visibility: visible;
+  }
+
+  #icon ::slotted(*) {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-inline-end: 0.5em !important;
+    font-size: 1.25em;
+  }
+
+  #label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  #details {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: end;
+    color: var(--sigvelo-color-text-muted);
+    font-size: 0.933334em !important;
+  }
+
+  #details ::slotted(*) {
+    margin-inline-start: 2em !important;
+  }
+
+  /* Submenu indicator icon */
+  #submenu-indicator {
+    position: absolute;
+    inset-inline-end: 0.25em;
+    color: var(--sigvelo-color-text-muted);
+    font-size: 1.25em;
+  }
+
+  /* Flip chevron icon when RTL */
+  :host(:dir(rtl)) #submenu-indicator {
+    transform: scaleX(-1);
+  }
+
+  /* Submenu styles */
+  #submenu {
+    display: flex;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    flex-direction: column;
+    width: max-content;
+    margin: 0;
+    padding: 0.25em;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-floating);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    text-align: start;
+    user-select: none;
+
+    /* Override default popover styles */
+    &[popover] {
+      margin: 0;
+      inset: auto;
+      padding: 0.25em;
+      overflow: visible;
+      border-radius: var(--sigvelo-radius-md);
+    }
+
+    &.show {
+      animation: submenu-show var(--show-duration, var(--sigvelo-motion-duration-interaction)) ease;
+    }
+
+    &.hide {
+      animation: submenu-show var(--show-duration, var(--sigvelo-motion-duration-interaction)) ease
+        reverse;
+    }
+
+    /* Submenu placement transform origins */
+    &[data-placement^="top"] {
+      transform-origin: bottom;
+    }
+
+    &[data-placement^="bottom"] {
+      transform-origin: top;
+    }
+
+    &[data-placement^="left"] {
+      transform-origin: right;
+    }
+
+    &[data-placement^="right"] {
+      transform-origin: left;
+    }
+
+    &[data-placement="left-start"] {
+      transform-origin: right top;
+    }
+
+    &[data-placement="left-end"] {
+      transform-origin: right bottom;
+    }
+
+    &[data-placement="right-start"] {
+      transform-origin: left top;
+    }
+
+    &[data-placement="right-end"] {
+      transform-origin: left bottom;
+    }
+
+    /* Safe triangle styling */
+    &::before {
+      display: none;
+      z-index: 9;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+      content: "";
+      clip-path: polygon(
+        var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+        var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+        var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+      );
+      pointer-events: auto; /* Enable mouse events on the triangle */
+    }
+
+    &[data-visible]::before {
+      display: block;
+    }
+  }
+
+  ::slotted(sigvelo-dropdown-item) {
+    font-size: inherit;
+  }
+
+  ::slotted(sigvelo-divider) {
+    --spacing: 0.25em;
+  }
+
+  @keyframes submenu-show {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+//#region src/components/dropdown-item/dropdown-item.ts
+/**
+* <sigvelo-dropdown-item>
+*
+* @summary Can be selected from inside a dropdown menu.
+* @tag sigvelo-dropdown-item
+* @documentation https://design-system.sigvelo.com/docs/components/dropdown-item
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot - The item's label or description.
+* @slot icon - An optional icon to show at the start of the item.
+* @slot details - Optional details, such as a keyboard shortcut, to display at the end of the item.
+* @slot submenu - Optional submenu items to display in a nested dropdown. For best results, use `<sigvelo-submenu-item>`
+*  and `<sigvelo-divider>` elements.
+*
+* @csspart checkmark - The checkmark icon that's shown when checked, a `<sigvelo-icon>` element.
+* @csspart checkmark__svg - The checkmark icon's `svg` part.
+* @csspart icon - The container that wraps the icon.
+* @csspart label - The container that wraps the label.
+* @csspart details - The container that wraps the menu item's details.
+* @csspart submenu - The container that wraps the submenu items.
+* @csspart submenu-icon - The icon indicating that a submenu is available.
+* @csspart submenu-icon__svg - The submenu icon's `svg` part.
+*
+* @cssstate active - Applied when the dropdown item is active.
+* @cssstate disabled - Applied when the dropdown item is disabled.
+* @cssstate checked - Applied when the dropdown item is checked.
+* @cssstate submenu-open - Applied when the dropdown item's submenu is open.
+* @cssstate has-submenu - Applied when the dropdown item has a submenu.
+*
+* @example Default
+* This component must only be used within a dropdown. You can see some examples of dropdown items being used in the dropdown documentation.
+*/
+var SigveloDropdownItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.active = false;
+		this.checkboxAdjacent = false;
+		this.submenuAdjacent = false;
+		this.type = "normal";
+		this.color = "neutral";
+		this.checked = false;
+		this.disabled = false;
+		this.submenuOpen = false;
+		this.hasSubmenu = false;
+		this.handleMouseEnter = () => {
+			if (this.hasSubmenu && !this.disabled) {
+				this.notifyParentOfOpening();
+				this.submenuOpen = true;
+			}
+		};
+	}
+	static {
+		this.styles = [hostStyles, dropdown_item_styles_default];
+	}
+	static {
+		this.observeSlots = true;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("mouseenter", this.handleMouseEnter);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.closeSubmenu();
+		this.removeEventListener("mouseenter", this.handleMouseEnter);
+	}
+	firstUpdated() {
+		this.setAttribute("tabindex", "-1");
+		this.hasSubmenu = this.slotsWithContent.has("submenu");
+		this.updateHasSubmenuState();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("active")) {
+			this.setAttribute("tabindex", this.active ? "0" : "-1");
+			this.customStates.set("active", this.active);
+		}
+		if (changedProperties.has("checked")) {
+			this.setAttribute("aria-checked", this.checked ? "true" : "false");
+			this.customStates.set("checked", this.checked);
+		}
+		if (changedProperties.has("disabled")) {
+			this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+			this.customStates.set("disabled", this.disabled);
+		}
+		if (changedProperties.has("type")) if (this.type === "checkbox") this.setAttribute("role", "menuitemcheckbox");
+		else this.setAttribute("role", "menuitem");
+		if (changedProperties.has("submenuOpen")) {
+			this.customStates.set("submenu-open", this.submenuOpen);
+			if (this.submenuOpen) this.openSubmenu();
+			else this.closeSubmenu();
+		}
+		if (changedProperties.has("slotsWithContent")) {
+			this.hasSubmenu = this.slotsWithContent.has("submenu");
+			this.updateHasSubmenuState();
+			if (this.hasSubmenu) {
+				this.setAttribute("aria-haspopup", "menu");
+				this.setAttribute("aria-expanded", this.submenuOpen ? "true" : "false");
+			} else {
+				this.removeAttribute("aria-haspopup");
+				this.removeAttribute("aria-expanded");
+			}
+		}
+	}
+	/** Update the has-submenu custom state */
+	updateHasSubmenuState() {
+		this.customStates.set("has-submenu", this.hasSubmenu);
+	}
+	/** Opens the submenu. */
+	async openSubmenu() {
+		if (!this.hasSubmenu || !this.submenuElement) return;
+		this.notifyParentOfOpening();
+		this.submenuElement.showPopover();
+		this.submenuElement.hidden = false;
+		this.submenuElement.setAttribute("data-visible", "");
+		this.submenuOpen = true;
+		this.setAttribute("aria-expanded", "true");
+		await animateWithClass(this.submenuElement, "show");
+		setTimeout(() => {
+			const items = this.getSubmenuItems();
+			if (items.length > 0) {
+				items.forEach((item, index) => item.active = index === 0);
+				items[0].focus();
+			}
+		}, 0);
+	}
+	/** Notifies the parent dropdown that this item is opening its submenu */
+	notifyParentOfOpening() {
+		const event = new CustomEvent("submenu-opening", {
+			bubbles: true,
+			composed: true,
+			detail: { item: this }
+		});
+		this.dispatchEvent(event);
+		const parent = this.parentElement;
+		if (parent) [...parent.children].filter((el) => el !== this && el.localName === "sigvelo-dropdown-item" && el.getAttribute("slot") === this.getAttribute("slot") && el.submenuOpen).forEach((sibling) => {
+			sibling.submenuOpen = false;
+		});
+	}
+	/** Closes the submenu. */
+	async closeSubmenu() {
+		if (!this.hasSubmenu || !this.submenuElement) return;
+		this.submenuOpen = false;
+		this.setAttribute("aria-expanded", "false");
+		if (!this.submenuElement.hidden) {
+			await animateWithClass(this.submenuElement, "hide");
+			this.submenuElement.hidden = true;
+			this.submenuElement.removeAttribute("data-visible");
+			this.submenuElement.hidePopover();
+		}
+	}
+	/** Gets all dropdown items in the submenu. */
+	getSubmenuItems() {
+		return [...this.children].filter((el) => el.localName === "sigvelo-dropdown-item" && el.getAttribute("slot") === "submenu" && !el.hasAttribute("disabled"));
+	}
+	render() {
+		const isLink = typeof this.href === "string";
+		return html`
+      ${this.type === "checkbox" ? html`
+            <sigvelo-icon
+              id="check"
+              part="checkmark"
+              exportparts="svg:checkmark__svg"
+              library="system"
+              name="check"
+            ></sigvelo-icon>
+          ` : ""}
+
+      <span id="icon" part="icon">
+        <slot name="icon"></slot>
+      </span>
+
+      <span id="label" part="label">
+        <slot></slot>
+      </span>
+
+      <span id="details" part="details">
+        <slot name="details"></slot>
+      </span>
+
+      ${this.hasSubmenu ? html`
+            <sigvelo-icon
+              id="submenu-indicator"
+              part="submenu-icon"
+              exportparts="svg:submenu-icon__svg"
+              library="system"
+              name="chevron-right"
+            ></sigvelo-icon>
+          ` : ""}
+      ${this.whenSlotted("submenu", html`
+          <div
+            id="submenu"
+            part="submenu"
+            popover="manual"
+            role="menu"
+            tabindex="-1"
+            aria-orientation="vertical"
+            hidden
+          >
+            <slot name="submenu"></slot>
+          </div>
+        `, { force: this.hasSubmenu })}
+      ${isLink ? html`
+            <a
+              id="hidden-link"
+              class="vh"
+              href=${ifDefined(isLink && !this.disabled ? this.href : void 0)}
+              target=${ifDefined(isLink ? this.target : void 0)}
+              download=${ifDefined(isLink ? this.download : void 0)}
+              rel=${ifDefined(isLink && this.rel ? this.rel : void 0)}
+              tabindex="0"
+              aria-hidden="true"
+              @click=${(event) => event.stopImmediatePropagation()}
+            ></a>
+          ` : ""}
+    `;
+	}
+};
+__decorate([query("#hidden-link")], SigveloDropdownItem.prototype, "hiddenLink", void 0);
+__decorate([query("#submenu")], SigveloDropdownItem.prototype, "submenuElement", void 0);
+__decorate([property({ type: Boolean })], SigveloDropdownItem.prototype, "active", void 0);
+__decorate([property({
+	attribute: "checkbox-adjacent",
+	type: Boolean,
+	reflect: true
+})], SigveloDropdownItem.prototype, "checkboxAdjacent", void 0);
+__decorate([property({
+	attribute: "submenu-adjacent",
+	type: Boolean,
+	reflect: true
+})], SigveloDropdownItem.prototype, "submenuAdjacent", void 0);
+__decorate([property()], SigveloDropdownItem.prototype, "value", void 0);
+__decorate([property({ reflect: true })], SigveloDropdownItem.prototype, "type", void 0);
+__decorate([property({ reflect: true })], SigveloDropdownItem.prototype, "color", void 0);
+__decorate([property({ type: Boolean })], SigveloDropdownItem.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloDropdownItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloDropdownItem.prototype, "submenuOpen", void 0);
+__decorate([property()], SigveloDropdownItem.prototype, "href", void 0);
+__decorate([property()], SigveloDropdownItem.prototype, "target", void 0);
+__decorate([property()], SigveloDropdownItem.prototype, "rel", void 0);
+__decorate([property()], SigveloDropdownItem.prototype, "download", void 0);
+__decorate([state()], SigveloDropdownItem.prototype, "hasSubmenu", void 0);
+SigveloDropdownItem.disableWarning?.("change-in-update");
+customElements.define("sigvelo-dropdown-item", SigveloDropdownItem);
+//#endregion
+export { SigveloDropdownItem as t };

package/dist/empty-result-B2ln1yFL.js

@@ -0,0 +1,65 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./empty-state-BLWjtKUo.js";
+import { css, html, nothing } 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/empty-result/empty-result.styles.ts
+var empty_result_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  h3,
+  p {
+    margin: 0;
+  }
+
+  p {
+    margin-block-start: var(--sigvelo-spacing-2);
+  }
+
+  #actions {
+    display: block;
+    margin-block-start: var(--sigvelo-spacing-3);
+  }
+`;
+//#endregion
+//#region src/components/empty-result/empty-result.ts
+/**
+* <sigvelo-empty-result>
+*
+* @summary Presents a concise empty or no-match state with optional illustration and actions.
+* @tag sigvelo-empty-result
+* @documentation https://design-system.sigvelo.com/docs/components/empty-result
+* @status stable
+* @since 1.0
+*
+* @slot illustration - An optional icon or illustration.
+* @slot - Optional recovery actions.
+*/
+var SigveloEmptyResult = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.title = "No results";
+		this.description = "";
+	}
+	static {
+		this.styles = [hostStyles, empty_result_styles_default];
+	}
+	render() {
+		return html`
+      <sigvelo-empty-state>
+        <slot name="illustration" slot="illustration"></slot>
+        <h3>${this.title}</h3>
+        ${this.description ? html`<p>${this.description}</p>` : nothing}
+        <div id="actions"><slot></slot></div>
+      </sigvelo-empty-state>
+    `;
+	}
+};
+__decorate([property()], SigveloEmptyResult.prototype, "title", void 0);
+__decorate([property()], SigveloEmptyResult.prototype, "description", void 0);
+customElements.define("sigvelo-empty-result", SigveloEmptyResult);
+//#endregion
+export { SigveloEmptyResult as t };

package/dist/empty-result-B54x_Ab2.d.ts

@@ -0,0 +1,31 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/empty-result/empty-result.d.ts
+/**
+ * <sigvelo-empty-result>
+ *
+ * @summary Presents a concise empty or no-match state with optional illustration and actions.
+ * @tag sigvelo-empty-result
+ * @documentation https://design-system.sigvelo.com/docs/components/empty-result
+ * @status stable
+ * @since 1.0
+ *
+ * @slot illustration - An optional icon or illustration.
+ * @slot - Optional recovery actions.
+ */
+declare class SigveloEmptyResult extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** The empty-result heading. */
+  title: string;
+  /** Optional guidance for recovering from the empty state. */
+  description: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-empty-result": SigveloEmptyResult;
+  }
+}
+//#endregion
+export { SigveloEmptyResult as t };