@mcp-b/web-components 0.2.0

package/dist/badge-Ct95U4UO.js

@@ -0,0 +1,301 @@
+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/badge/badge.styles.ts
+var badge_styles_default = css`
+  :host {
+    --attention-duration: 1.5s;
+    --attention-easing: ease;
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    align-self: center;
+    justify-content: center;
+    min-width: 2em;
+    height: 2em;
+    padding: 0 0.75em;
+    gap: 0.33em;
+    border-radius: var(--sigvelo-radius-full);
+    font-weight: var(--sigvelo-font-weight-bold);
+    font-size: 0.75em;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  /* Icons */
+  ::slotted(sigvelo-icon) {
+    scale: 1.25 !important;
+  }
+
+  /* Normal badges */
+  :host([variant="normal"][color="neutral"]) {
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-primary-text-on-subtle);
+  }
+
+  :host([variant="normal"][color="primary"]) {
+    background-color: var(--sigvelo-color-primary-bg);
+    color: var(--sigvelo-color-primary-text-on-bg);
+  }
+
+  :host([variant="normal"][color="success"]) {
+    background-color: var(--sigvelo-color-success-bg);
+    color: var(--sigvelo-color-success-text-on-bg);
+  }
+
+  :host([variant="normal"][color="warning"]) {
+    background-color: var(--sigvelo-color-warning-bg);
+    color: var(--sigvelo-color-warning-text-on-bg);
+  }
+
+  :host([variant="normal"][color="destructive"]) {
+    background-color: var(--sigvelo-color-danger-bg);
+    color: var(--sigvelo-color-danger-text-on-bg);
+  }
+
+  /* Outline badges */
+  :host([variant="outline"]) {
+    border: 1px solid;
+    background-color: transparent;
+  }
+
+  :host([variant="outline"][color="neutral"]) {
+    border-color: var(--sigvelo-color-neutral-border);
+    color: var(--sigvelo-color-neutral-text);
+  }
+
+  :host([variant="outline"][color="primary"]) {
+    border-color: var(--sigvelo-color-primary-border);
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  :host([variant="outline"][color="success"]) {
+    border-color: var(--sigvelo-color-success-border);
+    color: var(--sigvelo-color-success-text);
+  }
+
+  :host([variant="outline"][color="warning"]) {
+    border-color: var(--sigvelo-color-warning-border);
+    color: var(--sigvelo-color-warning-text);
+  }
+
+  :host([variant="outline"][color="destructive"]) {
+    border-color: var(--sigvelo-color-danger-border);
+    color: var(--sigvelo-color-danger-text);
+  }
+
+  /* Attention */
+  :host([attention]) {
+    animation: var(--attention-duration) infinite var(--attention-easing);
+  }
+
+  :host([attention="tap"]) {
+    animation-name: tap;
+  }
+
+  :host([attention="shake"]) {
+    animation-name: shake;
+  }
+
+  :host([attention="sparkle"]) {
+    animation-name: sparkle;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    :host([attention]) {
+      animation-name: reduced-attention;
+    }
+  }
+
+  @keyframes tap {
+    0% {
+      transform: translateY(0);
+    }
+    15% {
+      transform: translateY(-12px);
+    }
+    30% {
+      transform: translateY(0);
+    }
+    45% {
+      transform: translateY(-6px);
+    }
+    60% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    10%,
+    30%,
+    50% {
+      transform: translateX(-2px);
+    }
+    20%,
+    40%,
+    60% {
+      transform: translateX(2px);
+    }
+    70% {
+      transform: translateX(0);
+    }
+    /* Pause for remainder of cycle */
+    70.01%,
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes sparkle {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    15% {
+      transform: scale(1.1) rotate(5deg);
+    }
+    30% {
+      transform: scale(1) rotate(0deg);
+    }
+    45% {
+      transform: scale(1.05) rotate(-3deg);
+    }
+    60% {
+      transform: scale(1);
+    }
+    /* Pause for remainder of cycle */
+    60.01%,
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes reduced-attention {
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(1.05);
+    }
+    75% {
+      transform: scale(1);
+    }
+  }
+`;
+//#endregion
+//#region src/components/badge/badge.ts
+/**
+* <sigvelo-badge>
+*
+* @summary Displays useful information or notifications such as a new feature or an unread message count.
+* @tag sigvelo-badge
+* @documentation https://design-system.sigvelo.com/docs/components/badge
+* @status stable
+* @since 1.0
+*
+* @slot - The badge's content.
+*
+* @cssproperty [--attention-duration=1.5s] - The speed at which the attention animation will run.
+* @cssproperty [--attention-easing=ease] - The easing to use for the attention animation.
+*
+* @example Default
+* ```html
+* <sigvelo-badge>12 items</sigvelo-badge>
+* ```
+*
+* @example Variants
+* Set the `color` attribute to `neutral`, `primary`, `success`, or `destructive` to change the badges's color.
+*
+* ```html
+* <sigvelo-badge color="neutral">Neutral</sigvelo-badge>
+* <sigvelo-badge color="primary">Primary</sigvelo-badge>
+* <sigvelo-badge color="success">Constructive</sigvelo-badge>
+* <sigvelo-badge color="destructive">Destructive</sigvelo-badge>
+* ```
+*
+* @example Outline badges
+* Set the `variant` attribute to `outline` to draw outlined badges.
+*
+* ```html
+* <sigvelo-badge variant="outline" color="neutral">Neutral</sigvelo-badge>
+* <sigvelo-badge variant="outline" color="primary">Primary</sigvelo-badge>
+* <sigvelo-badge variant="outline" color="success">Constructive</sigvelo-badge>
+* <sigvelo-badge variant="outline" color="destructive">Destructive</sigvelo-badge>
+* ```
+*
+* @example Changing the size
+* Badges are sized relative to the current font size. This allows you to place them into many contexts without having to explicitly size them. To change the size, set the `font-size` property on the badge or an ancestor element.
+*
+* ```html
+* <sigvelo-badge>Normal</sigvelo-badge>
+* <sigvelo-badge style="font-size: 1rem;">Big</sigvelo-badge>
+* <sigvelo-badge style="font-size: 1.25rem;">Bigger</sigvelo-badge>
+* ```
+*
+* @example Drawing attention
+* Set the `attention` attribute to `tap`, `shake`, or `sparkle` to draw attention to a badge with an animation. Remove the attribute to stop the animation. Users with a preference for reduced motion will see a more subtle pulse animation.
+*
+* ```html
+* <sigvelo-badge attention="tap" color="primary">Primary</sigvelo-badge>
+* <sigvelo-badge attention="shake" color="primary">Shake</sigvelo-badge>
+* <sigvelo-badge attention="sparkle" color="primary">Sparkle</sigvelo-badge>
+* ```
+*
+* **Note:** You can customize the speed and easing of attention animations using the `--attention-duration` and `--attention-easing` custom properties.
+*
+* @example Styling badges
+* Use the `color`, `background-color`, and `border-color` properties to change badge colors. You can also apply gradients with the `background-image` property.
+*
+* ```html
+* <sigvelo-badge style="background-color: royalblue; color: white; border: none;">Royal Blue</sigvelo-badge>
+* <sigvelo-badge style="background-color: deeppink; color: white; border: none;">Deep Pink</sigvelo-badge>
+* <sigvelo-badge style="background-color: forestgreen; color: white; border: none;">Forest Green</sigvelo-badge>
+* ```
+*
+* @example Using icons
+* Icons can be added before or after the badge's text.
+*
+* ```html
+* <sigvelo-badge style="background-color: firebrick; color: white;"><sigvelo-icon name="bug"></sigvelo-icon> Bug</sigvelo-badge>
+* <sigvelo-badge style="background-color: #2563eb; color: white;"><sigvelo-icon name="book-2"></sigvelo-icon> Documentation</sigvelo-badge>
+* <sigvelo-badge style="background-color: #d97706; color: white;"><sigvelo-icon name="copy"></sigvelo-icon> Duplicate</sigvelo-badge>
+* ```
+*
+* Badges can also be icon-only.
+*
+* ```html
+* <sigvelo-badge style="background-color: #ea580c; color: white;"><sigvelo-icon label="Cat" name="cat"></sigvelo-icon></sigvelo-badge>
+* <sigvelo-badge style="background-color: #059669; color: white;"><sigvelo-icon label="Dog" name="dog"></sigvelo-icon></sigvelo-badge>
+* <sigvelo-badge style="background-color: #4f46e5; color: white;"><sigvelo-icon label="Mouse" name="mouse"></sigvelo-icon></sigvelo-badge>
+* ```
+*/
+var SigveloBadge = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.color = "neutral";
+		this.variant = "normal";
+	}
+	static {
+		this.styles = [hostStyles, badge_styles_default];
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ reflect: true })], SigveloBadge.prototype, "color", void 0);
+__decorate([property({ reflect: true })], SigveloBadge.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloBadge.prototype, "attention", void 0);
+customElements.define("sigvelo-badge", SigveloBadge);
+//#endregion
+export { SigveloBadge as t };

