@c2n/badge 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @c2n/badge
+
+Badge built with Lit: a tinted pill for status text, counts and dots, optionally pinned to a corner of another element.
+
+```bash
+npm install @c2n/badge
+```
+
+```html
+<script type="module">
+  import '@c2n/badge'
+</script>
+
+<c2-badge tone="success">Active</c2-badge>
+<c2-badge tone="danger" count="120"></c2-badge>
+<c2-badge dot tone="success" pulse></c2-badge>
+<c2-badge tone="danger" count="5">
+  <button slot="anchor">Inbox</button>
+</c2-badge>
+```
+
+- **Tones**: `tone="neutral|primary|success|warning|danger|info"` picks a background/text pair; each pair is a CSS variable (`--c2-badge__success--background`, `--c2-badge__success--color`, …) and `--c2-badge--background` / `--c2-badge--color` override whichever tone is active.
+- **Count**: `count` shows a number instead of the slotted text, clamped at `max` (default `99`, rendered as `99+`). A count of `0` hides the badge unless `show-zero` is set.
+- **Dot**: `dot` renders a small circle in the tone colour; `pulse` adds a fading ring animation (disabled under `prefers-reduced-motion`).
+- **Anchor**: put an element in the `anchor` slot and the badge becomes an overlay pinned to a corner chosen with `placement="top-right|top-left|bottom-right|bottom-left"`, ringed by `--c2-badge__anchor--border`. Add `overlap="circular"` for round anchors (avatars, icon buttons) so it lands on the edge of the circle; `--c2-badge__anchor--offset-x/y` fine-tune the position.
+- **Icon**: the `prefix-icon` slot places an icon before the text, sized by `--c2-badge__icon--size`.
+
+Shape and typography are CSS custom properties (`--c2-badge--height`, `--c2-badge--border-radius`, `--c2-badge--font-size`, `--c2-badge--text-transform`, …). For an outlined badge set `--c2-badge--background: transparent` and `--c2-badge--border: 1px solid currentColor`. The full list is in `custom-elements.json` and on the docs site.

package/dist/badge.js

