@mcp-b/web-components 0.2.0

package/dist/breadcrumb-BxZ-nQE5.d.ts

@@ -0,0 +1,365 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/breadcrumb/breadcrumb.d.ts
+/**
+ * <sigvelo-breadcrumb>
+ *
+ * @summary Offers a trail of links that correspond to an app or website's hierarchy, making navigation more predictable
+ * @tag sigvelo-breadcrumb
+ *  for users.
+ * @documentation https://design-system.sigvelo.com/docs/components/breadcrumb
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The default slot containing one or more breadcrumb items.
+ *
+ * @cssproperty [--item-spacing=0.5em] - The amount of spacing to use between breadcrumb items.
+ *
+ * @example Default
+ * Breadcrumbs follow the ARIA APG breadcrumb pattern for accessibility. The breadcrumb is labeled for assistive devices and breadcrumb items are announced as links. The breadcrumb corresponding to the current page is styled differently, but remains a functional link. Separators are presentational and will not be announced by screen readers.
+ *
+ * ```html
+ * <sigvelo-breadcrumb>
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/services/">
+ *     Services
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/services/adoption/">
+ *     Adoption
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Available Cats
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ * ```
+ *
+ * @example Setting the current item
+ * Add the `current` attribute to the breadcrumb item that represents the current page. An empty `href` can be used on current items instead of the full URL. The breadcrumb will be drawn differently, but the link will still be active for optimal accessibility.
+ *
+ * ```html
+ * <sigvelo-breadcrumb>
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/support/">
+ *     Support
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/support/faq/">
+ *     FAQ
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     What do I feed my cat?
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ * ```
+ *
+ * @example Changing the separator
+ * Use the `separator` slot to change the separator between breadcrumb items. Text and icons work well here.
+ *
+ * ```html
+ * <sigvelo-breadcrumb>
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *     <span slot="separator">/</span>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/">
+ *     Products
+ *     <span slot="separator">/</span>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/pets/">
+ *     Pets
+ *     <span slot="separator">/</span>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Toys for cats
+ *     <span slot="separator">/</span>
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ *
+ * <br>
+ *
+ * <sigvelo-breadcrumb>
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *     <sigvelo-icon slot="separator" name="fish-bone"></sigvelo-icon>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/">
+ *     Products
+ *     <sigvelo-icon slot="separator" name="fish-bone"></sigvelo-icon>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/pets/">
+ *     Pets
+ *     <sigvelo-icon slot="separator" name="fish-bone"></sigvelo-icon>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Toys for cats
+ *     <sigvelo-icon slot="separator" name="fish-bone"></sigvelo-icon>
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ * ```
+ *
+ * @example Changing the size
+ * Breadcrumbs are sized relative to the current font size. To change their size, apply `font-size` to the breadcrumb or an ancestor element.
+ *
+ * ```html
+ * <sigvelo-breadcrumb style="font-size: .875rem;">
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/food/">
+ *     Cat food
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/food/flavors/">
+ *     Flavors
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Tuna
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ *
+ * <br>
+ *
+ * <sigvelo-breadcrumb style="font-size: 1rem;">
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/food/">
+ *     Cat food
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/food/flavors/">
+ *     Flavors
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Tuna
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ *
+ * <br>
+ *
+ * <sigvelo-breadcrumb style="font-size: 1.25rem;">
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/food/">
+ *     Cat food
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/food/flavors/">
+ *     Flavors
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Tuna
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ * ```
+ *
+ * @example Start & end icons
+ * Use the `start` and `end` slots to add icons and other presentational elements to various breadcrumb items.
+ *
+ * ```html
+ * <sigvelo-breadcrumb>
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     <sigvelo-icon slot="start" name="home"></sigvelo-icon>
+ *     Home
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/">
+ *     Products
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/pets/">
+ *     Pets
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Toys for cats
+ *     <sigvelo-icon slot="end" name="cat"></sigvelo-icon>
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ * ```
+ *
+ * @example Icon-only items
+ * To create icon-only breadcrumb item, slot in an icon and a visually hidden label for assistive devices. You can use the `sigvelo-vh` utility class to visually hide the label.
+ *
+ * ```html
+ * <sigvelo-breadcrumb>
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     <sigvelo-icon slot="start" name="home"></sigvelo-icon>
+ *     <span class="sigvelo-vh">Home</span>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/">
+ *     Products
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/pets/">
+ *     Pets
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Toys for cats
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ * ```
+ *
+ * @example With collapsed items
+ * You can create a collapsed breadcrumb item by adding a dropdown with additional options. In this case, omit the `href` attribute so the dropdown won't be wrapped with a link.
+ *
+ * ```html
+ * <sigvelo-breadcrumb id="breadcrumb__collapsed">
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     Home
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/pets/">
+ *     Pets
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item>
+ *     <sigvelo-dropdown style="font-size: 1rem;">
+ *       <sigvelo-button slot="trigger" variant="ghost" icon-label="More pages" size="sm">
+ *         <sigvelo-icon name="dots"></sigvelo-icon>
+ *       </sigvelo-button>
+ *       <sigvelo-dropdown-item value="https://example.com/pets/birds">Birds</sigvelo-dropdown-item>
+ *       <sigvelo-dropdown-item value="https://example.com/pets/cats">Cats</sigvelo-dropdown-item>
+ *       <sigvelo-dropdown-item value="https://example.com/pets/dogs">Dogs</sigvelo-dropdown-item>
+ *       <sigvelo-dropdown-item value="https://example.com/pets/all">All animals</sigvelo-dropdown-item>
+ *     </sigvelo-dropdown>
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Favorites
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ *
+ * <script>
+ *   const breadcrumb = document.getElementById('breadcrumb__collapsed');
+ *
+ *   breadcrumb.addEventListener('sigvelo-select', event => {
+ *     location.href = event.detail.item.value;
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Styling breadcrumbs
+ * Breadcrumbs come with a simple, minimal appearance. Feel free to customize them with your own styles.
+ *
+ * ```html
+ * <sigvelo-breadcrumb class="breadcrumb__bar">
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     <sigvelo-icon slot="start" name="music"></sigvelo-icon>
+ *     Music
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/">
+ *     Artist
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/pets/">
+ *     Album
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Song
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ *
+ * <style>
+ *   .breadcrumb__bar {
+ *     background-color: var(--sigvelo-color-neutral-bg-subtle);
+ *     border-radius: var(--sigvelo-radius-full);
+ *     padding-inline: 1em;
+ *     padding-block: .5em;
+ *
+ *     sigvelo-breadcrumb-item::part(link) {
+ *       color: var(--sigvelo-color-text-muted);
+ *     }
+ *
+ *     sigvelo-breadcrumb-item[current]::part(link) {
+ *       color: var(--sigvelo-color-text);
+ *     }
+ *
+ *     sigvelo-breadcrumb-item:not([current])::part(link):hover {
+ *       text-decoration: underline;
+ *       text-underline-offset: 0.125em;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * ```html
+ * <sigvelo-breadcrumb class="breadcrumb__borders">
+ *   <sigvelo-breadcrumb-item href="https://example.com/">
+ *     <sigvelo-icon slot="start" name="music"></sigvelo-icon>
+ *     Music
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/">
+ *     Artist
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item href="https://example.com/products/pets/">
+ *     Album
+ *   </sigvelo-breadcrumb-item>
+ *
+ *   <sigvelo-breadcrumb-item current href="">
+ *     Song
+ *   </sigvelo-breadcrumb-item>
+ * </sigvelo-breadcrumb>
+ *
+ * <style>
+ *   .breadcrumb__borders {
+ *     sigvelo-breadcrumb-item::part(label) {
+ *       padding: .33em .5em;
+ *     }
+ *
+ *     sigvelo-breadcrumb-item:not([current])::part(label) {
+ *       background-color: var(--sigvelo-color-surface);
+ *       border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-muted);
+ *       border-radius: var(--sigvelo-radius-md);
+ *       box-shadow: var(--sigvelo-elevation-hairline);
+ *     }
+ *
+ *     sigvelo-breadcrumb-item::part(separator) {
+ *       display: none;
+ *     }
+ *   }
+ * </style>
+ * ```
+ */
+declare class SigveloBreadcrumb extends SigveloElement {
+  static styles: CSSResultGroup;
+  private localize;
+  firstUpdated(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-breadcrumb": SigveloBreadcrumb;
+  }
+}
+//#endregion
+export { SigveloBreadcrumb as t };

