@uibit/countdown 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 UIBit Contributors
+
+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,27 @@
+# Countdown
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/countdown)
+
+Countdown provides a highly customizable visual timer designed to communicate time sensitivity and build anticipation. Whether highlighting a product launch, event deadline, or limited-time campaign, it offers clear, real-time feedback that drives user action.
+
+## Value Delivery
+
+- **Clear Time Tracking** – Displays time remaining with absolute clarity, preventing user confusion about deadlines.
+- **Conversion Optimization** – Provides transparent visual indications of time limits to encourage prompt user decisions.
+- **Dynamic Events** – Dispatches lifecycle events upon completion, allowing applications to automatically adapt content when the timer expires.
+- **Flexible Presentation** – Supports specific calendar targets or relative durations, with responsive layout options that match parent designs.
+
+## Ideal Applications
+
+- **Event Launches** – Counting down to live streams, product releases, or grand openings.
+- **Campaign Deadlines** – Communicating registration limits or limited-time offers.
+- **Transactional Interfaces** – Showing remaining time for reservation holdings or checkout windows.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,346 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/countdown.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Countdown timer to a target date/time or a fixed duration. Supports\nconfigurable display formats and fires events on each tick and on completion.",
+          "name": "Countdown",
+          "cssProperties": [
+            {
+              "description": "Font family for the entire countdown",
+              "name": "--uibit-countdown-font-family",
+              "default": "ui-monospace,'SF Mono',Menlo,monospace"
+            },
+            {
+              "description": "Base font size",
+              "name": "--uibit-countdown-font-size",
+              "default": "1rem"
+            },
+            {
+              "description": "Font weight",
+              "name": "--uibit-countdown-font-weight",
+              "default": "600"
+            },
+            {
+              "description": "Text color for values",
+              "name": "--uibit-countdown-color",
+              "default": "#111827"
+            },
+            {
+              "description": "Gap between time units",
+              "name": "--uibit-countdown-gap",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Gap between the value and label within a unit",
+              "name": "--uibit-countdown-unit-gap",
+              "default": "0.375rem"
+            },
+            {
+              "description": "Font size for the numeric value",
+              "name": "--uibit-countdown-value-font-size",
+              "default": "2.25rem"
+            },
+            {
+              "description": "Min width of each value block",
+              "name": "--uibit-countdown-value-min-width",
+              "default": "4rem"
+            },
+            {
+              "description": "Font size for unit labels (Days, Hours…)",
+              "name": "--uibit-countdown-label-font-size",
+              "default": "0.6875rem"
+            },
+            {
+              "description": "Color for unit labels",
+              "name": "--uibit-countdown-label-color",
+              "default": "#6b7280"
+            },
+            {
+              "description": "Font size of the colon separator",
+              "name": "--uibit-countdown-separator-font-size",
+              "default": "2.25rem"
+            },
+            {
+              "description": "Color of the colon separator",
+              "name": "--uibit-countdown-separator-color",
+              "default": "#d1d5db"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ISO 8601 date/time string for the countdown target (e.g. `\"2025-12-31T00:00:00\"`). Takes precedence over `duration`.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Fixed countdown duration in milliseconds. Used when `target` is not set.",
+              "attribute": "duration"
+            },
+            {
+              "kind": "field",
+              "name": "autoStart",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Automatically start the countdown on connect.",
+              "attribute": "auto-start"
+            },
+            {
+              "kind": "field",
+              "name": "format",
+              "type": {
+                "text": "string"
+              },
+              "default": "'HH:MM:SS'",
+              "description": "Display format. Tokens: `DD` days, `HH` hours, `MM` minutes, `SS` seconds.",
+              "attribute": "format"
+            },
+            {
+              "kind": "field",
+              "name": "remaining",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "days",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "hours",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "minutes",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "seconds",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "timer",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedTargetTime",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "method",
+              "name": "start"
+            },
+            {
+              "kind": "method",
+              "name": "stop"
+            },
+            {
+              "kind": "method",
+              "name": "tick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getFormattedUnits",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ days: number, hours: number, minutes: number, seconds: number, remaining: number }"
+              },
+              "description": "Fired every second while the countdown is running",
+              "name": "countdown-tick"
+            },
+            {
+              "description": "countdown-complete - Fired when the countdown reaches zero",
+              "name": "void"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "target",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ISO 8601 date/time string for the countdown target (e.g. `\"2025-12-31T00:00:00\"`). Takes precedence over `duration`.",
+              "fieldName": "target"
+            },
+            {
+              "name": "duration",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Fixed countdown duration in milliseconds. Used when `target` is not set.",
+              "fieldName": "duration"
+            },
+            {
+              "name": "auto-start",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Automatically start the countdown on connect.",
+              "fieldName": "autoStart"
+            },
+            {
+              "name": "format",
+              "type": {
+                "text": "string"
+              },
+              "default": "'HH:MM:SS'",
+              "description": "Display format. Tokens: `DD` days, `HH` hours, `MM` minutes, `SS` seconds.",
+              "fieldName": "format"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-countdown",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Countdown",
+          "declaration": {
+            "name": "Countdown",
+            "module": "src/countdown.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-countdown",
+          "declaration": {
+            "name": "Countdown",
+            "module": "src/countdown.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Countdown",
+            "module": "src/countdown.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./countdown"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Countdown",
+          "declaration": {
+            "name": "Countdown",
+            "module": "./countdown"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CountdownConfig",
+          "declaration": {
+            "name": "CountdownConfig",
+            "module": "./types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CountdownTickEvent",
+          "declaration": {
+            "name": "CountdownTickEvent",
+            "module": "./types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; font-family: var(--uibit-countdown-font-family, inherit); font-size: var(--uibit-countdown-font-size, var(--uibit-font-size-base, 1rem)); font-weight: var(--uibit-countdown-font-weight, var(--uibit-font-weight-semibold, 600)); color: var(--uibit-countdown-color, #111827); text-align: center; } .countdown { display: flex; gap: var(--uibit-countdown-gap, 1.5rem); justify-content: center; align-items: center; } .unit { display: flex; flex-direction: column; align-items: center; gap: var(--uibit-countdown-unit-gap, 0.375rem); } .value { font-size: var(--uibit-countdown-value-font-size, var(--uibit-font-size-3xl, 2.25rem)); min-width: var(--uibit-countdown-value-min-width, 4rem); line-height: 1; letter-spacing: var(--uibit-letter-spacing-tight, -0.025em); font-variant-numeric: tabular-nums; } .label { font-size: var(--uibit-countdown-label-font-size, var(--uibit-font-size-xs, 0.6875rem)); text-transform: uppercase; letter-spacing: var(--uibit-letter-spacing-widest, 0.1em); color: var(--uibit-countdown-label-color, #6b7280); font-weight: var(--uibit-font-weight-medium, 500); } .separator { font-size: var(--uibit-countdown-separator-font-size, var(--uibit-font-size-3xl, 2.25rem)); align-self: flex-start; color: var(--uibit-countdown-separator-color, #d1d5db); line-height: 1; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/countdown.d.ts

@@ -0,0 +1,49 @@
+import { UIBitElement } from '@uibit/core';
+/**
+ * Countdown timer to a target date/time or a fixed duration. Supports
+ * configurable display formats and fires events on each tick and on completion.
+ *
+ * @fires {{ days: number, hours: number, minutes: number, seconds: number, remaining: number }} countdown-tick - Fired every second while the countdown is running
+ * @fires void countdown-complete - Fired when the countdown reaches zero
+ *
+ * @cssprop [--uibit-countdown-font-family=ui-monospace,'SF Mono',Menlo,monospace] - Font family for the entire countdown
+ * @cssprop [--uibit-countdown-font-size=1rem] - Base font size
+ * @cssprop [--uibit-countdown-font-weight=600] - Font weight
+ * @cssprop [--uibit-countdown-color=#111827] - Text color for values
+ * @cssprop [--uibit-countdown-gap=1.5rem] - Gap between time units
+ * @cssprop [--uibit-countdown-unit-gap=0.375rem] - Gap between the value and label within a unit
+ * @cssprop [--uibit-countdown-value-font-size=2.25rem] - Font size for the numeric value
+ * @cssprop [--uibit-countdown-value-min-width=4rem] - Min width of each value block
+ * @cssprop [--uibit-countdown-label-font-size=0.6875rem] - Font size for unit labels (Days, Hours…)
+ * @cssprop [--uibit-countdown-label-color=#6b7280] - Color for unit labels
+ * @cssprop [--uibit-countdown-separator-font-size=2.25rem] - Font size of the colon separator
+ * @cssprop [--uibit-countdown-separator-color=#d1d5db] - Color of the colon separator
+ */
+export declare class Countdown extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** ISO 8601 date/time string for the countdown target (e.g. `"2025-12-31T00:00:00"`). Takes precedence over `duration`. */
+    target?: string;
+    /** Fixed countdown duration in milliseconds. Used when `target` is not set. */
+    duration?: number;
+    /** Automatically start the countdown on connect. */
+    autoStart: boolean;
+    /** Display format. Tokens: `DD` days, `HH` hours, `MM` minutes, `SS` seconds. */
+    format: string;
+    private remaining;
+    private days;
+    private hours;
+    private minutes;
+    private seconds;
+    private timer?;
+    private resolvedTargetTime;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    start(): void;
+    stop(): void;
+    private tick;
+    private getFormattedUnits;
+    render(): import("lit").TemplateResult<1>;
+}
+export default Countdown;
+//# sourceMappingURL=countdown.d.ts.map

package/dist/countdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.d.ts","sourceRoot":"","sources":["../src/countdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAAE,MAAM,aAAa,CAAC;AAI/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,MAAM,CAAC,MAAM,0BAAU;IAEvB,2HAA2H;IAC/F,MAAM,CAAC,EAAE,MAAM,CAAC;IAC5C,+EAA+E;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC9C,oDAAoD;IACE,SAAS,UAAQ;IACvE,iFAAiF;IACrD,MAAM,SAAc;IAEvC,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,KAAK,CAAC,CAAS;IACvB,OAAO,CAAC,kBAAkB,CAAK;IAE/B,iBAAiB,SAKhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAY9C;IAED,KAAK,SASJ;IAED,IAAI,SAKH;IAED,OAAO,CAAC,IAAI;IAuBZ,OAAO,CAAC,iBAAiB;IAoDzB,MAAM,oCAeL;CACF;eAEc,SAAS"}

package/dist/countdown.js

@@ -0,0 +1,197 @@
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { html } from 'lit';
+import { customElement, msg, UIBitElement } from '@uibit/core';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Countdown timer to a target date/time or a fixed duration. Supports
+ * configurable display formats and fires events on each tick and on completion.
+ *
+ * @fires {{ days: number, hours: number, minutes: number, seconds: number, remaining: number }} countdown-tick - Fired every second while the countdown is running
+ * @fires void countdown-complete - Fired when the countdown reaches zero
+ *
+ * @cssprop [--uibit-countdown-font-family=ui-monospace,'SF Mono',Menlo,monospace] - Font family for the entire countdown
+ * @cssprop [--uibit-countdown-font-size=1rem] - Base font size
+ * @cssprop [--uibit-countdown-font-weight=600] - Font weight
+ * @cssprop [--uibit-countdown-color=#111827] - Text color for values
+ * @cssprop [--uibit-countdown-gap=1.5rem] - Gap between time units
+ * @cssprop [--uibit-countdown-unit-gap=0.375rem] - Gap between the value and label within a unit
+ * @cssprop [--uibit-countdown-value-font-size=2.25rem] - Font size for the numeric value
+ * @cssprop [--uibit-countdown-value-min-width=4rem] - Min width of each value block
+ * @cssprop [--uibit-countdown-label-font-size=0.6875rem] - Font size for unit labels (Days, Hours…)
+ * @cssprop [--uibit-countdown-label-color=#6b7280] - Color for unit labels
+ * @cssprop [--uibit-countdown-separator-font-size=2.25rem] - Font size of the colon separator
+ * @cssprop [--uibit-countdown-separator-color=#d1d5db] - Color of the colon separator
+ */
+let Countdown = class Countdown extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Automatically start the countdown on connect. */
+        this.autoStart = true;
+        /** Display format. Tokens: `DD` days, `HH` hours, `MM` minutes, `SS` seconds. */
+        this.format = 'HH:MM:SS';
+        this.remaining = 0;
+        this.days = 0;
+        this.hours = 0;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.resolvedTargetTime = 0;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.autoStart) {
+            this.start();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stop();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('target') ||
+            changedProperties.has('duration') ||
+            changedProperties.has('autoStart')) {
+            if (this.autoStart) {
+                this.start();
+            }
+            else {
+                this.stop();
+            }
+        }
+    }
+    start() {
+        this.stop();
+        const now = Date.now();
+        this.resolvedTargetTime = this.target
+            ? new Date(this.target).getTime()
+            : now + (this.duration || 0);
+        this.tick();
+        this.timer = window.setInterval(() => this.tick(), 1000);
+    }
+    stop() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    tick() {
+        const now = Date.now();
+        this.remaining = Math.max(0, this.resolvedTargetTime - now);
+        this.days = Math.floor(this.remaining / (1000 * 60 * 60 * 24));
+        this.hours = Math.floor((this.remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        this.minutes = Math.floor((this.remaining % (1000 * 60 * 60)) / (1000 * 60));
+        this.seconds = Math.floor((this.remaining % (1000 * 60)) / 1000);
+        this.dispatchCustomEvent('countdown-tick', {
+            remaining: this.remaining,
+            days: this.days,
+            hours: this.hours,
+            minutes: this.minutes,
+            seconds: this.seconds,
+        });
+        if (this.remaining <= 0) {
+            this.stop();
+            this.dispatchCustomEvent('countdown-complete');
+        }
+    }
+    getFormattedUnits() {
+        const fmt = (this.format || 'HH:MM:SS').toUpperCase();
+        let displayDays = 0;
+        let displayHours = 0;
+        let displayMinutes = 0;
+        let displaySeconds = 0;
+        const totalSeconds = Math.floor(this.remaining / 1000);
+        const totalMinutes = Math.floor(totalSeconds / 60);
+        const totalHours = Math.floor(totalMinutes / 60);
+        if (fmt.includes('DD') || fmt.includes('DAY')) {
+            displayDays = this.days;
+            displayHours = this.hours;
+            displayMinutes = this.minutes;
+            displaySeconds = this.seconds;
+        }
+        else if (fmt.includes('HH')) {
+            displayHours = totalHours;
+            displayMinutes = this.minutes;
+            displaySeconds = this.seconds;
+        }
+        else if (fmt.includes('MM')) {
+            displayMinutes = totalMinutes;
+            displaySeconds = this.seconds;
+        }
+        else {
+            displaySeconds = totalSeconds;
+        }
+        const units = [];
+        if (fmt.includes('DD') || fmt.includes('DAY')) {
+            units.push({ value: String(displayDays).padStart(2, '0'), label: msg('Days') });
+        }
+        if (fmt.includes('HH') || fmt.includes('HOUR')) {
+            units.push({ value: String(displayHours).padStart(2, '0'), label: msg('Hours') });
+        }
+        if (fmt.includes('MM') || fmt.includes('MIN')) {
+            units.push({ value: String(displayMinutes).padStart(2, '0'), label: msg('Minutes') });
+        }
+        if (fmt.includes('SS') || fmt.includes('SEC')) {
+            units.push({ value: String(displaySeconds).padStart(2, '0'), label: msg('Seconds') });
+        }
+        // If format matches nothing standard, default to HH:MM:SS
+        if (units.length === 0) {
+            units.push({ value: String(totalHours).padStart(2, '0'), label: msg('Hours') });
+            units.push({ value: String(this.minutes).padStart(2, '0'), label: msg('Minutes') });
+            units.push({ value: String(this.seconds).padStart(2, '0'), label: msg('Seconds') });
+        }
+        return units;
+    }
+    render() {
+        const units = this.getFormattedUnits();
+        return html `
+      <div part="countdown" class="countdown" role="timer" aria-live="polite" aria-label=${msg('Countdown timer')}>
+        ${units.map((unit, index) => html `
+            ${index > 0 ? html `<div part="separator" class="separator">:</div>` : ''}
+            <div part="unit" class="unit">
+              <div part="value" class="value">${unit.value}</div>
+              <div part="label" class="label"><slot name="${unit.label.toLowerCase()}-label">${unit.label}</slot></div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Countdown.prototype, "target", void 0);
+__decorate([
+    property({ type: Number })
+], Countdown.prototype, "duration", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-start' })
+], Countdown.prototype, "autoStart", void 0);
+__decorate([
+    property({ type: String })
+], Countdown.prototype, "format", void 0);
+__decorate([
+    state()
+], Countdown.prototype, "remaining", void 0);
+__decorate([
+    state()
+], Countdown.prototype, "days", void 0);
+__decorate([
+    state()
+], Countdown.prototype, "hours", void 0);
+__decorate([
+    state()
+], Countdown.prototype, "minutes", void 0);
+__decorate([
+    state()
+], Countdown.prototype, "seconds", void 0);
+Countdown = __decorate([
+    customElement('uibit-countdown')
+], Countdown);
+export { Countdown };
+export default Countdown;
+//# sourceMappingURL=countdown.js.map

package/dist/countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.js","sourceRoot":"","sources":["../src/countdown.ts"],"names":[],"mappings":"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"}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,46 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/countdown';
+import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+
+@Component({
+  selector: 'uibit-countdown',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(countdown-tick)': 'countdownTick.emit($event)',
+    '(void)': 'void.emit($event)'
+  }
+})
+export class NgxCountdown {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.target = this.target();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.duration = this.duration();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.autoStart = this.autoStart();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.format = this.format();
+      }
+    });
+  }
+
+  readonly target = input<string | undefined, any>('');
+  readonly duration = input<number | undefined, any>(0, { transform: numberAttribute });
+  readonly autoStart = input<boolean, any>(true, { transform: booleanAttribute });
+  readonly format = input<string, any>('HH:MM:SS');
+
+  readonly countdownTick = output<CustomEvent<{ days: number, hours: number, minutes: number, seconds: number, remaining: number }>>();
+  readonly void = output<CustomEvent<any>>();
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+import '@uibit/countdown';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-countdown': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/countdown');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'preact';
+import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+import '@uibit/countdown';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-countdown': JSX.HTMLAttributes<HTMLElementClass> & {
+      target?: string | undefined;
+      duration?: number | undefined;
+      autoStart?: boolean;
+      format?: string;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/countdown';
+
+export const Countdown = component$<any>((props) => {
+  return (
+    <uibit-countdown {...props}>
+      <Slot />
+    </uibit-countdown>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+import '@uibit/countdown';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-countdown': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      target?: string | undefined;
+      duration?: number | undefined;
+      autoStart?: boolean;
+      format?: string;
+      onCountdownTick?: (event: any) => void;
+      onVoid?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'solid-js';
+import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+import '@uibit/countdown';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-countdown': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              target?: string | undefined;
+      duration?: number | undefined;
+      autoStart?: boolean;
+      format?: string;
+      "on:countdown-tick"?: (event: CustomEvent) => void;
+      "on:void"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,15 @@
+import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+import '@uibit/countdown';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-countdown': HTMLElementClass & {
+    target?: string | undefined;
+    duration?: number | undefined;
+    autoStart?: boolean;
+    format?: string;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import '@uibit/countdown';
+  import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+  
+  let {
+    target = undefined,
+      duration = undefined,
+      autoStart = undefined,
+      format = undefined,
+      children
+  } = $props<{
+    children?: any;
+    target?: string | undefined;
+    duration?: number | undefined;
+    autoStart?: boolean;
+    format?: string;
+  
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && target !== undefined) {
+      elementRef.target = target;
+    }
+    if (elementRef && duration !== undefined) {
+      elementRef.duration = duration;
+    }
+    if (elementRef && autoStart !== undefined) {
+      elementRef.autoStart = autoStart;
+    }
+    if (elementRef && format !== undefined) {
+      elementRef.format = format;
+    }
+  });
+  
+</script>
+
+<uibit-countdown bind:this={elementRef} {...$$restProps}>
+
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-countdown>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,30 @@
+import { defineComponent, h } from 'vue';
+import type { Countdown as HTMLElementClass } from '@uibit/countdown';
+import '@uibit/countdown';
+
+export const Countdown = defineComponent({
+  name: 'Countdown',
+  props: {
+    target: { type: [String, Number, Boolean, Array, Object] as any },
+    duration: { type: [String, Number, Boolean, Array, Object] as any },
+    autoStart: { type: [String, Number, Boolean, Array, Object] as any },
+    format: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['countdown-tick', 'void'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onCountdown-tick'] = (event: Event) => {
+        emit('countdown-tick', event);
+      };
+      eventListeners['onVoid'] = (event: Event) => {
+        emit('void', event);
+      };
+
+      return h('uibit-countdown', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, Countdown } from './countdown';
+export type { CountdownConfig, CountdownTickEvent } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default, Countdown } from './countdown';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8ClB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    font-family: var(--uibit-countdown-font-family, inherit);
+    font-size: var(--uibit-countdown-font-size, var(--uibit-font-size-base, 1rem));
+    font-weight: var(--uibit-countdown-font-weight, var(--uibit-font-weight-semibold, 600));
+    color: var(--uibit-countdown-color, #111827);
+    text-align: center;
+  }
+
+  .countdown {
+    display: flex;
+    gap: var(--uibit-countdown-gap, 1.5rem);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .unit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--uibit-countdown-unit-gap, 0.375rem);
+  }
+
+  .value {
+    font-size: var(--uibit-countdown-value-font-size, var(--uibit-font-size-3xl, 2.25rem));
+    min-width: var(--uibit-countdown-value-min-width, 4rem);
+    line-height: 1;
+    letter-spacing: var(--uibit-letter-spacing-tight, -0.025em);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .label {
+    font-size: var(--uibit-countdown-label-font-size, var(--uibit-font-size-xs, 0.6875rem));
+    text-transform: uppercase;
+    letter-spacing: var(--uibit-letter-spacing-widest, 0.1em);
+    color: var(--uibit-countdown-label-color, #6b7280);
+    font-weight: var(--uibit-font-weight-medium, 500);
+  }
+
+  .separator {
+    font-size: var(--uibit-countdown-separator-font-size, var(--uibit-font-size-3xl, 2.25rem));
+    align-self: flex-start;
+    color: var(--uibit-countdown-separator-color, #d1d5db);
+    line-height: 1;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+import type Countdown from './countdown';
+export interface CountdownConfig {
+    target?: string | Date;
+    duration?: number;
+    autoStart?: boolean;
+    format?: string;
+    timezone?: string;
+}
+export interface CountdownTickEvent extends CustomEvent {
+    detail: {
+        remaining: number;
+        days: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-countdown': Countdown;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,MAAM,EAAE;QACN,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,SAAS,CAAC;KAChC;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@uibit/countdown",
+  "version": "0.1.0",
+  "description": "Highly customizable countdown timer. Supports target date markers or set durations, reactive timers, and custom format templates.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./countdown.css": "./dist/countdown.css",
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "countdown",
+    "timer",
+    "web-component",
+    "lit",
+    "event"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/countdown"
+  },
+  "dependencies": {
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "countdown",
+    "title": "Countdown",
+    "category": "Data",
+    "tagName": "uibit-countdown"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}