@@ -0,0 +1,98 @@
+import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/badge.scss?inline
+var badge_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n  flex: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  white-space: nowrap;\n  user-select: none;\n  height: var(--c2-badge--height,20px);\n  min-width: var(--c2-badge--min-width,20px);\n  padding-left: var(--c2-badge--padding-left,6px);\n  padding-right: var(--c2-badge--padding-right,6px);\n  gap: var(--c2-badge--gap,4px);\n  border-radius: var(--c2-badge--border-radius,999px);\n  border: var(--c2-badge--border,none);\n  box-shadow: var(--c2-badge--box-shadow);\n  font-family: var(--c2-badge--font-family,inherit);\n  font-size: var(--c2-badge--font-size,12px);\n  font-weight: var(--c2-badge--font-weight,500);\n  line-height: var(--c2-badge--line-height,1);\n  letter-spacing: var(--c2-badge--letter-spacing);\n  text-transform: var(--c2-badge--text-transform,none);\n  background: var(--c2-badge--background,var(--c2-badge__neutral--background,#f4f4f5));\n  color: var(--c2-badge--color,var(--c2-badge__neutral--color,#52525b));\n}\n\n:host([tone=primary]) .c2-badge {\n  background: var(--c2-badge--background,var(--c2-badge__primary--background,#edf1fe));\n  color: var(--c2-badge--color,var(--c2-badge__primary--color,#0265dc));\n}\n\n:host([tone=success]) .c2-badge {\n  background: var(--c2-badge--background,var(--c2-badge__success--background,#dcfce7));\n  color: var(--c2-badge--color,var(--c2-badge__success--color,#166534));\n}\n\n:host([tone=warning]) .c2-badge {\n  background: var(--c2-badge--background,var(--c2-badge__warning--background,#fef3c7));\n  color: var(--c2-badge--color,var(--c2-badge__warning--color,#92400e));\n}\n\n:host([tone=danger]) .c2-badge {\n  background: var(--c2-badge--background,var(--c2-badge__danger--background,#fee2e2));\n  color: var(--c2-badge--color,var(--c2-badge__danger--color,#dc2626));\n}\n\n:host([tone=info]) .c2-badge {\n  background: var(--c2-badge--background,var(--c2-badge__info--background,#e0f2fe));\n  color: var(--c2-badge--color,var(--c2-badge__info--color,#075985));\n}\n\n::slotted([slot=prefix-icon]) {\n  display: block;\n  flex: none;\n  width: var(--c2-badge__icon--size,12px);\n  height: var(--c2-badge__icon--size,12px);\n}\n\n.c2-badge.is-dot {\n  position: relative;\n  box-sizing: content-box;\n  width: var(--c2-badge__dot--size,8px);\n  height: var(--c2-badge__dot--size,8px);\n  min-width: 0;\n  padding: 0;\n  background: currentColor;\n  border-radius: 999px;\n}\n.c2-badge.is-dot.is-pulse::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: currentColor;\n  animation: c2-badge-pulse var(--c2-badge__pulse--animation-duration,1.5s) cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n\n@keyframes c2-badge-pulse {\n  from {\n    transform: scale(1);\n    opacity: 0.6;\n  }\n  to {\n    transform: scale(2.6);\n    opacity: 0;\n  }\n}\n.c2-badge.is-anchored {\n  --_offset-x: var(--c2-badge__anchor--offset-x,0px);\n  --_offset-y: var(--c2-badge__anchor--offset-y,0px);\n  position: absolute;\n  z-index: 1;\n  border: var(--c2-badge__anchor--border,2px solid #ffffff);\n}\n\n:host([overlap=circular]) .c2-badge.is-anchored {\n  --_offset-x: var(--c2-badge__anchor--offset-x, 14.6%);\n  --_offset-y: var(--c2-badge__anchor--offset-y, 14.6%);\n}\n\n:host([placement=top-right]) .c2-badge.is-anchored,\n:host(:not([placement])) .c2-badge.is-anchored {\n  top: var(--_offset-y);\n  right: var(--_offset-x);\n  transform: translate(50%, -50%);\n}\n\n:host([placement=top-left]) .c2-badge.is-anchored {\n  top: var(--_offset-y);\n  left: var(--_offset-x);\n  transform: translate(-50%, -50%);\n}\n\n:host([placement=bottom-right]) .c2-badge.is-anchored {\n  bottom: var(--_offset-y);\n  right: var(--_offset-x);\n  transform: translate(50%, 50%);\n}\n\n:host([placement=bottom-left]) .c2-badge.is-anchored {\n  bottom: var(--_offset-y);\n  left: var(--_offset-x);\n  transform: translate(-50%, 50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-badge.is-dot.is-pulse::after {\n    animation: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/badge.ts
+var Badge = class Badge extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.tone = "neutral";
+		this.count = void 0;
+		this.max = 99;
+		this.showZero = false;
+		this.dot = false;
+		this.pulse = false;
+		this.placement = "top-right";
+		this.overlap = "rectangular";
+		this.hasAnchor = false;
+	}
+	static {
+		this.styles = unsafeCSS(badge_default);
+	}
+	/** Read the anchor before the first render so a server-rendered badge hydrates in its final position. */
+	connectedCallback() {
+		super.connectedCallback();
+		if (!isServer) this.hasAnchor = this.querySelector(":scope > [slot=\"anchor\"]") !== null;
+	}
+	/** `slotchange` does not fire for server-rendered slots, so read the anchor once after the first render. */
+	firstUpdated() {
+		const slot = this.renderRoot.querySelector("slot[name=\"anchor\"]");
+		if (slot) this.updateAnchor(slot);
+	}
+	handleAnchorChange(event) {
+		this.updateAnchor(event.target);
+	}
+	updateAnchor(slot) {
+		this.hasAnchor = slot.assignedElements({ flatten: true }).length > 0;
+	}
+	/** Text shown for `count`, clamped at `max`. */
+	get displayCount() {
+		if (this.count === void 0) return "";
+		return this.count > this.max ? `${this.max}+` : String(this.count);
+	}
+	get visible() {
+		if (this.dot) return true;
+		return this.count === void 0 || this.count !== 0 || this.showZero;
+	}
+	renderBadge() {
+		if (!this.visible) return nothing;
+		const classes = classMap({
+			"c2-badge": true,
+			"is-dot": this.dot,
+			"is-pulse": this.dot && this.pulse,
+			"is-anchored": this.hasAnchor
+		});
+		if (this.dot) return html`<span class=${classes} part="badge"></span>`;
+		return html`
+      <span class=${classes} part="badge">
+        <slot name="prefix-icon"></slot>
+        ${this.count !== void 0 ? this.displayCount : html`<slot></slot>`}
+      </span>
+    `;
+	}
+	render() {
+		return html`<slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>${this.renderBadge()}`;
+	}
+};
+__decorate([property({ reflect: true })], Badge.prototype, "tone", void 0);
+__decorate([property({ type: Number })], Badge.prototype, "count", void 0);
+__decorate([property({ type: Number })], Badge.prototype, "max", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-zero"
+})], Badge.prototype, "showZero", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Badge.prototype, "dot", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Badge.prototype, "pulse", void 0);
+__decorate([property({ reflect: true })], Badge.prototype, "placement", void 0);
+__decorate([property({ reflect: true })], Badge.prototype, "overlap", void 0);
+__decorate([state()], Badge.prototype, "hasAnchor", void 0);
+Badge = __decorate([customElement("c2-badge")], Badge);
+//#endregion
+export { Badge };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@c2n/badge",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/badge.js",
+  "exports": {
+    ".": {
+      "default": "./dist/badge.js",
+      "types": "./types/src/badge.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "badge",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/badge.d.ts

@@ -0,0 +1,95 @@
+import { LitElement } from 'lit';
+export type BadgeTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type BadgeOverlap = 'rectangular' | 'circular';
+/**
+ * Small status label: a tinted pill with text, a number or an icon, or a plain dot. Six `tone`s carry meaning
+ * (neutral, primary, success, warning, danger, info); each is a pair of CSS variables so a design system can recolour
+ * them without touching the markup. Give it a `count` to show a number clamped at `max` (`99+`), or `dot` for a
+ * presence indicator that can `pulse`. Put an element in the `anchor` slot and the badge pins itself to one of its
+ * corners (`placement`), for example a notification count on an icon button; `overlap="circular"` moves it onto the
+ * edge of a round anchor such as an avatar.
+ *
+ * @tag c2-badge
+ *
+ * @slot - Label text. Ignored while `count` or `dot` is set.
+ * @slot prefix-icon - Icon shown before the text, sized by `--c2-badge__icon--size`.
+ * @slot anchor - Element the badge is pinned to. When filled the badge becomes an overlay at the `placement` corner.
+ *
+ * @cssproperty {pixel} [--c2-badge--height=20px]
+ * @cssproperty {pixel} [--c2-badge--min-width=20px] - Keeps single digits round.
+ * @cssproperty {padding} [--c2-badge--padding-left=6px]
+ * @cssproperty {padding} [--c2-badge--padding-right=6px]
+ * @cssproperty {pixel} [--c2-badge--gap=4px] - Space between the icon and the text.
+ * @cssproperty {border-radius} [--c2-badge--border-radius=999px]
+ * @cssproperty {border} [--c2-badge--border=none] - Set a border for an outlined look, together with a transparent background.
+ * @cssproperty {box-shadow} --c2-badge--box-shadow
+ * @cssproperty {background} --c2-badge--background - Overrides the tone background.
+ * @cssproperty {color} --c2-badge--color - Overrides the tone text colour.
+ *
+ * @cssproperty {font-family} [--c2-badge--font-family=inherit]
+ * @cssproperty {font-size} [--c2-badge--font-size=12px]
+ * @cssproperty {font-weight} [--c2-badge--font-weight=500]
+ * @cssproperty {line-height} [--c2-badge--line-height=1]
+ * @cssproperty {pixel} --c2-badge--letter-spacing
+ * @cssproperty {text-transform} [--c2-badge--text-transform=none]
+ *
+ * @cssproperty {pixel} [--c2-badge__icon--size=12px]
+ *
+ * @cssproperty {background} [--c2-badge__neutral--background=#f4f4f5]
+ * @cssproperty {color} [--c2-badge__neutral--color=#52525b]
+ * @cssproperty {background} [--c2-badge__primary--background=#edf1fe]
+ * @cssproperty {color} [--c2-badge__primary--color=#0265dc]
+ * @cssproperty {background} [--c2-badge__success--background=#dcfce7]
+ * @cssproperty {color} [--c2-badge__success--color=#166534]
+ * @cssproperty {background} [--c2-badge__warning--background=#fef3c7]
+ * @cssproperty {color} [--c2-badge__warning--color=#92400e]
+ * @cssproperty {background} [--c2-badge__danger--background=#fee2e2]
+ * @cssproperty {color} [--c2-badge__danger--color=#dc2626]
+ * @cssproperty {background} [--c2-badge__info--background=#e0f2fe]
+ * @cssproperty {color} [--c2-badge__info--color=#075985]
+ *
+ * @cssproperty {pixel} [--c2-badge__dot--size=8px] - Diameter of the `dot` badge; its colour is the tone text colour.
+ * @cssproperty {time} [--c2-badge__pulse--animation-duration=1.5s] - Length of one `pulse` cycle; respects reduced motion.
+ *
+ * @cssproperty {border} [--c2-badge__anchor--border=2px solid #ffffff] - Ring around an anchored badge, in the page background colour. Drawn outside a `dot`.
+ * @cssproperty {pixel} [--c2-badge__anchor--offset-x=0px] - Moves an anchored badge inwards horizontally (`14.6%` with `overlap="circular"`).
+ * @cssproperty {pixel} [--c2-badge__anchor--offset-y=0px] - Moves an anchored badge inwards vertically (`14.6%` with `overlap="circular"`).
+ */
+export declare class Badge extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Colour role of the badge. */
+    tone: BadgeTone;
+    /** Number to display instead of the slotted text. Hidden when it is `0` unless `show-zero` is set. */
+    count: number | undefined;
+    /** Upper bound for `count`; larger values render as `<max>+`. */
+    max: number;
+    /** Keeps a `count` of `0` visible. */
+    showZero: boolean;
+    /** Renders a small dot without text. */
+    dot: boolean;
+    /** Animates a fading ring around a `dot` badge to draw attention. */
+    pulse: boolean;
+    /** Corner of the `anchor` element the badge is pinned to. */
+    placement: BadgePlacement;
+    /** Shape of the anchor: `circular` pulls the badge onto the edge of a round anchor instead of its bounding-box corner. */
+    overlap: BadgeOverlap;
+    private hasAnchor;
+    /** Read the anchor before the first render so a server-rendered badge hydrates in its final position. */
+    connectedCallback(): void;
+    /** `slotchange` does not fire for server-rendered slots, so read the anchor once after the first render. */
+    firstUpdated(): void;
+    private handleAnchorChange;
+    private updateAnchor;
+    /** Text shown for `count`, clamped at `max`. */
+    get displayCount(): string;
+    private get visible();
+    private renderBadge;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-badge': Badge;
+    }
+}
+//# sourceMappingURL=badge.d.ts.map

package/types/src/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,KAAK,CAAA;AAKpE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAA;AACzF,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAA;AACtF,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,UAAU,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1C,gCAAgC;IACH,IAAI,EAAE,SAAS,CAAY;IAExD,sGAAsG;IAC1E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAY;IAEjE,iEAAiE;IACrC,GAAG,SAAK;IAEpC,sCAAsC;IAC8B,QAAQ,UAAQ;IAEpF,wCAAwC;IACI,GAAG,UAAQ;IAEvD,qEAAqE;IACzB,KAAK,UAAQ;IAEzD,6DAA6D;IAChC,SAAS,EAAE,cAAc,CAAc;IAEpE,0HAA0H;IAC7F,OAAO,EAAE,YAAY,CAAgB;IAEzD,OAAO,CAAC,SAAS,CAAQ;IAElC,yGAAyG;IAChG,iBAAiB;IAK1B,4GAA4G;IACnG,YAAY;IAKrB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAIpB,gDAAgD;IAChD,IAAI,YAAY,IAAI,MAAM,CAGzB;IAED,OAAO,KAAK,OAAO,GAGlB;IAED,OAAO,CAAC,WAAW;IAiBV,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}