@mcp-b/web-components 0.2.0

package/dist/themes/sigvelo.css

@@ -0,0 +1,10 @@
+/*
+ * The theme entry point for the component libraries.
+ *
+ * Everything lives in @mcp-b/wc-support so the token imports, the preset
+ * opt-ins, and the cloak utility are defined exactly once and every Lit package
+ * loads the same stylesheet. This file exists only so consumers can keep
+ * importing `@mcp-b/web-components/themes/sigvelo.css`.
+ */
+
+@import "@mcp-b/wc-support/themes/sigvelo";

package/dist/themes/utilities.css

@@ -0,0 +1,9 @@
+/*
+ * Light-DOM utility classes for composing around components.
+ *
+ * Defined once in @mcp-b/wc-support so every Lit package shares one copy. This
+ * file exists only so consumers can keep importing
+ * `@mcp-b/web-components/themes/utilities.css`.
+ */
+
+@import "@mcp-b/wc-support/themes/utilities";

package/dist/timed-content-D2mGFamc.d.ts

@@ -0,0 +1,181 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/timed-content/timed-content.d.ts
+/**
+ * <sigvelo-timed-content>
+ *
+ * @summary Shows certain content based on the current date and time.
+ * @tag sigvelo-timed-content
+ * @documentation https://design-system.sigvelo.com/docs/components/timed-content
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The default slot.
+ * @slot before - Optional content that shows before the specified date/time.
+ * @slot after - Optional content that shows after the specified date/time.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-timed-content id="timed__overview">
+ *   <div>
+ *     <img src="https://images.unsplash.com/photo-1668303656123-54ae65ad75ee?q=80&w=2818&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A cat curled up asleep in the moonlight">
+ *     <small>It's before noon, the cats are still sleeping</small>
+ *   </div>
+ *
+ *   <div slot="after">
+ *     <img src="https://images.unsplash.com/photo-1568043210943-0e8aac4b9734?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A cat laying in the daylight">
+ *     <small>It's past noon, the cats are out and about</small>
+ *   </div>
+ * </sigvelo-timed-content>
+ *
+ * <script>
+ *   // Obtain a reference
+ *   const timedContent = document.getElementById('timed__overview');
+ *
+ *   // Get today's date
+ *   const today = new Date();
+ *
+ *   // Set the start date to 12am today and the end date to 12pm today
+ *   const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+ *   const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 0, 0);
+ *
+ *   // Set the start and end dates
+ *   timedContent.startDate = startDate;
+ *   timedContent.endDate = endDate;
+ * </script>
+ *
+ * <style>
+ *   #timed__overview {
+ *     img {
+ *       margin-block-end: 0.5rem;
+ *     }
+ *
+ *     small {
+ *       display: block;
+ *       text-align: center;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * **Note:** If you pass a string to the `start-date` or `end-date` attributes, always use the [ISO 8601 format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). Otherwise, ambiguous dates such as 01/02/2000 can be parsed as January 2 or February 1 depending on the client's locale.
+ *
+ * @example Providing dates
+ * The most common use case is showing content during a specific period of time. Use the `start-date` and `end-date` attributes to tell the component when to show the content.
+ *
+ * ```html
+ * <sigvelo-timed-content
+ *   start-date="2025-12-01T00:00:00.000Z"
+ *   end-date="2025-12-31T23:59:59.999Z"
+ * >
+ *   <p>Holiday Sale! All catnip toys are 50% off!</p>
+ * </sigvelo-timed-content>
+ * ```
+ *
+ * You can also pass a `Date` object to the `startDate` and `endDate` properties.
+ *
+ * ```html
+ * <sigvelo-timed-content>
+ *   <p>Holiday Sale! All catnip toys are 50% off!</p>
+ * </sigvelo-timed-content>
+ *
+ * <script>
+ *   const timedContent = document.querySelector('sigvelo-timed-content');
+ *
+ *   timedContent.startDate = new Date('2025-12-01T00:00:00.000Z');
+ *   timedContent.endDate = new Date('2025-12-31T23:59:59.999Z');
+ * </script>
+ * ```
+ *
+ * **Warning:** If you specify a date without a timezone, e.g. `2025-12-01`, it will be interpreted in the user's local timezone. To ensure consistent behavior across timezones, include explicit timezone information in your dates, e.g. `2025-12-01T00:00:00Z` for UTC, or be aware that users in different timezones may see content transitions at different times.
+ *
+ * @example Before and after slots
+ * Use the `before` and `after` slots to show different content outside of the specified date range. The `before` slot shows when the current date is before the start date, and the `after` slot shows when the current date is after the end date.
+ *
+ * ```html
+ * <sigvelo-timed-content
+ *   start-date="2025-08-15"
+ *   end-date="2025-08-17"
+ * >
+ *   <div>
+ *     <h3>Sale</h3>
+ *     <p>25% off all premium cat food!</p>
+ *   </div>
+ *
+ *   <div slot="before">
+ *     <h3>Sale Coming Soon</h3>
+ *     <p>Cat food sale begins August 15th!</p>
+ *   </div>
+ *
+ *   <div slot="after">
+ *     <h3>Sale Ended</h3>
+ *     <p>Thanks for treating your cats during our promotion!</p>
+ *   </div>
+ * </sigvelo-timed-content>
+ * ```
+ *
+ * @example Start date only
+ * When only the `start-date` is provided, content will show from that date forward. This is useful for feature launches or permanent changes that take effect on a specific date.
+ *
+ * ```html
+ * <sigvelo-timed-content start-date="2025-06-15">
+ *   <p>New feature is now available!</p>
+ *
+ *   <div slot="before">
+ *     <p>New feature coming June 15th!</p>
+ *   </div>
+ * </sigvelo-timed-content>
+ * ```
+ *
+ * @example End date only
+ * When only the `end-date` is provided, content will show up until that date. This is useful for limited-time offers or deprecation notices.
+ *
+ * ```html
+ * <sigvelo-timed-content end-date="2025-03-31">
+ *   <p>The legacy API is available until March 31</p>
+ *
+ *   <div slot="after">
+ *     <p>The legacy API has been discontinued</p>
+ *   </div>
+ * </sigvelo-timed-content>
+ * ```
+ *
+ * @example Enabling live updates
+ * By default, the component will render the content based on the time the page was first loaded. To update the component dynamically as time passes, add the `live` attribute. For performance, live updates only occur every 60 seconds.
+ *
+ * ```html
+ * <sigvelo-timed-content
+ *  start-date="2025-05-31T14:30:00.000Z"
+ *  end-date="2025-05-31T14:35:00.000Z"
+ *  live
+ * >
+ *   <p>Flash sale happening now! ⚡</p>
+ *   <p slot="before">Flash sale starts at 2:30 PM UTC</p>
+ *   <p slot="after">Flash sale ended at 2:35 PM UTC</p>
+ * </sigvelo-timed-content>
+ * ```
+ */
+declare class SigveloTimedContent extends SigveloElement {
+  static styles: CSSResultGroup;
+  private updateInterval;
+  /** The date to start showing the content. */
+  startDate: string | Date;
+  /** The date to stop showing the content. */
+  endDate: string | Date;
+  /** When set, the content will update as the time changes. */
+  live: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  private setupTimer;
+  private cleanupTimer;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-timed-content": SigveloTimedContent;
+  }
+}
+//#endregion
+export { SigveloTimedContent as t };

