@mcp-b/web-components 0.2.0

package/dist/mutation-observer-DS8EBuOp.js

@@ -0,0 +1,388 @@
+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";
+import { SigveloMutationEvent } from "@mcp-b/wc-support/events/mutation";
+//#region src/components/mutation-observer/mutation-observer.styles.ts
+var mutation_observer_styles_default = css`
+  :host {
+    display: contents;
+  }
+`;
+//#endregion
+//#region src/components/mutation-observer/mutation-observer.ts
+/**
+* <sigvelo-mutation-observer>
+*
+* @summary Watches child elements and dispatches an event when they mutate.
+* @tag sigvelo-mutation-observer
+* @documentation https://design-system.sigvelo.com/docs/components/mutation
+* @status stable
+* @since 1.0
+*
+* @slot - The elements to observe. All direct children of the host element are observed, but not nested elements.
+*
+* @event sigvelo-mutation - Emitted when a slotted element is mutated. The `event.detail.record` property contains a
+*  [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) with information about
+*  the mutation.
+*
+* @example Default
+* The component uses a MutationObserver to monitor when its direct children are added, removed, or modified. A `sigvelo-mutation` event is dispatched for each observed change, providing detailed information about what was mutated.
+*
+* The component is styled with `display: contents`, allowing you to easily apply flex and grid layouts to the containing element without the component interfering.
+*
+* ```html
+* <div id="mutation__overview">
+*   <sigvelo-mutation-observer child-list>
+*     <div class="box">1 <button aria-label="Remove">✕</button></div>
+*     <div class="box">2 <button aria-label="Remove">✕</button></div>
+*     <div class="box">3 <button aria-label="Remove">✕</button></div>
+*   </sigvelo-mutation-observer>
+* </div>
+*
+* <sigvelo-button>Add box</sigvelo-button>
+*
+* <small>Add and remove some items, then open the console to inspect the output.</small>
+*
+* <script>
+*   const container = document.getElementById('mutation__overview');
+*   const mutationObserver = container.querySelector('sigvelo-mutation-observer');
+*   const appendButton = container.nextElementSibling;
+*   let count = mutationObserver.querySelectorAll('.box').length;
+*
+*   // Listen for mutations
+*   mutationObserver.addEventListener('sigvelo-mutation', event => {
+*     console.log(event.detail.record);
+*   });
+*
+*   // Remove a card
+*   mutationObserver.addEventListener('click', event => {
+*     const button = event.target.closest('button');
+*     const box = button?.closest('.box');
+*     box?.remove();
+*   });
+*
+*   // Append a box
+*   appendButton.addEventListener('click', () => {
+*     const html = `<div class="box">${++count} <button aria-label="Remove">✕</button></div>`;
+*     mutationObserver.insertAdjacentHTML('beforeEnd', html);
+*   });
+* <\/script>
+*
+* <style>
+*   #mutation__overview {
+*     display: flex;
+*     flex-wrap: wrap;
+*     gap: 1.5rem;
+*     min-height: 5rem;
+*     margin-block-end: 1rem;
+*
+*     .box {
+*       display: flex;
+*       align-items: center;
+*       justify-content: center;
+*       position: relative;
+*       min-width: 5rem;
+*       height: 5rem;
+*       border-radius: var(--sigvelo-radius-md);
+*       background-color: var(--sigvelo-color-neutral-bg-subtle);
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       text-align: center;
+*       padding: 1rem;
+*
+*       button {
+*         display: flex;
+*         align-items: center;
+*         justify-content: center;
+*         background-color: var(--sigvelo-color-neutral-bg-strong);
+*         color: var(--sigvelo-color-neutral-text-on-strong);
+*         font-size: .75em;
+*         padding: 0;
+*         width: 1.25rem;
+*         height: 1.25rem;
+*         min-height: 0;
+*         position: absolute;
+*         top: -0.625rem;
+*         right: -0.625rem;
+*         border-radius: var(--sigvelo-radius-circle);
+*       }
+*     }
+*
+*     ~ small {
+*       display: block;
+*       margin-block-start: 1rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** Remember that only direct children of the host element are observed. Nested elements will not trigger mutation events unless the `subtree` attribute is enabled.
+*
+* @example Providing content
+* Slot one or more elements into the mutation observer and listen for the `sigvelo-mutation` event. The event includes `event.detail.record`, which is a `MutationRecord` object that corresponds to the mutated element.
+*
+* In its simplest form, a mutation observer can be used like this.
+*
+* ```html
+* <sigvelo-mutation-observer child-list>
+*   <div>Item 1</div>
+*   <div>Item 2</div>
+*   <div>Item 3</div>
+* </sigvelo-mutation-observer>
+*
+* <script>
+*   const mutationObserver = document.querySelector('sigvelo-mutation-observer');
+*
+*   // Listen for mutations
+*   mutationObserver.addEventListener('sigvelo-mutation', event => {
+*     console.log(event.detail.record); // MutationRecord
+*   });
+* <\/script>
+* ```
+*
+* @example Observing attribute changes
+* Use the `attr` attribute to monitor changes to element attributes. You can optionally specify `attr-old-value` to record the previous attribute value.
+*
+* ```html
+* <sigvelo-mutation-observer attr attr-old-value>
+*   <div id="target" class="example">Watch my attributes</div>
+* </sigvelo-mutation-observer>
+*
+* <script>
+*   const observer = document.querySelector('sigvelo-mutation-observer');
+*   const target = observer.querySelector('#target');
+*
+*   observer.addEventListener('sigvelo-mutation', event => {
+*     const record = event.detail.record;
+*     console.log(`Attribute "${record.attributeName}" changed`);
+*     console.log(`Old value: ${record.oldValue}`);
+*     console.log(`New value: ${record.target.getAttribute(record.attributeName)}`);
+*   });
+*
+*   // Change an attribute to trigger the observer
+*   target.className = 'modified';
+* <\/script>
+* ```
+*
+* @example Filtering specific attributes
+* Limit observations to specific attributes using the `attr-filter` attribute. Separate multiple attribute names with spaces.
+*
+* ```html
+* <sigvelo-mutation-observer attr attr-filter="class data-state">
+*   <div class="example" data-state="active" id="example">
+*     Only class and data-state changes are observed
+*   </div>
+* </sigvelo-mutation-observer>
+*
+* <script>
+*   const observer = document.querySelector('sigvelo-mutation-observer');
+*   const target = observer.querySelector('#example');
+*
+*   observer.addEventListener('sigvelo-mutation', event => {
+*     console.log(`Observed attribute: ${event.detail.record.attributeName}`);
+*   });
+*
+*   // These will trigger events
+*   target.className = 'modified';
+*   target.setAttribute('data-state', 'inactive');
+*
+*   // This will NOT trigger an event
+*   target.id = 'new-id';
+* <\/script>
+* ```
+*
+* @example Observing text content changes
+* Use the `character-data` attribute to monitor changes to text nodes. The `character-data-old-value` attribute records the previous text content.
+*
+* ```html
+* <sigvelo-mutation-observer character-data character-data-old-value subtree>
+*   <p id="text-content">Original text content</p>
+* </sigvelo-mutation-observer>
+*
+* <script>
+*   const observer = document.querySelector('sigvelo-mutation-observer');
+*   const paragraph = observer.querySelector('#text-content');
+*
+*   observer.addEventListener('sigvelo-mutation', event => {
+*     const record = event.detail.record;
+*     console.log(`Text changed from "${record.oldValue}" to "${record.target.textContent}"`);
+*   });
+*
+*   // Change text content to trigger the observer
+*   paragraph.textContent = 'Updated text content';
+* <\/script>
+* ```
+*
+* @example Observing nested elements
+* By default, only direct children are observed. Add the `subtree` attribute to observe changes in nested elements as well.
+*
+* ```html
+* <sigvelo-mutation-observer child-list subtree>
+*   <div class="container">
+*     <div class="nested">
+*       <span>Nested content</span>
+*     </div>
+*   </div>
+* </sigvelo-mutation-observer>
+*
+* <script>
+*   const observer = document.querySelector('sigvelo-mutation-observer');
+*   const nested = observer.querySelector('.nested');
+*
+*   observer.addEventListener('sigvelo-mutation', event => {
+*     console.log('Mutation detected in subtree:', event.detail.record);
+*   });
+*
+*   // This will trigger the observer even though span is deeply nested
+*   nested.innerHTML = '<span>New nested content</span>';
+* <\/script>
+* ```
+*
+* @example Combining multiple observation types
+* You can observe multiple types of mutations simultaneously by combining attributes.
+*
+* ```html
+* <sigvelo-mutation-observer
+*   child-list
+*   attr
+*   character-data
+*   subtree
+*   attr-old-value
+*   character-data-old-value
+* >
+*   <div class="comprehensive-example">
+*     <p>This observer watches everything</p>
+*   </div>
+* </sigvelo-mutation-observer>
+*
+* <script>
+*   const observer = document.querySelector('sigvelo-mutation-observer');
+*
+*   observer.addEventListener('sigvelo-mutation', event => {
+*     const record = event.detail.record;
+*
+*     switch (record.type) {
+*       case 'childList':
+*         console.log('Child nodes changed');
+*         break;
+*       case 'attributes':
+*         console.log(`Attribute "${record.attributeName}" changed`);
+*         break;
+*       case 'characterData':
+*         console.log('Text content changed');
+*         break;
+*     }
+*   });
+* <\/script>
+* ```
+*
+* @example Disabling the observer
+* Use the `disabled` attribute to temporarily stop observing mutations without removing the component.
+*
+* ```html
+* <sigvelo-mutation-observer child-list disabled>
+*   <div>Changes to this content won't be observed</div>
+* </sigvelo-mutation-observer>
+*
+* <script>
+*   const observer = document.querySelector('sigvelo-mutation-observer');
+*
+*   // Re-enable observation
+*   observer.disabled = false;
+*
+*   // Disable observation again
+*   observer.disabled = true;
+* <\/script>
+* ```
+*/
+var SigveloMutationObserver = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.mutationObserver = null;
+		this.disabled = false;
+		this.attr = false;
+		this.attrOldValue = false;
+		this.attrFilter = "";
+		this.childList = false;
+		this.subtree = false;
+		this.characterData = false;
+		this.characterDataOldValue = false;
+	}
+	static {
+		this.styles = [hostStyles, mutation_observer_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.startObserver();
+	}
+	disconnectedCallback() {
+		this.stopObserver();
+		super.disconnectedCallback();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("disabled")) {
+			if (this.disabled) this.stopObserver();
+			else if (!this.mutationObserver) this.startObserver();
+		}
+		if (changedProperties.has("attr") || changedProperties.has("attrOldValue") || changedProperties.has("attrFilter") || changedProperties.has("childList") || changedProperties.has("subtree") || changedProperties.has("characterData") || changedProperties.has("characterDataOldValue")) this.startObserver();
+	}
+	/** Starts or restarts the mutation observer. */
+	startObserver() {
+		this.stopObserver();
+		if (this.disabled) return;
+		this.mutationObserver = new MutationObserver((records) => {
+			records.forEach((record) => {
+				const mutationEvent = new SigveloMutationEvent({ record });
+				this.dispatchEvent(mutationEvent);
+			});
+		});
+		this.mutationObserver.observe(this, {
+			attributes: this.attr,
+			attributeOldValue: this.attrOldValue,
+			attributeFilter: this.attrFilter.length > 0 ? this.attrFilter.split(" ").map((attr) => attr.trim()) : void 0,
+			childList: this.childList,
+			subtree: this.subtree,
+			characterData: this.characterData,
+			characterDataOldValue: this.characterDataOldValue
+		});
+	}
+	/** Stops the mutation observer. */
+	stopObserver() {
+		this.mutationObserver?.disconnect();
+		this.mutationObserver = null;
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloMutationObserver.prototype, "disabled", void 0);
+__decorate([property({
+	attribute: "attr",
+	type: Boolean
+})], SigveloMutationObserver.prototype, "attr", void 0);
+__decorate([property({
+	attribute: "attr-old-value",
+	type: Boolean
+})], SigveloMutationObserver.prototype, "attrOldValue", void 0);
+__decorate([property({ attribute: "attr-filter" })], SigveloMutationObserver.prototype, "attrFilter", void 0);
+__decorate([property({
+	attribute: "child-list",
+	type: Boolean
+})], SigveloMutationObserver.prototype, "childList", void 0);
+__decorate([property({ type: Boolean })], SigveloMutationObserver.prototype, "subtree", void 0);
+__decorate([property({
+	attribute: "character-data",
+	type: Boolean
+})], SigveloMutationObserver.prototype, "characterData", void 0);
+__decorate([property({
+	attribute: "character-data-old-value",
+	type: Boolean
+})], SigveloMutationObserver.prototype, "characterDataOldValue", void 0);
+customElements.define("sigvelo-mutation-observer", SigveloMutationObserver);
+//#endregion
+export { SigveloMutationObserver as t };

