@mcp-b/web-components 0.2.0

package/dist/resize-observer-BseSbVWP.d.ts

@@ -0,0 +1,187 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/resize-observer/resize-observer.d.ts
+/**
+ * <sigvelo-resize-observer>
+ *
+ * @summary Watches child elements and dispatches an event when they resize.
+ * @tag sigvelo-resize-observer
+ * @documentation https://design-system.sigvelo.com/docs/components/resize
+ * @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-resize - Emitted when a slotted element is resized. Like `ResizeObserver`, this event is also dispatched
+ *  when each element is first observed. The `event.detail.entry` property contains a
+ *  [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) with information about
+ *  the element's dimensions.
+ *
+ * @example Default
+ * The component uses a ResizeObserver to monitor the dimensions of its direct children. A `sigvelo-resize` event is dispatched for each observed element, once when the element is first observed and once every time the element is resized.
+ *
+ * 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="resize__overview">
+ *   <sigvelo-resize-observer>
+ *     <div class="resizable">
+ *       <div class="handle"></div>
+ *     </div>
+ *   </sigvelo-resize-observer>
+ *
+ *   <div class="dimensions"></div>
+ * </div>
+ *
+ * <script>
+ *   const container = document.getElementById('resize__overview');
+ *   const resizeObserver = container.querySelector('sigvelo-resize-observer');
+ *
+ *   <!-- Log the element's dimensions on resize -->
+ *   resizeObserver.addEventListener('sigvelo-resize', event => {
+ *     const contentRect = event.detail.entry.contentRect;
+ *     const width = Math.round(contentRect.width);
+ *     const height = Math.round(contentRect.height);
+ *
+ *     dimensions.innerHTML = `${width}px &times; ${height}px`;
+ *   });
+ *
+ *   <!-- The code below is just to make the example resizable -->
+ *   const resizable = container.querySelector('.resizable');
+ *   const handle = container.querySelector('.handle');
+ *   const dimensions = container.querySelector('.dimensions');
+ *   let isResizing = false;
+ *   let startX, startY, startWidth, startHeight;
+ *
+ *   function startResize(event) {
+ *     isResizing = true;
+ *     startX = event.clientX;
+ *     startY = event.clientY;
+ *     startWidth = resizable.offsetWidth;
+ *     startHeight = resizable.offsetHeight;
+ *     document.addEventListener('pointermove', resize);
+ *     document.addEventListener('pointerup', stopResize);
+ *     handle.setPointerCapture(event.pointerId);
+ *     event.preventDefault();
+ *   }
+ *
+ *   function resize(event) {
+ *     if (!isResizing) return;
+ *     const width = startWidth + (event.clientX - startX);
+ *     const height = startHeight + (event.clientY - startY);
+ *
+ *     resizable.style.width = `${width}px`;
+ *     resizable.style.height = `${height}px`;
+ *   }
+ *
+ *   function stopResize(event) {
+ *     if (!isResizing) return;
+ *     isResizing = false;
+ *     document.removeEventListener('pointermove', resize);
+ *     document.removeEventListener('pointerup', stopResize);
+ *     handle.releasePointerCapture(event.pointerId);
+ *   }
+ *
+ *   handle.addEventListener('pointerdown', startResize);
+ *
+ *   // Show initial dimensions
+ *   dimensions.innerHTML = `${resizable.clientWidth}px &times; ${resizable.clientHeight}px`;
+ * </script>
+ *
+ * <style>
+ *   #resize__overview {
+ *     position: relative;
+ *     height: 200px;
+ *
+ *     .resizable {
+ *       z-index: 2;
+ *       position: relative;
+ *       width: 100%;
+ *       min-width: 50px;
+ *       max-width: 100%;
+ *       height: 100%;
+ *       min-height: 50px;
+ *       max-height: 200px;
+ *       border: solid 2px var(--sigvelo-color-neutral-border-subtle);
+ *       border-radius: var(--sigvelo-radius-md);
+ *     }
+ *
+ *     .handle {
+ *       position: absolute;
+ *       bottom: calc(-0.75rem + 1px);
+ *       right: calc(-0.75rem + 1px);
+ *       width: 1.5rem;
+ *       height: 1.5rem;
+ *       background-color: var(--sigvelo-color-primary-bg);
+ *       border: solid 2px light-dark(white, black);
+ *       border-radius: var(--sigvelo-radius-circle);
+ *       cursor: nwse-resize;
+ *       touch-action: none;
+ *     }
+ *
+ *     .dimensions {
+ *       position: absolute;
+ *       z-index: 1;
+ *       top: calc(50% - 0.5lh);
+ *       left: calc(50% - 100px);
+ *       width: 200px;
+ *       font-size: .9375em;
+ *       pointer-events: none;
+ *       text-align: center;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * **Note:** Remember that only direct children of the host element are observed. Nested elements will not trigger intersection events.
+ *
+ * @example Providing content
+ * Slot one or more elements into the resize observer and listen for the `sigvelo-resize` event. The event includes `event.detail.entry`, which is a `ResizeObserverEntry` object that corresponds to the observed change.
+ *
+ * In it's simplest form, a resize observer can be used like this.
+ *
+ * ```html
+ * <sigvelo-resize-observer>
+ *   ...
+ * </sigvelo-resize-observer>
+ *
+ * <script>
+ *   const resizeObserver = document.querySelector('sigvelo-resize-observer');
+ *
+ *   // Listen for resizes
+ *   resizeObserver.addEventListener('sigvelo-resize', event => {
+ *     console.log(event.detail.entry); // ResizeObserverEntry
+ *   });
+ * </script>
+ * ```
+ *
+ * **Note:** Remember that only direct children of the host element are observed.
+ */
+declare class SigveloResizeObserver extends SigveloElement {
+  static styles: CSSResultGroup;
+  private hasInitialized;
+  private resizeObserver;
+  /** Disables the resize observer. */
+  disabled: boolean;
+  /** Sets which box model the observer will observe changes to. */
+  box: "content-box" | "border-box" | "device-pixel-content-box";
+  connectedCallback(): void;
+  /** Component lifecycle method that runs when the element disconnects from the DOM */
+  disconnectedCallback(): void;
+  /** Component lifecycle method that runs when properties change */
+  updated(changedProperties: PropertyValues<this>): void;
+  private handleSlotChange;
+  /** Starts or restarts the resize observer. */
+  private startObserver;
+  /** Stops the resize observer. */
+  private stopObserver;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-resize-observer": SigveloResizeObserver;
+  }
+}
+//#endregion
+export { SigveloResizeObserver as t };