package/dist/breadcrumb-item-BC454oQe.d.ts

@@ -0,0 +1,59 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/breadcrumb-item/breadcrumb-item.d.ts
+/**
+ * <sigvelo-breadcrumb-item>
+ *
+ * @summary Represents a single link or step in the hierarchical structure of an app or website.
+ * @tag sigvelo-breadcrumb-item
+ * @documentation https://design-system.sigvelo.com/docs/components/breadcrumb-item
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ * @slot start - An icon or similar element to place before the breadcrumb item. Works great with `<sigvelo-icon>`.
+ * @slot end - An icon or similar element to place after the breadcrumb item. Works great with `<sigvelo-icon>`.
+ * @slot separator - A custom separator to show instead of the default. Works great with `<sigvelo-icon>`.
+ *
+ * @csspart label - The breadcrumb's label, an `<a>` element if `href` is set or a `<span>` element otherwise.
+ * @csspart separator - The container that wraps the breadcrumb's separator, a `span` element.
+ *
+ * @example Default
+ * This component must only be used within a breadcrumb. You can see some examples of breadcrumb items being used in the breadcrumb documentation.
+ */
+declare class SigveloBreadcrumbItem extends SigveloElement {
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry | null;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  static styles: CSSResultGroup;
+  /** Indicates that this item is the current page or view. */
+  current: boolean;
+  /**
+   * The URL the breadcrumb item should point to. If omitted, the breadcrumb item will be drawn as a `<span>` instead of
+   * a link, enabling alternate content such as dropdowns.
+   */
+  href: string;
+  /** Opens the link in the specified target. */
+  target: "_blank" | "_parent" | "_self" | "_top" | undefined;
+  /**
+   * Sets the link's `rel` attribute. Note that the default value is `noreferrer noopener`, meaning you might need to
+   * set it to an empty string if you're also using `target`.
+   */
+  rel: string;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-breadcrumb-item": SigveloBreadcrumbItem;
+  }
+}
+//#endregion
+export { SigveloBreadcrumbItem as t };