package/dist/timed-content-pvEP4l5V.js

@@ -0,0 +1,226 @@
+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/timed-content/timed-content.styles.ts
+var timed_content_styles_default = css`
+  :host {
+    display: contents;
+  }
+`;
+//#endregion
+//#region src/components/timed-content/timed-content.ts
+/**
+* <sigvelo-timed-content>
+*
+* @summary Shows certain content based on the current date and time.
+* @tag sigvelo-timed-content
+* @documentation https://design-system.sigvelo.com/docs/components/timed-content
+* @status stable
+* @since 1.0
+*
+* @slot - The default slot.
+* @slot before - Optional content that shows before the specified date/time.
+* @slot after - Optional content that shows after the specified date/time.
+*
+* @example Default
+* ```html
+* <sigvelo-timed-content id="timed__overview">
+*   <div>
+*     <img src="https://images.unsplash.com/photo-1668303656123-54ae65ad75ee?q=80&w=2818&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A cat curled up asleep in the moonlight">
+*     <small>It's before noon, the cats are still sleeping</small>
+*   </div>
+*
+*   <div slot="after">
+*     <img src="https://images.unsplash.com/photo-1568043210943-0e8aac4b9734?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A cat laying in the daylight">
+*     <small>It's past noon, the cats are out and about</small>
+*   </div>
+* </sigvelo-timed-content>
+*
+* <script>
+*   // Obtain a reference
+*   const timedContent = document.getElementById('timed__overview');
+*
+*   // Get today's date
+*   const today = new Date();
+*
+*   // Set the start date to 12am today and the end date to 12pm today
+*   const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+*   const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 0, 0);
+*
+*   // Set the start and end dates
+*   timedContent.startDate = startDate;
+*   timedContent.endDate = endDate;
+* <\/script>
+*
+* <style>
+*   #timed__overview {
+*     img {
+*       margin-block-end: 0.5rem;
+*     }
+*
+*     small {
+*       display: block;
+*       text-align: center;
+*     }
+*   }
+* </style>
+* ```
+*
+* **Note:** If you pass a string to the `start-date` or `end-date` attributes, always use the [ISO 8601 format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). Otherwise, ambiguous dates such as 01/02/2000 can be parsed as January 2 or February 1 depending on the client's locale.
+*
+* @example Providing dates
+* The most common use case is showing content during a specific period of time. Use the `start-date` and `end-date` attributes to tell the component when to show the content.
+*
+* ```html
+* <sigvelo-timed-content
+*   start-date="2025-12-01T00:00:00.000Z"
+*   end-date="2025-12-31T23:59:59.999Z"
+* >
+*   <p>Holiday Sale! All catnip toys are 50% off!</p>
+* </sigvelo-timed-content>
+* ```
+*
+* You can also pass a `Date` object to the `startDate` and `endDate` properties.
+*
+* ```html
+* <sigvelo-timed-content>
+*   <p>Holiday Sale! All catnip toys are 50% off!</p>
+* </sigvelo-timed-content>
+*
+* <script>
+*   const timedContent = document.querySelector('sigvelo-timed-content');
+*
+*   timedContent.startDate = new Date('2025-12-01T00:00:00.000Z');
+*   timedContent.endDate = new Date('2025-12-31T23:59:59.999Z');
+* <\/script>
+* ```
+*
+* **Warning:** If you specify a date without a timezone, e.g. `2025-12-01`, it will be interpreted in the user's local timezone. To ensure consistent behavior across timezones, include explicit timezone information in your dates, e.g. `2025-12-01T00:00:00Z` for UTC, or be aware that users in different timezones may see content transitions at different times.
+*
+* @example Before and after slots
+* Use the `before` and `after` slots to show different content outside of the specified date range. The `before` slot shows when the current date is before the start date, and the `after` slot shows when the current date is after the end date.
+*
+* ```html
+* <sigvelo-timed-content
+*   start-date="2025-08-15"
+*   end-date="2025-08-17"
+* >
+*   <div>
+*     <h3>Sale</h3>
+*     <p>25% off all premium cat food!</p>
+*   </div>
+*
+*   <div slot="before">
+*     <h3>Sale Coming Soon</h3>
+*     <p>Cat food sale begins August 15th!</p>
+*   </div>
+*
+*   <div slot="after">
+*     <h3>Sale Ended</h3>
+*     <p>Thanks for treating your cats during our promotion!</p>
+*   </div>
+* </sigvelo-timed-content>
+* ```
+*
+* @example Start date only
+* When only the `start-date` is provided, content will show from that date forward. This is useful for feature launches or permanent changes that take effect on a specific date.
+*
+* ```html
+* <sigvelo-timed-content start-date="2025-06-15">
+*   <p>New feature is now available!</p>
+*
+*   <div slot="before">
+*     <p>New feature coming June 15th!</p>
+*   </div>
+* </sigvelo-timed-content>
+* ```
+*
+* @example End date only
+* When only the `end-date` is provided, content will show up until that date. This is useful for limited-time offers or deprecation notices.
+*
+* ```html
+* <sigvelo-timed-content end-date="2025-03-31">
+*   <p>The legacy API is available until March 31</p>
+*
+*   <div slot="after">
+*     <p>The legacy API has been discontinued</p>
+*   </div>
+* </sigvelo-timed-content>
+* ```
+*
+* @example Enabling live updates
+* By default, the component will render the content based on the time the page was first loaded. To update the component dynamically as time passes, add the `live` attribute. For performance, live updates only occur every 60 seconds.
+*
+* ```html
+* <sigvelo-timed-content
+*  start-date="2025-05-31T14:30:00.000Z"
+*  end-date="2025-05-31T14:35:00.000Z"
+*  live
+* >
+*   <p>Flash sale happening now! ⚡</p>
+*   <p slot="before">Flash sale starts at 2:30 PM UTC</p>
+*   <p slot="after">Flash sale ended at 2:35 PM UTC</p>
+* </sigvelo-timed-content>
+* ```
+*/
+var SigveloTimedContent = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.startDate = "";
+		this.endDate = "";
+		this.live = false;
+	}
+	static {
+		this.styles = [hostStyles, timed_content_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.live) this.setupTimer();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.cleanupTimer();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("live")) if (this.live) this.setupTimer();
+		else this.cleanupTimer();
+	}
+	setupTimer() {
+		this.cleanupTimer();
+		this.updateInterval = setInterval(() => this.requestUpdate(), 6e4);
+	}
+	cleanupTimer() {
+		if (this.updateInterval !== void 0) {
+			clearInterval(this.updateInterval);
+			this.updateInterval = void 0;
+		}
+	}
+	render() {
+		const now = /* @__PURE__ */ new Date();
+		const start = this.startDate ? new Date(this.startDate) : null;
+		const end = this.endDate ? new Date(this.endDate) : null;
+		const isStartValid = start && !isNaN(start.getTime());
+		const isEndValid = end && !isNaN(end.getTime());
+		if (start && !isStartValid || end && !isEndValid) {
+			if (start && !isStartValid) console.warn("Invalid start date:", this.startDate);
+			if (end && !isEndValid) console.warn("Invalid end date:", this.endDate);
+			return html` <slot></slot> `;
+		}
+		const showBefore = isStartValid && now < start;
+		const showAfter = isEndValid && now >= end;
+		if (showBefore) return html` <slot name="before"></slot> `;
+		if (showAfter) return html` <slot name="after"></slot> `;
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property({ attribute: "start-date" })], SigveloTimedContent.prototype, "startDate", void 0);
+__decorate([property({ attribute: "end-date" })], SigveloTimedContent.prototype, "endDate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloTimedContent.prototype, "live", void 0);
+customElements.define("sigvelo-timed-content", SigveloTimedContent);
+//#endregion
+export { SigveloTimedContent as t };