package/dist/badge-D1DNQrWn.d.ts

@@ -0,0 +1,106 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/badge/badge.d.ts
+/**
+ * <sigvelo-badge>
+ *
+ * @summary Displays useful information or notifications such as a new feature or an unread message count.
+ * @tag sigvelo-badge
+ * @documentation https://design-system.sigvelo.com/docs/components/badge
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The badge's content.
+ *
+ * @cssproperty [--attention-duration=1.5s] - The speed at which the attention animation will run.
+ * @cssproperty [--attention-easing=ease] - The easing to use for the attention animation.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-badge>12 items</sigvelo-badge>
+ * ```
+ *
+ * @example Variants
+ * Set the `color` attribute to `neutral`, `primary`, `success`, or `destructive` to change the badges's color.
+ *
+ * ```html
+ * <sigvelo-badge color="neutral">Neutral</sigvelo-badge>
+ * <sigvelo-badge color="primary">Primary</sigvelo-badge>
+ * <sigvelo-badge color="success">Constructive</sigvelo-badge>
+ * <sigvelo-badge color="destructive">Destructive</sigvelo-badge>
+ * ```
+ *
+ * @example Outline badges
+ * Set the `variant` attribute to `outline` to draw outlined badges.
+ *
+ * ```html
+ * <sigvelo-badge variant="outline" color="neutral">Neutral</sigvelo-badge>
+ * <sigvelo-badge variant="outline" color="primary">Primary</sigvelo-badge>
+ * <sigvelo-badge variant="outline" color="success">Constructive</sigvelo-badge>
+ * <sigvelo-badge variant="outline" color="destructive">Destructive</sigvelo-badge>
+ * ```
+ *
+ * @example Changing the size
+ * Badges are sized relative to the current font size. This allows you to place them into many contexts without having to explicitly size them. To change the size, set the `font-size` property on the badge or an ancestor element.
+ *
+ * ```html
+ * <sigvelo-badge>Normal</sigvelo-badge>
+ * <sigvelo-badge style="font-size: 1rem;">Big</sigvelo-badge>
+ * <sigvelo-badge style="font-size: 1.25rem;">Bigger</sigvelo-badge>
+ * ```
+ *
+ * @example Drawing attention
+ * Set the `attention` attribute to `tap`, `shake`, or `sparkle` to draw attention to a badge with an animation. Remove the attribute to stop the animation. Users with a preference for reduced motion will see a more subtle pulse animation.
+ *
+ * ```html
+ * <sigvelo-badge attention="tap" color="primary">Primary</sigvelo-badge>
+ * <sigvelo-badge attention="shake" color="primary">Shake</sigvelo-badge>
+ * <sigvelo-badge attention="sparkle" color="primary">Sparkle</sigvelo-badge>
+ * ```
+ *
+ * **Note:** You can customize the speed and easing of attention animations using the `--attention-duration` and `--attention-easing` custom properties.
+ *
+ * @example Styling badges
+ * Use the `color`, `background-color`, and `border-color` properties to change badge colors. You can also apply gradients with the `background-image` property.
+ *
+ * ```html
+ * <sigvelo-badge style="background-color: royalblue; color: white; border: none;">Royal Blue</sigvelo-badge>
+ * <sigvelo-badge style="background-color: deeppink; color: white; border: none;">Deep Pink</sigvelo-badge>
+ * <sigvelo-badge style="background-color: forestgreen; color: white; border: none;">Forest Green</sigvelo-badge>
+ * ```
+ *
+ * @example Using icons
+ * Icons can be added before or after the badge's text.
+ *
+ * ```html
+ * <sigvelo-badge style="background-color: firebrick; color: white;"><sigvelo-icon name="bug"></sigvelo-icon> Bug</sigvelo-badge>
+ * <sigvelo-badge style="background-color: #2563eb; color: white;"><sigvelo-icon name="book-2"></sigvelo-icon> Documentation</sigvelo-badge>
+ * <sigvelo-badge style="background-color: #d97706; color: white;"><sigvelo-icon name="copy"></sigvelo-icon> Duplicate</sigvelo-badge>
+ * ```
+ *
+ * Badges can also be icon-only.
+ *
+ * ```html
+ * <sigvelo-badge style="background-color: #ea580c; color: white;"><sigvelo-icon label="Cat" name="cat"></sigvelo-icon></sigvelo-badge>
+ * <sigvelo-badge style="background-color: #059669; color: white;"><sigvelo-icon label="Dog" name="dog"></sigvelo-icon></sigvelo-badge>
+ * <sigvelo-badge style="background-color: #4f46e5; color: white;"><sigvelo-icon label="Mouse" name="mouse"></sigvelo-icon></sigvelo-badge>
+ * ```
+ */
+declare class SigveloBadge extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** The type of badge to draw. */
+  color: "neutral" | "primary" | "success" | "warning" | "destructive";
+  /** Determines the badges's variant. */
+  variant: "normal" | "outline";
+  /** Draws attention to the badge using an animation. */
+  attention: "tap" | "shake" | "sparkle";
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-badge": SigveloBadge;
+  }
+}
+//#endregion
+export { SigveloBadge as t };