package/dist/breadcrumb-item-P5pdq_gE.js

@@ -0,0 +1,151 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css } 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 { ifDefined } from "lit/directives/if-defined.js";
+import { html as html$1, literal } from "lit/static-html.js";
+//#region src/components/breadcrumb-item/breadcrumb-item.styles.ts
+var breadcrumb_item_styles_default = css`
+  :host {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--item-spacing);
+  }
+
+  #label {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--item-spacing) / 2);
+    color: var(--sigvelo-color-primary-text);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    font-size: 0.9375em;
+    text-decoration: inherit;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    ::slotted(sigvelo-icon) {
+      font-size: 1.25em;
+    }
+  }
+
+  :host([current]) #label {
+    color: var(--sigvelo-color-text-muted);
+  }
+
+  #separator {
+    display: flex;
+    align-items: center;
+    color: var(--sigvelo-color-text-muted);
+    text-align: center;
+    user-select: none;
+    -webkit-user-select: none;
+
+    /* Slotted text such as a slash will look condensed, so this makes sure there's decent spacing out of the box */
+    ::slotted(*) {
+      min-width: 1em;
+    }
+
+    /* Default separators and slotted custom separators should be 1.25em */
+    sigvelo-icon,
+    ::slotted(sigvelo-icon) {
+      font-size: 1.25em !important;
+    }
+
+    /* Flip separator icons when RTL */
+    &:dir(rtl) sigvelo-icon,
+    &:dir(rtl) ::slotted(sigvelo-icon) {
+      transform: rotateY(180deg);
+    }
+  }
+
+  /* Hide the last separator */
+  :host(:last-of-type) #separator {
+    display: none;
+  }
+`;
+//#endregion
+//#region src/components/breadcrumb-item/breadcrumb-item.ts
+/**
+* <sigvelo-breadcrumb-item>
+*
+* @summary Represents a single link or step in the hierarchical structure of an app or website.
+* @tag sigvelo-breadcrumb-item
+* @documentation https://design-system.sigvelo.com/docs/components/breadcrumb-item
+* @status stable
+* @since 1.0
+*
+* @slot - The default slot.
+* @slot start - An icon or similar element to place before the breadcrumb item. Works great with `<sigvelo-icon>`.
+* @slot end - An icon or similar element to place after the breadcrumb item. Works great with `<sigvelo-icon>`.
+* @slot separator - A custom separator to show instead of the default. Works great with `<sigvelo-icon>`.
+*
+* @csspart label - The breadcrumb's label, an `<a>` element if `href` is set or a `<span>` element otherwise.
+* @csspart separator - The container that wraps the breadcrumb's separator, a `span` element.
+*
+* @example Default
+* This component must only be used within a breadcrumb. You can see some examples of breadcrumb items being used in the breadcrumb documentation.
+*/
+var SigveloBreadcrumbItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.current = false;
+		this.rel = "noreferrer noopener";
+	}
+	static {
+		this.shadowRootOptions = {
+			...SigveloElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = [hostStyles, breadcrumb_item_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "listitem");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("current")) if (this.current) this.setAttribute("aria-current", "page");
+		else this.removeAttribute("aria-current");
+	}
+	render() {
+		const tag = typeof this.href === "string" ? literal`a` : literal`span`;
+		return html$1`
+      <${tag}
+        id="label"
+        part="label"
+        href=${ifDefined(this.href)}
+        rel=${ifDefined(this.rel)}
+        target=${ifDefined(this.target)}
+      >
+        <slot name="start"></slot>
+        <slot></slot>
+        <slot name="end"></slot>
+      </${tag}>
+
+      <span id="separator" part="separator">
+        <slot name="separator">
+          <sigvelo-icon library="system" name="chevron-right"></sigvelo-icon>
+        </slot>
+      </span>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloBreadcrumbItem.prototype, "current", void 0);
+__decorate([property()], SigveloBreadcrumbItem.prototype, "href", void 0);
+__decorate([property()], SigveloBreadcrumbItem.prototype, "target", void 0);
+__decorate([property()], SigveloBreadcrumbItem.prototype, "rel", void 0);
+customElements.define("sigvelo-breadcrumb-item", SigveloBreadcrumbItem);
+//#endregion
+export { SigveloBreadcrumbItem as t };