@mcp-b/web-components 0.2.0

package/dist/breadcrumb-uURhiqWJ.js

@@ -0,0 +1,384 @@
+import { Localize } from "./utilities/localize.js";
+import { css, html } from "lit";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/breadcrumb/breadcrumb.styles.ts
+var breadcrumb_styles_default = css`
+  :host {
+    --item-spacing: 0.5em;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--item-spacing);
+  }
+`;
+//#endregion
+//#region src/components/breadcrumb/breadcrumb.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>
+* ```
+*/
+var SigveloBreadcrumb = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+	}
+	static {
+		this.styles = [hostStyles, breadcrumb_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "list");
+		this.setAttribute("aria-label", this.localize.term("breadcrumbs"));
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+customElements.define("sigvelo-breadcrumb", SigveloBreadcrumb);
+//#endregion
+export { SigveloBreadcrumb as t };