package/dist/resize-observer-DcrLhddo.js

@@ -0,0 +1,236 @@
+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 { SigveloResizeEvent } from "@mcp-b/wc-support/events/resize";
+//#region src/components/resize-observer/resize-observer.styles.ts
+var resize_observer_styles_default = css`
+  :host {
+    display: contents;
+  }
+`;
+//#endregion
+//#region src/components/resize-observer/resize-observer.ts
+/**
+* <sigvelo-resize-observer>
+*
+* @summary Watches child elements and dispatches an event when they resize.
+* @tag sigvelo-resize-observer
+* @documentation https://design-system.sigvelo.com/docs/components/resize
+* @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-resize - Emitted when a slotted element is resized. Like `ResizeObserver`, this event is also dispatched
+*  when each element is first observed. The `event.detail.entry` property contains a
+*  [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) with information about
+*  the element's dimensions.
+*
+* @example Default
+* The component uses a ResizeObserver to monitor the dimensions of its direct children. A `sigvelo-resize` event is dispatched for each observed element, once when the element is first observed and once every time the element is resized.
+*
+* 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="resize__overview">
+*   <sigvelo-resize-observer>
+*     <div class="resizable">
+*       <div class="handle"></div>
+*     </div>
+*   </sigvelo-resize-observer>
+*
+*   <div class="dimensions"></div>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('resize__overview');
+*   const resizeObserver = container.querySelector('sigvelo-resize-observer');
+*
+*   <!-- Log the element's dimensions on resize -->
+*   resizeObserver.addEventListener('sigvelo-resize', event => {
+*     const contentRect = event.detail.entry.contentRect;
+*     const width = Math.round(contentRect.width);
+*     const height = Math.round(contentRect.height);
+*
+*     dimensions.innerHTML = `${width}px &times; ${height}px`;
+*   });
+*
+*   <!-- The code below is just to make the example resizable -->
+*   const resizable = container.querySelector('.resizable');
+*   const handle = container.querySelector('.handle');
+*   const dimensions = container.querySelector('.dimensions');
+*   let isResizing = false;
+*   let startX, startY, startWidth, startHeight;
+*
+*   function startResize(event) {
+*     isResizing = true;
+*     startX = event.clientX;
+*     startY = event.clientY;
+*     startWidth = resizable.offsetWidth;
+*     startHeight = resizable.offsetHeight;
+*     document.addEventListener('pointermove', resize);
+*     document.addEventListener('pointerup', stopResize);
+*     handle.setPointerCapture(event.pointerId);
+*     event.preventDefault();
+*   }
+*
+*   function resize(event) {
+*     if (!isResizing) return;
+*     const width = startWidth + (event.clientX - startX);
+*     const height = startHeight + (event.clientY - startY);
+*
+*     resizable.style.width = `${width}px`;
+*     resizable.style.height = `${height}px`;
+*   }
+*
+*   function stopResize(event) {
+*     if (!isResizing) return;
+*     isResizing = false;
+*     document.removeEventListener('pointermove', resize);
+*     document.removeEventListener('pointerup', stopResize);
+*     handle.releasePointerCapture(event.pointerId);
+*   }
+*
+*   handle.addEventListener('pointerdown', startResize);
+*
+*   // Show initial dimensions
+*   dimensions.innerHTML = `${resizable.clientWidth}px &times; ${resizable.clientHeight}px`;
+* <\/script>
+*
+* <style>
+*   #resize__overview {
+*     position: relative;
+*     height: 200px;
+*
+*     .resizable {
+*       z-index: 2;
+*       position: relative;
+*       width: 100%;
+*       min-width: 50px;
+*       max-width: 100%;
+*       height: 100%;
+*       min-height: 50px;
+*       max-height: 200px;
+*       border: solid 2px var(--sigvelo-color-neutral-border-subtle);
+*       border-radius: var(--sigvelo-radius-md);
+*     }
+*
+*     .handle {
+*       position: absolute;
+*       bottom: calc(-0.75rem + 1px);
+*       right: calc(-0.75rem + 1px);
+*       width: 1.5rem;
+*       height: 1.5rem;
+*       background-color: var(--sigvelo-color-primary-bg);
+*       border: solid 2px light-dark(white, black);
+*       border-radius: var(--sigvelo-radius-circle);
+*       cursor: nwse-resize;
+*       touch-action: none;
+*     }
+*
+*     .dimensions {
+*       position: absolute;
+*       z-index: 1;
+*       top: calc(50% - 0.5lh);
+*       left: calc(50% - 100px);
+*       width: 200px;
+*       font-size: .9375em;
+*       pointer-events: none;
+*       text-align: center;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** Remember that only direct children of the host element are observed. Nested elements will not trigger intersection events.
+*
+* @example Providing content
+* Slot one or more elements into the resize observer and listen for the `sigvelo-resize` event. The event includes `event.detail.entry`, which is a `ResizeObserverEntry` object that corresponds to the observed change.
+*
+* In it's simplest form, a resize observer can be used like this.
+*
+* ```html
+* <sigvelo-resize-observer>
+*   ...
+* </sigvelo-resize-observer>
+*
+* <script>
+*   const resizeObserver = document.querySelector('sigvelo-resize-observer');
+*
+*   // Listen for resizes
+*   resizeObserver.addEventListener('sigvelo-resize', event => {
+*     console.log(event.detail.entry); // ResizeObserverEntry
+*   });
+* <\/script>
+* ```
+*
+* **Note:** Remember that only direct children of the host element are observed.
+*/
+var SigveloResizeObserver = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hasInitialized = false;
+		this.resizeObserver = null;
+		this.disabled = false;
+		this.box = "content-box";
+	}
+	static {
+		this.styles = [hostStyles, resize_observer_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.startObserver();
+		requestAnimationFrame(() => {
+			this.hasInitialized = true;
+		});
+	}
+	/** Component lifecycle method that runs when the element disconnects from the DOM */
+	disconnectedCallback() {
+		this.stopObserver();
+		super.disconnectedCallback();
+	}
+	/** Component lifecycle method that runs when properties change */
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("disabled") && this.hasInitialized) {
+			if (this.disabled) this.stopObserver();
+			else if (!this.resizeObserver) this.startObserver();
+		}
+		if (changedProperties.has("box") && this.hasInitialized) this.startObserver();
+	}
+	handleSlotChange() {
+		if (this.hasInitialized) this.startObserver();
+	}
+	/** Starts or restarts the resize observer. */
+	startObserver() {
+		this.stopObserver();
+		if (this.disabled) return;
+		this.resizeObserver = new ResizeObserver((entries) => {
+			entries.forEach((entry) => {
+				const resizeEvent = new SigveloResizeEvent({ entry });
+				this.dispatchEvent(resizeEvent);
+			});
+		});
+		[...this.children].forEach((child) => {
+			this.resizeObserver?.observe(child, { box: this.box });
+		});
+	}
+	/** Stops the resize observer. */
+	stopObserver() {
+		this.resizeObserver?.disconnect();
+		this.resizeObserver = null;
+	}
+	render() {
+		return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloResizeObserver.prototype, "disabled", void 0);
+__decorate([property()], SigveloResizeObserver.prototype, "box", void 0);
+customElements.define("sigvelo-resize-observer", SigveloResizeObserver);
+//#endregion
+export { SigveloResizeObserver as t };

