@mcp-b/web-components 0.2.0

package/dist/accordion-zDr-Br4V.js

@@ -0,0 +1,483 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./accordion-item-DvPfhpm8.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { SigveloBeforeCollapseEvent, SigveloBeforeExpandEvent, SigveloCollapseEvent, SigveloExpandEvent } from "@mcp-b/wc-support/events/expand-collapse";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/accordion/accordion.styles.ts
+var accordion_styles_default = css`
+  :host {
+    --duration: var(--sigvelo-motion-duration-presence);
+    --easing: ease;
+    --sigvelo-accordion-border-color: var(--sigvelo-color-neutral-border-subtle);
+    --border-width: var(--sigvelo-border-width);
+    --border-style: var(--sigvelo-border-style);
+    --border-radius: var(--sigvelo-radius-md);
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  /* Contained variant */
+  :host([variant="contained"]) {
+    border: var(--border-style) var(--border-width) var(--sigvelo-accordion-border-color);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-hairline);
+  }
+
+  /* Separated variant */
+  :host([variant="separated"]) {
+    gap: 1em;
+  }
+`;
+//#endregion
+//#region src/components/accordion/accordion.ts
+/**
+* <sigvelo-accordion>
+*
+* @summary A container for content that expands and collapses when selected.
+* @tag sigvelo-accordion
+* @documentation https://design-system.sigvelo.com/docs/components/accordion
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-accordion-item
+*
+* @slot - One or more `<sigvelo-accordion-item>` elements to place in the accordion.
+*
+* @event sigvelo-before-expand - Emitted when an accordion item is instructed to expand but before it is shown. Calling
+*  `event.preventDefault()` will prevent the item from expanding. `event.detail.item` will contain the expanding item.
+* @event sigvelo-expand - Emitted after an accordion item has been expanded. `event.detail.item` will contain the
+*  expanded item.
+* @event sigvelo-before-collapse - Emitted when an accordion item is instructed to collapse but before it is hidden.
+*  Calling `event.preventDefault()` will prevent the item from collapsing. `event.detail.item` will contain the
+*  collapsing item.
+* @event sigvelo-collapse - Emitted after an accordion item has been collapsed. `event.detail.item` will contain the
+*  collapsed item.
+*
+* @cssproperty [--duration=200ms] - The expand and collapse duration.
+* @cssproperty [--easing=ease] - The expand and collapse easing.
+* @cssproperty [--sigvelo-accordion-border-color=var(--sigvelo-color-neutral-border-subtle)] - The accordion's border color.
+* @cssproperty [--border-width=var(--sigvelo-border-width)] - The accordion's border width.
+* @cssproperty [--border-style=var(--sigvelo-border-style)] - The accordion's border style.
+* @cssproperty [--border-radius=var(--sigvelo-radius-md)] - The border radius to apply to rounded edges.
+*
+* @example Default
+* Accordions follow the ARIA APG accordion pattern for accessibility. They are comprised of two different components. A single accordion surrounds one or more accordion items.
+*
+* ```html
+* <sigvelo-accordion>
+*   <sigvelo-accordion-item>
+*     <span slot="label">What is a cat?</span>
+*     <p>A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item>
+*     <span slot="label">When should I adopt one?</span>
+*     <p>Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item>
+*     <span slot="label">Cat care best practices</span>
+*     <p>Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+* ```
+*
+* @example Providing content
+* Use the `label` attribute to provide a plain text label. To provide icons and other HTML, use the `label` slot instead.
+*
+* ```html
+* <sigvelo-accordion>
+*   <sigvelo-accordion-item label="Why do cats purr?">
+*     <p>Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Why do cats knead with their paws?">
+*     <p>Kneading is a comfort behavior from kittenhood when they kneaded their mother's belly for milk. Adult cats knead when they're happy and relaxed.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item>
+*     <sigvelo-icon slot="label" name="cat"></sigvelo-icon>
+*     <span slot="label">Cat behavior mysteries</span>
+*     <p>From zoomies at 3 AM to bringing you "gifts" of dead mice, cats are wonderfully mysterious creatures with behaviors that keep us guessing.</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+* ```
+*
+* @example Expanded initially
+* Add the `expanded` attribute to any accordion item that should be expanded initially.
+*
+* ```html
+* <sigvelo-accordion>
+*   <sigvelo-accordion-item expanded>
+*     <span slot="label">What is a cat?</span>
+*     <p>A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item>
+*     <span slot="label">When should I adopt one?</span>
+*     <p>Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item>
+*     <span slot="label">Cat care best practices</span>
+*     <p>Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+* ```
+*
+* @example Changing the variant
+* Set the `variant` attribute to `normal`, `contained`, `separated`, or `unstyled` to control the accordion's variant.
+*
+* ```html
+* <div id="accordion__appearance">
+*   <sigvelo-radio label="Appearance" value="normal">
+*     <sigvelo-radio-item value="normal">Normal</sigvelo-radio-item>
+*     <sigvelo-radio-item value="contained">Contained</sigvelo-radio-item>
+*     <sigvelo-radio-item value="separated">Separated</sigvelo-radio-item>
+*     <sigvelo-radio-item value="unstyled">Unstyled</sigvelo-radio-item>
+*   </sigvelo-radio>
+*
+*   <sigvelo-accordion>
+*     <sigvelo-accordion-item expanded>
+*       <span slot="label">What is a cat?</span>
+*       <p>A cat is a small, independent feline companion known for their purring, hunting skills, and tendency to knock things off tables. They're perfect for providing endless entertainment, companionship, and the occasional hairball surprise.</p>
+*     </sigvelo-accordion-item>
+*
+*     <sigvelo-accordion-item>
+*       <span slot="label">When should I adopt one?</span>
+*       <p>Adopt a cat when you're ready for a lifetime commitment of love, responsibility, and being owned by a furry overlord. They're ideal when you need a companion who will judge your life choices while simultaneously demanding treats.</p>
+*     </sigvelo-accordion-item>
+*
+*     <sigvelo-accordion-item>
+*       <span slot="label">Cat care best practices</span>
+*       <p>Essential cat care includes keeping litter boxes clean and accessible, providing scratching posts to save your furniture, scheduling regular vet checkups, and ensuring they have cozy hiding spots and sunny windowsills for optimal feline happiness.</p>
+*     </sigvelo-accordion-item>
+*   </sigvelo-accordion>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('accordion__appearance');
+*   const accordion = container.querySelector('sigvelo-accordion');
+*   const radio = container.querySelector('sigvelo-radio');
+*
+*   radio.addEventListener('input', () => {
+*     accordion.variant = radio.value;
+*   });
+* <\/script>
+*
+* <style>
+*   #accordion__appearance {
+*     sigvelo-radio {
+*       margin-block-end: 2rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Changing the size
+* Accordions are sized based on the current font size. To change their size, set the `font-size` on the accordion or an ancestor element.
+*
+* ```html
+* <sigvelo-accordion style="font-size: 1.25rem;">
+*   <sigvelo-accordion-item label="Why do cats purr?">
+*     <p>Cats purr for many reasons including contentment, self-healing, and communication. It's their built-in happiness meter!</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Cat grooming habits">
+*     <p>Cats spend 30-50% of their day grooming themselves to stay clean, regulate temperature, and reduce stress.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Why do cats sleep so much?">
+*     <p>Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+* ```
+*
+* @example Disabling items
+* Use the `disabled` attribute to prevent users from expanding certain accordion items. This is useful for sections that require certain conditions to be met before they can be accessed.
+*
+* ```html
+* <sigvelo-accordion>
+*   <sigvelo-accordion-item label="Indoor cats">
+*     <p>Indoor cats live longer, safer lives and are protected from outdoor dangers like traffic, predators, and diseases.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Outdoor cats" disabled>
+*     <p>This section about outdoor cats is disabled until you've completed the indoor cat safety course.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Senior cat care">
+*     <p>Senior cats need extra attention with diet, comfort, and regular health monitoring as they age gracefully.</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+* ```
+*
+* @example Allowing multiple expanded items
+* By default, opening an accordion item collapses the previously expanded item. Add `multiple` to allow more than one item to remain expanded.
+*
+* ```html
+* <sigvelo-accordion multiple>
+*   <sigvelo-accordion-item label="Kitten care" expanded>
+*     <p>When multiple is enabled, opening another section leaves this one expanded. Kittens need frequent feeding, socialization, and lots of love!</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Adult cat care">
+*     <p>Click me to keep both life stages expanded. Adult cats are more independent but still need daily attention and care.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Senior cat care">
+*     <p>Several cat life stages can remain visible when multiple is enabled. Senior cats deserve extra comfort and patience.</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+* ```
+*
+* @example Changing the icon placement
+* Set the `icon-placement` to `start` to render the icon on the front of the header.
+*
+* ```html
+* <sigvelo-accordion icon-placement="start">
+*   <sigvelo-accordion-item label="Why do cats sleep so much?">
+*     <p>Cats sleep 12-16 hours a day because they're natural predators who conserve energy for hunting (even if they're just hunting dust bunnies).</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Do cats dream?">
+*     <p>Yes! Cats experience REM sleep and likely dream about hunting, playing, or plotting world domination.</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+* ```
+*
+* @example Customizing the icon
+* The expand/collapse icon can be customized by slotting in your own icon. If you don't want the default rotation, target the `icon` part and set the `rotate` property to a custom rotation angle.
+*
+* ```html
+* <sigvelo-accordion id="accordion__custom-icon">
+*   <sigvelo-accordion-item label="Cat communication">
+*     <sigvelo-icon slot="icon" name="chevron-right"></sigvelo-icon>
+*     <p>Cats communicate through meowing, purring, chirping, and the infamous slow blink of love.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Cat body language">
+*     <sigvelo-icon slot="icon" name="chevron-right"></sigvelo-icon>
+*     <p>A cat's tail, ears, and posture tell you everything about their mood - from happy to "I'm plotting your demise."</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+*
+* <style>
+*   #accordion__custom-icon {
+*     sigvelo-accordion-item::part(icon) {
+*       rotate: 0deg;
+*     }
+*
+*     sigvelo-accordion-item:state(expanded)::part(icon) {
+*       rotate: 90deg;
+*     }
+*   }
+* </style>
+* ```
+*
+* A common way to style accordion icons is with plus and minus icons. For this, you can toggle which icon shows when the accordion item is expanded using the `:state(expanded)` CSS selector.
+*
+* ```html
+* <sigvelo-accordion id="accordion__plus-minus">
+*   <sigvelo-accordion-item label="Cat breeds">
+*     <sigvelo-icon slot="icon" name="plus" class="plus"></sigvelo-icon>
+*     <sigvelo-icon slot="icon" name="minus" class="minus"></sigvelo-icon>
+*     <p>From fluffy Maine Coons to hairless Sphynx cats, there are over 40 recognized cat breeds, each with their own personality traits.</p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item label="Cat colors and patterns">
+*     <sigvelo-icon slot="icon" name="plus" class="plus"></sigvelo-icon>
+*     <sigvelo-icon slot="icon" name="minus" class="minus"></sigvelo-icon>
+*     <p>Cats come in amazing colors and patterns like tabby, calico, tuxedo, and tortoiseshell - nature's own art gallery!</p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+*
+* <style>
+*   #accordion__plus-minus .minus {
+*     display: none;
+*   }
+*
+*   <!-- When expanded: hide plus and show minus -->
+*   #accordion__plus-minus sigvelo-accordion-item:state(expanded) .plus {
+*     display: none;
+*   }
+*
+*   #accordion__plus-minus sigvelo-accordion-item:state(expanded) .minus {
+*     display: block;
+*   }
+* </style>
+* ```
+*
+* @example Customizing label content
+* Accordions can have structured content as labels, but consider the experience for screen reader users. You may want to add `aria-hidden="true'` to decorative elements and supplementary text that don't add meaningful context when the accordion is navigated with assistive technology.
+*
+* ```html
+* <sigvelo-accordion variant="contained" id="accordion__styling">
+*   <sigvelo-accordion-item>
+*     <div slot="label">
+*       <sigvelo-avatar image="https://images.unsplash.com/photo-1672487209629-4d52e0c043d0?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*       <div>
+*         Meowy McGee
+*         <p aria-hidden="true"><small>Freedom's just another word for nothing left to lose</small></p>
+*       </div>
+*     </div>
+*     <p>
+*       A philosophical feline with a rebellious streak, Meowy spends their days contemplating the deeper meaning of cardboard boxes and refusing to acknowledge the concept of "off-limits" furniture. When not busy knocking things off counters with purposeful intent, they can be found staring intensely at walls, presumably seeing things the rest of us mere mortals cannot.
+*     </p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item>
+*     <div slot="label">
+*       <sigvelo-avatar image="https://images.unsplash.com/photo-1516310789627-2ff305829fbb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*       <div>
+*         Lady Pawington
+*         <p aria-hidden="true"><small>Professional sunbeam chaser and nap enthusiast</small></p>
+*       </div>
+*     </div>
+*     <p>
+*       The epitome of feline sophistication, Lady Pawington has mastered the art of finding the perfect sunbeam at precisely 2:47 PM every day. She maintains a rigorous schedule of 16-hour power naps, interrupted only by brief but important meetings with her food bowl and the occasional judgmental stare at the humans who dare to disturb her royal slumber.
+*     </p>
+*   </sigvelo-accordion-item>
+*
+*   <sigvelo-accordion-item>
+*     <div slot="label">
+*       <sigvelo-avatar image="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*       <div>
+*         Sir Whiskertons III
+*         <p aria-hidden="true"><small>Living all nine lives to the fullest, one treat at a time</small></p>
+*       </div>
+*     </div>
+*     <p>
+*       A distinguished gentleman cat with an insatiable appetite for adventure (and treats), Sir Whiskertons approaches each day like it's his personal buffet of experiences. Whether he's conducting important business meetings with dust bunnies under the couch or hosting diplomatic summits with the neighborhood squirrels from his window perch, he does it all with the confidence of someone who knows they've got eight lives in reserve.
+*     </p>
+*   </sigvelo-accordion-item>
+* </sigvelo-accordion>
+*
+* <style>
+*   #accordion__styling {
+*     div[slot="label"] {
+*       display: flex;
+*       align-items: center;
+*       gap: 1rem;
+*
+*       p {
+*         line-height: 1.2;
+*       }
+*     }
+*
+*   }
+* </style>
+* ```
+*/
+var SigveloAccordion = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.multiple = false;
+		this.variant = "normal";
+		this.iconPlacement = "end";
+		this.handleClick = (event) => {
+			const path = event.composedPath();
+			const item = path.find((el) => el instanceof HTMLElement && el.localName === "sigvelo-accordion-item");
+			if (item && !item.disabled) {
+				const header = item.header;
+				if (header && path.includes(header)) this.handleItemToggle(item);
+			}
+		};
+	}
+	static {
+		this.styles = [hostStyles, accordion_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this.handleClick);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("variant") || changedProperties.has("iconPlacement") || changedProperties.has("multiple")) this.syncItemProperties();
+	}
+	/** Get accordion items from the default slot */
+	getItems() {
+		return this.defaultSlot.assignedElements().filter((el) => el.tagName.toLowerCase() === "sigvelo-accordion-item");
+	}
+	/** @internal Handles accordion item toggle requests */
+	async handleItemToggle(item) {
+		if (!item.expanded) {
+			const beforeExpandEvent = new SigveloBeforeExpandEvent(item);
+			this.dispatchEvent(beforeExpandEvent);
+			if (beforeExpandEvent.defaultPrevented) return false;
+			const itemsToCollapse = [];
+			if (!this.multiple) {
+				const items = this.getItems();
+				for (const otherItem of items) if (otherItem !== item && otherItem.expanded) {
+					const beforeCollapseEvent = new SigveloBeforeCollapseEvent(otherItem);
+					this.dispatchEvent(beforeCollapseEvent);
+					if (!beforeCollapseEvent.defaultPrevented) {
+						otherItem.expanded = false;
+						itemsToCollapse.push(otherItem);
+					}
+				}
+			}
+			item.expanded = true;
+			const animations = [item.animateExpand()];
+			for (const collapsingItem of itemsToCollapse) animations.push(collapsingItem.animateCollapse());
+			await Promise.allSettled(animations);
+			this.dispatchEvent(new SigveloExpandEvent(item));
+			for (const collapsedItem of itemsToCollapse) this.dispatchEvent(new SigveloCollapseEvent(collapsedItem));
+			return true;
+		} else {
+			const beforeCollapseEvent = new SigveloBeforeCollapseEvent(item);
+			this.dispatchEvent(beforeCollapseEvent);
+			if (beforeCollapseEvent.defaultPrevented) return false;
+			item.expanded = false;
+			await item.animateCollapse();
+			this.dispatchEvent(new SigveloCollapseEvent(item));
+			return true;
+		}
+	}
+	handleSlotChange() {
+		this.syncItemProperties();
+	}
+	/** Sync variant and iconPlacement to accordion items */
+	syncItemProperties() {
+		const items = this.getItems();
+		let foundExpandedItem = false;
+		items.forEach((item, index) => {
+			item.variant = this.variant;
+			item.iconPlacement = this.iconPlacement;
+			if (!this.multiple && item.expanded) {
+				if (foundExpandedItem) item.expanded = false;
+				foundExpandedItem = true;
+			}
+			const isFirst = index === 0;
+			const isLast = index === items.length - 1;
+			const isMiddle = items.length > 2 && !isFirst && !isLast;
+			item.toggleAttribute("data-accordion-item-first", isFirst);
+			item.toggleAttribute("data-accordion-item-middle", isMiddle);
+			item.toggleAttribute("data-accordion-item-last", isLast);
+		});
+	}
+	render() {
+		return html`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+};
+__decorate([query("slot:not([name])")], SigveloAccordion.prototype, "defaultSlot", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloAccordion.prototype, "multiple", void 0);
+__decorate([property({ reflect: true })], SigveloAccordion.prototype, "variant", void 0);
+__decorate([property({
+	attribute: "icon-placement",
+	reflect: true
+})], SigveloAccordion.prototype, "iconPlacement", void 0);
+customElements.define("sigvelo-accordion", SigveloAccordion);
+//#endregion
+export { SigveloAccordion as t };

package/dist/action-bar-CYsjmhwP.d.ts

@@ -0,0 +1,29 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/action-bar/action-bar.d.ts
+type ActionBarAlignment = "start" | "end" | "space-between";
+/**
+ * <sigvelo-action-bar>
+ *
+ * @summary Aligns contextual status and actions in a responsive horizontal group.
+ * @tag sigvelo-action-bar
+ * @documentation https://design-system.sigvelo.com/docs/components/action-bar
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - Status, buttons, or other compact action controls.
+ */
+declare class SigveloActionBar extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** Alignment of the slotted content. */
+  align: ActionBarAlignment;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-action-bar": SigveloActionBar;
+  }
+}
+//#endregion
+export { SigveloActionBar as n, ActionBarAlignment as t };

package/dist/action-bar-CjN_UcnP.js

@@ -0,0 +1,56 @@
+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/action-bar/action-bar.styles.ts
+var action_bar_styles_default = css`
+  :host {
+    display: flex;
+    align-items: center;
+    gap: var(--sigvelo-spacing-3);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+
+  :host([align="start"]) {
+    justify-content: flex-start;
+  }
+
+  :host([align="end"]) {
+    justify-content: flex-end;
+  }
+
+  :host([align="space-between"]) {
+    justify-content: space-between;
+  }
+`;
+//#endregion
+//#region src/components/action-bar/action-bar.ts
+/**
+* <sigvelo-action-bar>
+*
+* @summary Aligns contextual status and actions in a responsive horizontal group.
+* @tag sigvelo-action-bar
+* @documentation https://design-system.sigvelo.com/docs/components/action-bar
+* @status stable
+* @since 1.0
+*
+* @slot - Status, buttons, or other compact action controls.
+*/
+var SigveloActionBar = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.align = "end";
+	}
+	static {
+		this.styles = [hostStyles, action_bar_styles_default];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({ reflect: true })], SigveloActionBar.prototype, "align", void 0);
+customElements.define("sigvelo-action-bar", SigveloActionBar);
+//#endregion
+export { SigveloActionBar as t };

package/dist/alert-dialog-4CnO3Nb5.d.ts

@@ -0,0 +1,60 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/alert-dialog/alert-dialog.d.ts
+/**
+ * <sigvelo-alert-dialog>
+ *
+ * @summary A modal dialog that requires an explicit user decision before it can be dismissed.
+ * @tag sigvelo-alert-dialog
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency sigvelo-dialog
+ *
+ * @slot - The alert description/body content.
+ * @slot header - Content for the dialog header (typically a title).
+ * @slot cancel - The cancel action button.
+ * @slot confirm - The confirm action button.
+ *
+ * @event sigvelo-confirm - Emitted when the confirm action is triggered.
+ * @event sigvelo-cancel - Emitted when the cancel action is triggered.
+ *
+ * @cssstate open - Applied when the alert dialog is open.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-alert-dialog id="alert__default">
+ *   <h3 slot="header" style="font-size: 1.125rem; margin: 0;">
+ *     Delete item?
+ *   </h3>
+ *
+ *   <p>This action cannot be undone. This will permanently delete the item from your account.</p>
+ *
+ *   <sigvelo-button slot="cancel">Cancel</sigvelo-button>
+ *   <sigvelo-button slot="confirm" color="destructive">Delete</sigvelo-button>
+ * </sigvelo-alert-dialog>
+ *
+ * <sigvelo-button color="destructive" data-dialog="open alert__default">
+ *   Delete item
+ * </sigvelo-button>
+ * ```
+ */
+declare class SigveloAlertDialog extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** Opens or closes the alert dialog. */
+  open: boolean;
+  firstUpdated(): void;
+  disconnectedCallback(): void;
+  private handleCancel;
+  private handleConfirm;
+  render(): import("lit-html").TemplateResult<1>;
+  updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-alert-dialog": SigveloAlertDialog;
+  }
+}
+//#endregion
+export { SigveloAlertDialog as t };