@mcp-b/web-components 0.2.0

package/dist/alert-dialog-D25Oi_TS.js

@@ -0,0 +1,126 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { t as SigveloDialog } from "./dialog-Cx46HMaZ.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/alert-dialog/alert-dialog.styles.ts
+var alert_dialog_styles_default = css`
+  #actions {
+    display: flex;
+    gap: 0.5em;
+    justify-content: flex-end;
+  }
+`;
+//#endregion
+//#region src/components/alert-dialog/alert-dialog.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>
+* ```
+*/
+var SigveloAlertDialog = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+	}
+	static {
+		this.styles = [hostStyles, alert_dialog_styles_default];
+	}
+	firstUpdated() {
+		SigveloDialog.syncTriggers(this, this.open);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		SigveloDialog.syncTriggers(this, null);
+	}
+	handleCancel() {
+		this.dispatchEvent(new CustomEvent("sigvelo-cancel", {
+			bubbles: true,
+			composed: true
+		}));
+		this.open = false;
+	}
+	handleConfirm() {
+		this.dispatchEvent(new CustomEvent("sigvelo-confirm", {
+			bubbles: true,
+			composed: true
+		}));
+		this.open = false;
+	}
+	render() {
+		return html`
+      <sigvelo-dialog
+        .open=${this.open}
+        .lightDismiss=${false}
+        .dialogRole=${"alertdialog"}
+        placement="center"
+        @sigvelo-before-close=${(event) => {
+			if (this.open) event.preventDefault();
+		}}
+        @sigvelo-close=${() => {
+			this.open = false;
+			this.customStates.set("open", false);
+		}}
+      >
+        <slot name="header" slot="header"></slot>
+        <div slot="description"><slot></slot></div>
+        <span slot="actions"></span>
+        <div slot="footer" id="actions">
+          <div @click=${this.handleCancel}>
+            <slot name="cancel"></slot>
+          </div>
+          <div @click=${this.handleConfirm}>
+            <slot name="confirm"></slot>
+          </div>
+        </div>
+      </sigvelo-dialog>
+    `;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) {
+			this.customStates.set("open", this.open);
+			SigveloDialog.syncTriggers(this, this.open);
+		}
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloAlertDialog.prototype, "open", void 0);
+customElements.define("sigvelo-alert-dialog", SigveloAlertDialog);
+//#endregion
+export { SigveloAlertDialog as t };

package/dist/avatar-Bje_KpZo.d.ts

@@ -0,0 +1,141 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/avatar/avatar.d.ts
+/**
+ * <sigvelo-avatar>
+ *
+ * @summary Provides a visual representation of a user to enhance personalization and recognition.
+ * @tag sigvelo-avatar
+ * @documentation https://design-system.sigvelo.com/docs/components/avatar
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-icon
+ *
+ * @slot icon - A custom icon to use instead of the default. Will not be shown when an image or initials are present.
+ *  For best results, use a `<sigvelo-icon>` or an `<svg>` element.
+ *
+ * @cssproperty [--size=3rem] - The size of the avatar to draw.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-avatar label="Anonymous user"></sigvelo-avatar>
+ * ```
+ *
+ * **Note:** In the same way that images require `alt` text, you should add a label to every avatar. The label won't be displayed, but it will be announced by assistive devices.
+ *
+ * @example Images
+ * Avatars are best used with images to create a more personalized experience. Set the `image` attribute to any valid image URL. If the image fails to load, it will show characters or the default image instead.
+ *
+ * ```html
+ * <sigvelo-avatar label="Sky kitty" image="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+ * ```
+ *
+ * @example Characters
+ * When an image isn't available or fails to load, you can provide up to five characters to show instead. It's usually best to show no more than three, as the text shrinks to fit.
+ *
+ * ```html
+ * <sigvelo-avatar label="Sigvelo" characters="Q"></sigvelo-avatar>
+ * <sigvelo-avatar label="Sigvelo" characters="QUI"></sigvelo-avatar>
+ * <sigvelo-avatar label="Sigvelo" characters="SIGVELO"></sigvelo-avatar>
+ * ```
+ *
+ * @example Custom icons
+ * When no image or letters are provided as a fallback, the default user icon will be displayed. You can show a custom icon by placing one into the `icon` slot. Works best with a `<sigvelo-icon>` or an `<svg>` element.
+ *
+ * ```html
+ * <sigvelo-avatar label="Anonymous user">
+ *   <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
+ * </sigvelo-avatar>
+ *
+ * <sigvelo-avatar label="Anonymous user">
+ *   <sigvelo-icon slot="icon" name="paw"></sigvelo-icon>
+ * </sigvelo-avatar>
+ * ```
+ *
+ * @example Changing the size
+ * You can change the size of an avatar by setting the `--size` custom property. The aspect ratio is 1:1, so the width and height will always be the same.
+ *
+ * ```html
+ * <sigvelo-avatar style="--size: 32px;" label="Anonymous user"></sigvelo-avatar>
+ * <sigvelo-avatar style="--size: 48px;" label="Anonymous user"></sigvelo-avatar>
+ * <sigvelo-avatar style="--size: 64px;" label="Anonymous user"></sigvelo-avatar>
+ * ```
+ *
+ * @example Changing the color
+ * To change the color of the avatar, use the `background-color` property and the `color` property. You can also apply gradients with the `background-image` property.
+ *
+ * ```html
+ * <sigvelo-avatar style="background-color: royalblue; color: white;" label="Anonymous user"></sigvelo-avatar>
+ * <sigvelo-avatar style="background-color: deeppink; color: white;" label="Anonymous user"></sigvelo-avatar>
+ * <sigvelo-avatar style="background-color: forestgreen; color: white;" label="Anonymous user"></sigvelo-avatar>
+ * <sigvelo-avatar style="background-image: linear-gradient(45.8deg, #af68fe 9.3%, #65dfff 75.1%); color: black;" label="Anonymous user"></sigvelo-avatar>
+ * ```
+ *
+ * @example Changing the shape
+ * You can change the shape of an avatar by adjusting the `border-radius` property. More complex shapes can be achieved by removing the default border radius and using `clip-path`.
+ *
+ * ```html
+ * <sigvelo-avatar style="border-radius: 12px;" label="Anonymous user"></sigvelo-avatar>
+ * <sigvelo-avatar style="border-radius: 2px;" label="Anonymous user"></sigvelo-avatar>
+ * <sigvelo-avatar style="border-radius: 0; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);" label="Anonymous user"></sigvelo-avatar>
+ * ```
+ *
+ * @example Grouping avatars
+ * You can group avatars with some custom CSS.
+ *
+ * ```html
+ * <div class="avatar-group">
+ *   <sigvelo-avatar label="Chill kitty" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+ *   <sigvelo-avatar label="Wonder kitty" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+ *   <sigvelo-avatar label="Maine kitty" 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>
+ *   <sigvelo-avatar label="+12 more" characters="+12"></sigvelo-avatar>
+ * </div>
+ *
+ * <style>
+ *   .avatar-group sigvelo-avatar {
+ *     border: solid 2px var(--sigvelo-color-canvas);
+ *
+ *     &:not(:first-of-type) {
+ *       margin-inline-start: -1.5rem;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * @example Wrapping with links
+ * You can wrap links around avatars to make the avatar clickable.
+ *
+ * ```html
+ * <a href="https://example.com/" target="_blank">
+ *   <sigvelo-avatar label="Anonymous user"></sigvelo-avatar>
+ * </a>
+ * ```
+ */
+declare class SigveloAvatar extends SigveloElement {
+  static styles: CSSResultGroup;
+  hasImageLoaded: boolean;
+  /**
+   * An accessible label for the avatar. This won't be visible, but it will be read to assistive devices so you should
+   * always include one.
+   */
+  label?: string;
+  /**
+   * A string of characters to display in the avatar when an image isn't available or fails to load. Up to five
+   * characters are supported.
+   */
+  characters?: string;
+  /** The URL of an image to display in the avatar. Non-square images will be clipped to fit. */
+  image?: string;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-avatar": SigveloAvatar;
+  }
+}
+//#endregion
+export { SigveloAvatar as t };

package/dist/avatar-CRP0kW3x.js

@@ -0,0 +1,224 @@
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, state } 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/avatar/avatar.styles.ts
+var avatar_styles_default = css`
+  :host {
+    --size: 3rem;
+
+    display: inline-flex;
+    position: relative;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1 / 1;
+    width: var(--size);
+    height: var(--size);
+    overflow: hidden;
+    border-radius: var(--sigvelo-radius-circle);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    font-size: calc(var(--size) / 3);
+    vertical-align: middle;
+  }
+
+  #image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--size);
+    height: var(--size);
+    overflow: hidden;
+    object-fit: cover;
+  }
+
+  slot[name="icon"] sigvelo-icon,
+  slot[name="icon"]::slotted(*) {
+    position: absolute !important;
+    top: calc(50% - 0.75em) !important;
+    left: calc(50% - 0.75em) !important;
+    width: 1.5em !important;
+    height: 1.5em !important;
+  }
+
+  #characters {
+    font-size: calc(var(--size) / 5.5);
+    text-transform: uppercase;
+
+    &[data-length="4"] {
+      font-size: calc(var(--size) / 4.5);
+    }
+
+    &[data-length="3"] {
+      font-size: calc(var(--size) / 3.5);
+    }
+
+    &[data-length="1"],
+    &[data-length="2"] {
+      font-size: calc(var(--size) / 2.5);
+    }
+  }
+`;
+//#endregion
+//#region src/components/avatar/avatar.ts
+/**
+* <sigvelo-avatar>
+*
+* @summary Provides a visual representation of a user to enhance personalization and recognition.
+* @tag sigvelo-avatar
+* @documentation https://design-system.sigvelo.com/docs/components/avatar
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot icon - A custom icon to use instead of the default. Will not be shown when an image or initials are present.
+*  For best results, use a `<sigvelo-icon>` or an `<svg>` element.
+*
+* @cssproperty [--size=3rem] - The size of the avatar to draw.
+*
+* @example Default
+* ```html
+* <sigvelo-avatar label="Anonymous user"></sigvelo-avatar>
+* ```
+*
+* **Note:** In the same way that images require `alt` text, you should add a label to every avatar. The label won't be displayed, but it will be announced by assistive devices.
+*
+* @example Images
+* Avatars are best used with images to create a more personalized experience. Set the `image` attribute to any valid image URL. If the image fails to load, it will show characters or the default image instead.
+*
+* ```html
+* <sigvelo-avatar label="Sky kitty" image="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+* ```
+*
+* @example Characters
+* When an image isn't available or fails to load, you can provide up to five characters to show instead. It's usually best to show no more than three, as the text shrinks to fit.
+*
+* ```html
+* <sigvelo-avatar label="Sigvelo" characters="Q"></sigvelo-avatar>
+* <sigvelo-avatar label="Sigvelo" characters="QUI"></sigvelo-avatar>
+* <sigvelo-avatar label="Sigvelo" characters="SIGVELO"></sigvelo-avatar>
+* ```
+*
+* @example Custom icons
+* When no image or letters are provided as a fallback, the default user icon will be displayed. You can show a custom icon by placing one into the `icon` slot. Works best with a `<sigvelo-icon>` or an `<svg>` element.
+*
+* ```html
+* <sigvelo-avatar label="Anonymous user">
+*   <sigvelo-icon slot="icon" name="cat"></sigvelo-icon>
+* </sigvelo-avatar>
+*
+* <sigvelo-avatar label="Anonymous user">
+*   <sigvelo-icon slot="icon" name="paw"></sigvelo-icon>
+* </sigvelo-avatar>
+* ```
+*
+* @example Changing the size
+* You can change the size of an avatar by setting the `--size` custom property. The aspect ratio is 1:1, so the width and height will always be the same.
+*
+* ```html
+* <sigvelo-avatar style="--size: 32px;" label="Anonymous user"></sigvelo-avatar>
+* <sigvelo-avatar style="--size: 48px;" label="Anonymous user"></sigvelo-avatar>
+* <sigvelo-avatar style="--size: 64px;" label="Anonymous user"></sigvelo-avatar>
+* ```
+*
+* @example Changing the color
+* To change the color of the avatar, use the `background-color` property and the `color` property. You can also apply gradients with the `background-image` property.
+*
+* ```html
+* <sigvelo-avatar style="background-color: royalblue; color: white;" label="Anonymous user"></sigvelo-avatar>
+* <sigvelo-avatar style="background-color: deeppink; color: white;" label="Anonymous user"></sigvelo-avatar>
+* <sigvelo-avatar style="background-color: forestgreen; color: white;" label="Anonymous user"></sigvelo-avatar>
+* <sigvelo-avatar style="background-image: linear-gradient(45.8deg, #af68fe 9.3%, #65dfff 75.1%); color: black;" label="Anonymous user"></sigvelo-avatar>
+* ```
+*
+* @example Changing the shape
+* You can change the shape of an avatar by adjusting the `border-radius` property. More complex shapes can be achieved by removing the default border radius and using `clip-path`.
+*
+* ```html
+* <sigvelo-avatar style="border-radius: 12px;" label="Anonymous user"></sigvelo-avatar>
+* <sigvelo-avatar style="border-radius: 2px;" label="Anonymous user"></sigvelo-avatar>
+* <sigvelo-avatar style="border-radius: 0; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);" label="Anonymous user"></sigvelo-avatar>
+* ```
+*
+* @example Grouping avatars
+* You can group avatars with some custom CSS.
+*
+* ```html
+* <div class="avatar-group">
+*   <sigvelo-avatar label="Chill kitty" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*   <sigvelo-avatar label="Wonder kitty" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></sigvelo-avatar>
+*   <sigvelo-avatar label="Maine kitty" 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>
+*   <sigvelo-avatar label="+12 more" characters="+12"></sigvelo-avatar>
+* </div>
+*
+* <style>
+*   .avatar-group sigvelo-avatar {
+*     border: solid 2px var(--sigvelo-color-canvas);
+*
+*     &:not(:first-of-type) {
+*       margin-inline-start: -1.5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Wrapping with links
+* You can wrap links around avatars to make the avatar clickable.
+*
+* ```html
+* <a href="https://example.com/" target="_blank">
+*   <sigvelo-avatar label="Anonymous user"></sigvelo-avatar>
+* </a>
+* ```
+*/
+var SigveloAvatar = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hasImageLoaded = false;
+	}
+	static {
+		this.styles = [hostStyles, avatar_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "img");
+		if (this.label) this.setAttribute("aria-label", this.label);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("label")) if (this.label) this.setAttribute("aria-label", this.label);
+		else this.removeAttribute("aria-label");
+	}
+	render() {
+		return html`
+      ${this.characters ? html`<span id="characters" data-length=${this.characters.length}
+            >${this.characters.slice(0, 5)}</span
+          >` : html`
+            <slot name="icon">
+              <sigvelo-icon library="system" family="filled" name="user"></sigvelo-icon>
+            </slot>
+          `}
+      ${this.image ? html`
+            <img
+              id="image"
+              role="presentation"
+              src=${this.image}
+              alt=""
+              @load=${() => this.hasImageLoaded = true}
+              @error=${() => this.hasImageLoaded = false}
+              ?hidden=${!this.hasImageLoaded}
+            />
+          ` : ""}
+    `;
+	}
+};
+__decorate([state()], SigveloAvatar.prototype, "hasImageLoaded", void 0);
+__decorate([property()], SigveloAvatar.prototype, "label", void 0);
+__decorate([property()], SigveloAvatar.prototype, "characters", void 0);
+__decorate([property()], SigveloAvatar.prototype, "image", void 0);
+customElements.define("sigvelo-avatar", SigveloAvatar);
+//#endregion
+export { SigveloAvatar as t };