package/dist/scroll-area-COc1857S.js

@@ -0,0 +1,127 @@
+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";
+//#region src/components/scroll-area/scroll-area.styles.ts
+var scroll_area_styles_default = css`
+  :host {
+    --thumb-color: var(--sigvelo-color-neutral-bg);
+    --thumb-hover-color: var(--sigvelo-color-neutral-bg-strong);
+    --track-color: transparent;
+    --scroll-area-height: auto;
+
+    display: block;
+  }
+
+  #viewport {
+    height: var(--scroll-area-height);
+    scrollbar-width: thin;
+    scrollbar-color: var(--thumb-color) var(--track-color);
+  }
+
+  :host([orientation="vertical"]) #viewport {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  :host([orientation="horizontal"]) #viewport {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  :host([orientation="both"]) #viewport {
+    overflow: auto;
+  }
+
+  /* Webkit scrollbar styling */
+  #viewport::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  #viewport::-webkit-scrollbar-track {
+    background: var(--track-color);
+  }
+
+  #viewport::-webkit-scrollbar-thumb {
+    background-color: var(--thumb-color);
+    border-radius: var(--sigvelo-radius-full);
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  #viewport::-webkit-scrollbar-thumb:hover {
+    background-color: var(--thumb-hover-color);
+  }
+
+  #viewport::-webkit-scrollbar-corner {
+    background: var(--track-color);
+  }
+`;
+//#endregion
+//#region src/components/scroll-area/scroll-area.ts
+/**
+* <sigvelo-scroll-area>
+*
+* @summary A container with styled scrollbars.
+* @tag sigvelo-scroll-area
+* @status experimental
+* @since 1.0
+*
+* @slot - The scrollable content.
+*
+* @cssproperty [--thumb-color=var(--sigvelo-color-neutral-bg)] - The scrollbar thumb color.
+* @cssproperty [--thumb-hover-color] - The scrollbar thumb color on hover.
+* @cssproperty [--track-color=transparent] - The scrollbar track color.
+* @cssproperty [--scroll-area-height=auto] - The height of the scroll area.
+*
+* @csspart viewport - The scrollable viewport container.
+*
+* @example Default
+* ```html
+* <sigvelo-scroll-area style="--scroll-area-height: 200px;">
+*   <div style="padding: 1rem;">
+*     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+*     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+*     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+*     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+*     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+*     <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
+*   </div>
+* </sigvelo-scroll-area>
+* ```
+*
+* @example Horizontal scrolling
+* ```html
+* <sigvelo-scroll-area orientation="horizontal" style="--scroll-area-height: auto;">
+*   <div style="display: flex; gap: 1rem; padding: 1rem; width: max-content;">
+*     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
+*     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-muted); border-radius: var(--sigvelo-radius-md);"></div>
+*     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
+*     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-muted); border-radius: var(--sigvelo-radius-md);"></div>
+*     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
+*   </div>
+* </sigvelo-scroll-area>
+* ```
+*/
+var SigveloScrollArea = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "vertical";
+	}
+	static {
+		this.styles = [hostStyles, scroll_area_styles_default];
+	}
+	render() {
+		return html`
+      <div id="viewport" part="viewport" tabindex="0">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ reflect: true })], SigveloScrollArea.prototype, "orientation", void 0);
+customElements.define("sigvelo-scroll-area", SigveloScrollArea);
+//#endregion
+export { SigveloScrollArea as t };

package/dist/scroll-area-CVYDf5qY.d.ts

@@ -0,0 +1,61 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/scroll-area/scroll-area.d.ts
+/**
+ * <sigvelo-scroll-area>
+ *
+ * @summary A container with styled scrollbars.
+ * @tag sigvelo-scroll-area
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The scrollable content.
+ *
+ * @cssproperty [--thumb-color=var(--sigvelo-color-neutral-bg)] - The scrollbar thumb color.
+ * @cssproperty [--thumb-hover-color] - The scrollbar thumb color on hover.
+ * @cssproperty [--track-color=transparent] - The scrollbar track color.
+ * @cssproperty [--scroll-area-height=auto] - The height of the scroll area.
+ *
+ * @csspart viewport - The scrollable viewport container.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-scroll-area style="--scroll-area-height: 200px;">
+ *   <div style="padding: 1rem;">
+ *     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+ *     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ *     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+ *     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ *     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+ *     <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
+ *   </div>
+ * </sigvelo-scroll-area>
+ * ```
+ *
+ * @example Horizontal scrolling
+ * ```html
+ * <sigvelo-scroll-area orientation="horizontal" style="--scroll-area-height: auto;">
+ *   <div style="display: flex; gap: 1rem; padding: 1rem; width: max-content;">
+ *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
+ *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-muted); border-radius: var(--sigvelo-radius-md);"></div>
+ *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
+ *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-muted); border-radius: var(--sigvelo-radius-md);"></div>
+ *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
+ *   </div>
+ * </sigvelo-scroll-area>
+ * ```
+ */
+declare class SigveloScrollArea extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** Which axis to allow scrolling on. */
+  orientation: "vertical" | "horizontal" | "both";
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-scroll-area": SigveloScrollArea;
+  }
+}
+//#endregion
+export { SigveloScrollArea as t };