package/dist/navicon-Dic5Qjzb.d.ts

@@ -0,0 +1,159 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/navicon/navicon.d.ts
+/**
+ * <sigvelo-navicon>
+ *
+ * @summary A navicon, or "hamburger button", is a special button used to control mobile navigation menus.
+ * @tag sigvelo-navicon
+ * @documentation https://design-system.sigvelo.com/docs/components/navicon
+ * @status stable
+ * @since 1.0
+ *
+ * @event sigvelo-blur - Emitted when the navicon loses focus. This event does not bubble.
+ * @event sigvelo-focus - Emitted when the navicon receives focus. This event does not bubble.
+ *
+ * @csspart line - The individual lines that make up the navicon symbol.
+ * @csspart line-top - The top line.
+ * @csspart line-middle - The middle line (hamburger symbol only).
+ * @csspart line-bottom - The bottom line.
+ *
+ * @cssstate expanded - Applied when the navicon is toggled on.
+ * @cssstate disabled - Applied when the navicon is disabled.
+ * @cssstate focused - Applied when the navicon has focus.
+ *
+ * @cssproperty [--dot-size=0.125em] - The width of each dot. Available when symbol is `vertical-dots` or `horizontal-dots`.
+ * @cssproperty [--line-width=0.0625em] - The width of each line. Available when symbol is `hamburger` or `equals`.
+ * @cssproperty [--line-transition-duration=200ms] - The duration of the symbol's animation.
+ * @cssproperty [--line-transition-easing=cubic-bezier(0.4, 0, 0.2, 1)] - The easing to use for the symbol's animation.
+ * @cssproperty [--dot-size=0.125em] - The size of the dots in the dots symbol.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-navicon label="Toggle menu" style="font-size: 1.75rem;"></sigvelo-navicon>
+ * ```
+ *
+ * @example Associating a menu
+ * To associate the navicon with a navigation menu, add `for="id"`, where `id` is the ID of the nav menu that will show/hide when toggled. This tells assistive devices which element the navicon controls. The nav menu must exist in the same document as the navicon to work correctly.
+ *
+ * ```html
+ * <sigvelo-navicon for="nav-menu"></sigvelo-navicon>
+ *
+ * <!-- The navicon will toggle this element -->
+ * <nav id="nav-menu">
+ *   ...
+ * </nav>
+ * ```
+ *
+ * **The navicon does not show or hide the menu for you.** You must add your own JavaScript and/or CSS to toggle it. You can listen for the `click` event and manage things with JavaScript.
+ *
+ * ```js
+ * const navicon = document.querySelector('sigvelo-navicon');
+ *
+ * navicon.addEventListener('click', () => {
+ *   if (navicon.expanded) {
+ *     // Show the menu
+ *   } else {
+ *     // Hide the menu
+ *   }
+ * });
+ * ```
+ *
+ * For a CSS-only solution, try using the `:has()` selector combined with `:state(expanded)` to target the nav menu when the navicon is expanded.
+ *
+ * ```css
+ * #nav-menu {
+ *   <!-- Hidden menu styles -->
+ * }
+ *
+ * body:has(sigvelo-navicon:state(expanded)) #nav-menu {
+ *   <!-- Visible menu styles -->
+ * }
+ * ```
+ *
+ * @example Customizing the label
+ * By default, the navicon's accessible label is a localized version of the phrase "toggle navigation." Use the `label` attribute to provide your own label. Labels aren't displayed on the screen, but they're announced by assistive devices.
+ *
+ * ```html
+ * <sigvelo-navicon label="View mobile menu" style="font-size: 1.75rem;"></sigvelo-navicon>
+ * ```
+ *
+ * @example Changing the symbol
+ * Use the `symbol` attribute to choose between the `hamburger`, `equals`, `horizontal-dots`, and `vertical-dots` symbols.
+ *
+ * ```html
+ * <div style="font-size: 1.75rem;">
+ *   <sigvelo-navicon symbol="hamburger"></sigvelo-navicon>
+ *   <sigvelo-navicon symbol="equals"></sigvelo-navicon>
+ *   <sigvelo-navicon symbol="horizontal-dots"></sigvelo-navicon>
+ *   <sigvelo-navicon symbol="vertical-dots"></sigvelo-navicon>
+ * </div>
+ * ```
+ *
+ * @example Changing the size
+ * Navicons are sized based on the current font size. You can make them bigger or smaller by changing the `font-size` property on the component or an ancestor. A good default size is 1.75rem, which equals 28&times;28px with a 16px root size.
+ *
+ * ```html
+ * <sigvelo-navicon style="font-size: 1rem;"></sigvelo-navicon>
+ * <sigvelo-navicon style="font-size: 1rem;" symbol="equals"></sigvelo-navicon>
+ * <sigvelo-navicon style="font-size: 1rem;" symbol="horizontal-dots"></sigvelo-navicon>
+ * <sigvelo-navicon style="font-size: 1rem;" symbol="vertical-dots"></sigvelo-navicon>
+ * <br><br>
+ * <sigvelo-navicon style="font-size: 3rem;"></sigvelo-navicon>
+ * <sigvelo-navicon style="font-size: 3rem;" symbol="equals" ></sigvelo-navicon>
+ * <sigvelo-navicon style="font-size: 3rem;" symbol="horizontal-dots" ></sigvelo-navicon>
+ * <sigvelo-navicon style="font-size: 3rem;" symbol="vertical-dots" ></sigvelo-navicon>
+ * ```
+ *
+ * @example Changing the color
+ * Set the `color` CSS property to control the color of the navicon.
+ *
+ * ```html
+ * <div style="font-size: 1.75rem;">
+ *   <sigvelo-navicon style="color: deeppink;"></sigvelo-navicon>
+ *   <sigvelo-navicon symbol="equals" style="color: dodgerblue;"></sigvelo-navicon>
+ *   <sigvelo-navicon symbol="horizontal-dots" style="color: seagreen;"></sigvelo-navicon>
+ *   <sigvelo-navicon symbol="vertical-dots" style="color: tomato;"></sigvelo-navicon>
+ * </div>
+ * ```
+ *
+ * @example Disabling
+ * Use the `disabled` attribute to disable the navicon.
+ *
+ * ```html
+ * <sigvelo-navicon disabled style="font-size: 1.75rem;"></sigvelo-navicon>
+ * ```
+ */
+declare class SigveloNavicon extends SigveloElement {
+  static styles: CSSResultGroup;
+  private localize;
+  /**
+   * The ID of the associated menu that gets shown/hidden when the navicon is toggled. The element must be in the same
+   * document as the navicon.
+   */
+  for: string;
+  /** Determines if the navicon is toggled on. */
+  expanded: boolean;
+  /** Determines the navicon's symbol. */
+  symbol: "hamburger" | "equals" | "horizontal-dots" | "vertical-dots";
+  /** Disables the navicon. */
+  disabled: boolean;
+  /** The accessible label for the navicon. */
+  label: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  private handleBlur;
+  private handleFocus;
+  private handleClick;
+  private handleKeyDown;
+  render(): import("lit-html").TemplateResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-navicon": SigveloNavicon;
+  }
+}
+//#endregion
+export { SigveloNavicon as t };