@redvars/peacock 3.8.1 → 3.8.2

package/dist/chip.js

@@ -0,0 +1,459 @@
+import { i, a as i$1, b, A, _ as __decorate, I as IndividualComponent } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e as e$1 } from './query-CHb9Ft_d.js';
+import { e } from './class-map-DG7CA1et.js';
+import { o } from './if-defined-BXZpRQ4P.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-DPxaZrZF.js';
+import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { i as isLink } from './is-link-Dk2OV3PM.js';
+import { t as throttle } from './throttle-C7ZAPqtu.js';
+import { s as spread } from './spread-B5cgadZl.js';
+import { D as DISABLED_REASON_ID } from './ButtonConstants-CahP2_NA.js';
+import { m as mixinBaseButton, a as mixinHyperlink } from './hyperlink-DLvb6MXE.js';
+import { m as mixinDelegatesAria, a as mixinElementInternals } from './element-internals-2CMts_0M.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  position: relative;
+  display: inline-flex;
+  --chip-container-color: var(--color-surface);
+  --chip-label-text-color: var(--color-on-surface);
+  --chip-outline-color: var(--color-outline-variant);
+  --chip-container-shape: var(--shape-corner-small);
+  --chip-container-padding: 1rem;
+  /* 8dp */
+}
+
+/*
+  * Reset native button/link styles
+  */
+.button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  text-decoration: none;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  height: var(--chip-height, var(--_chip-height, 2rem));
+  width: 100%;
+  cursor: pointer;
+  z-index: 0;
+}
+.chip .tag-content {
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--chip-container-padding);
+  color: var(--_chip-text-color);
+  opacity: var(--_chip-text-opacity, 1);
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+}
+.chip .tag-content .label-container {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chip .tag-content .close-btn {
+  height: 100%;
+  padding: 0;
+  padding-inline: calc(var(--chip-container-padding) / 2);
+  margin: 0;
+  border: none;
+  background: transparent;
+  line-height: 0;
+  cursor: pointer;
+}
+.chip .tag-content .close-btn .close-btn-icon {
+  --icon-size: 1rem;
+  --icon-color: var(--_chip-text-color);
+}
+.chip .tag-content .close-btn:hover {
+  background: var(--chip-hover-color);
+}
+.chip .tag-content .icon-slot-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  --icon-size: 1rem;
+  --icon-color: var(--color-primary);
+}
+.chip.disabled {
+  cursor: not-allowed;
+}
+.chip.dismissible .tag-content {
+  padding-inline-end: 0;
+}
+.chip.dismissible.actionable .tag-content {
+  padding-inline-end: calc(var(--chip-container-padding) / 2);
+}
+.chip.icon-slot-has-content .tag-content, .chip.selected .tag-content {
+  padding-inline-start: 0;
+}
+.chip.icon-slot-has-content .icon-slot-container, .chip.selected .icon-slot-container {
+  padding-inline: calc(var(--chip-container-padding) / 2);
+}
+
+/*
+  Background layers
+ */
+.focus-ring {
+  z-index: 2;
+  display: block;
+  --focus-ring-container-shape: var(--chip-container-shape);
+}
+
+.ripple {
+  display: block;
+  border-radius: var(--chip-container-shape);
+  --ripple-state-opacity: var(--_chip-state-opacity, 0);
+  --ripple-pressed-color: var(--_chip-state-color);
+}
+
+.background {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--chip-container-shape);
+  background: var(--_chip-container-color);
+  pointer-events: none;
+}
+
+.outline {
+  z-index: 0;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--chip-container-shape);
+  border: 1px solid var(--chip-outline-color);
+}
+
+.elevation {
+  --elevation-level: 0;
+  transition-duration: 280ms;
+  --elevation-container-shape: var(--chip-container-shape);
+}
+
+/* Color/state management */
+:host {
+  --_chip-container-color: var(--chip-container-color);
+  --_chip-text-color: var(--chip-label-text-color);
+  --_chip-state-color: var(--_chip-text-color);
+}
+
+:host:hover {
+  --_chip-state-opacity: 0.08;
+}
+
+:host(:active) {
+  --_chip-state-opacity: 0.12;
+}
+
+:host([selected]) {
+  --_chip-container-color: var(--color-secondary-container);
+  --_chip-text-color: var(--color-on-secondary-container);
+}
+
+:host([disabled]) {
+  --_chip-container-color: var(--color-on-surface);
+  --_chip-container-opacity: 0.1;
+  --_chip-text-color: var(--color-on-surface);
+  --_chip-text-opacity: 0.38;
+}
+:host([disabled]) .ripple {
+  display: none;
+}`;
+
+var css_248z = i`.tag {
+  font-family: var(--font-family-sans) !important;
+}
+
+.tag.size-xs,
+.tag.size-extra-small {
+  --_button-height: 2rem;
+  --_button-icon-size: 1.25rem;
+  --_container-padding: 0.75rem;
+  font-size: 0.875rem !important;
+  font-weight: var(--font-weight-medium) !important;
+  line-height: 1.25rem !important;
+  letter-spacing: 0.1px !important;
+}
+
+.tag.size-sm,
+.tag.size-small {
+  --_button-height: 2.5rem;
+  --_button-icon-size: 1.25rem;
+  --_container-padding: 1rem;
+  font-size: 0.875rem !important;
+  font-weight: var(--font-weight-medium) !important;
+  line-height: 1.25rem !important;
+  letter-spacing: 0.1px !important;
+}
+
+.button.size-md,
+.button.size-medium {
+  --_button-height: 3.5rem;
+  --_button-icon-size: 1.5rem;
+  --_container-padding: 1.5rem;
+  font-size: 1rem !important;
+  font-weight: var(--font-weight-medium) !important;
+  line-height: 1.5rem !important;
+  letter-spacing: 0.15px !important;
+}
+
+.button.size-lg,
+.button.size-large {
+  --_button-height: 6rem;
+  --_button-icon-size: 2rem;
+  --_container-padding: 3rem;
+  font-size: 1.5rem !important;
+  font-weight: var(--font-weight-regular) !important;
+  line-height: 2rem !important;
+  letter-spacing: 0 !important;
+}
+
+.button.size-xl {
+  --_button-height: 8.5rem;
+  --_button-icon-size: 2.5rem;
+  --_container-padding: 4rem;
+  font-size: 2rem !important;
+  font-weight: var(--font-weight-regular) !important;
+  line-height: 2.5rem !important;
+  letter-spacing: 0 !important;
+}`;
+
+/**
+ * @label Chip
+ * @tag wc-chip
+ * @rawTag chip
+ * @summary Chip component for displaying compact information with optional actions.
+ * @tags display
+ *
+ * @example
+ * ```html
+ * <wc-chip>Chip content</wc-chip>
+ * ```
+ */
+let Chip = class Chip extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mixinElementInternals(i$1)))) {
+    constructor() {
+        super();
+        /** If true, the tag will have a close icon. */
+        this.dismissible = false;
+        /** True when the `icon` slot contains at least one node. */
+        this._hasIconSlotContent = false;
+        /** When true, renders the chip in a loading skeleton state. */
+        this.skeleton = false;
+        /** When true, the chip is in the selected/pressed state. */
+        this.selected = false;
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            // If the button is soft-disabled or a disabled link, we need to explicitly
+            // prevent the click from propagating to other event listeners as well as
+            // prevent the default action.
+            if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.buttonElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.buttonElement);
+        };
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+    }
+    __renderDisabledReason(softDisabled) {
+        if (softDisabled)
+            return b `<div
+        id=${DISABLED_REASON_ID}
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+        return A;
+    }
+    __renderTooltip() {
+        if (this.tooltip) {
+            return b `<wc-tooltip class="tooltip" for="button"
+        >${this.tooltip}</wc-tooltip
+      >`;
+        }
+        return A;
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    firstUpdated() {
+        if (typeof this.throttleDelay === 'number') {
+            this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        }
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="icon"]'), hasContent => {
+            this._hasIconSlotContent = hasContent;
+            this.requestUpdate();
+        });
+    }
+    _dismissClickHandler(e) {
+        e.stopPropagation();
+        // Custom Event: tag--dismiss
+        this.dispatchEvent(new CustomEvent('tag--dismiss', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _renderCloseButton() {
+        if (!this.dismissible)
+            return A;
+        return b `
+      <button
+        class="close-btn"
+        @click=${this._dismissClickHandler}
+        aria-label="Dismiss"
+      >
+        <wc-icon class="close-btn-icon" name="close"></wc-icon>
+      </button>
+    `;
+    }
+    render() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple" for="button"></wc-ripple>
+
+      ${this.renderChipElement()} ${this.__renderTooltip()}
+    `;
+    }
+    renderChipElement() {
+        const cssClasses = {
+            chip: true,
+            button: true,
+            selected: this.selected,
+            dismissible: this.dismissible,
+            'icon-slot-has-content': this._hasIconSlotContent,
+        };
+        if (!isLink(this)) {
+            return b `<button
+        class=${e(cssClasses)}
+        id="button"
+        aria-describedby=${o(this.softDisabled ? DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+        ?disabled=${this.disabled}
+        ${spread(this.configAria)}
+      >
+        ${this.renderChipContent()}
+      </button>`;
+        }
+        return b `<a
+      class=${e(cssClasses)}
+      id="button"
+      href=${this.href}
+      target=${this.target}
+      tabindex=${this.disabled ? '-1' : '0'}
+      role="button"
+      aria-describedby=${o(this.softDisabled ? DISABLED_REASON_ID : undefined)}
+      ?aria-disabled=${this.softDisabled}
+      ${spread(this.configAria)}
+    >
+      ${this.renderChipContent()}
+    </a>`;
+    }
+    renderChipContent() {
+        return b `
+      <div class="tag-content">
+        <div class="icon-slot-container">
+          ${this.selected
+            ? b `<wc-icon class="selected-icon" name="check"></wc-icon>`
+            : b `<slot name="icon"></slot>`}
+        </div>
+        <div class="label-container">
+          <slot></slot>
+        </div>
+        ${this._renderCloseButton()}
+      </div>
+    `;
+    }
+};
+/** @nocollapse */ // eslint-disable-next-line
+Chip.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+// Define styles (Lit handles Scoping via Shadow DOM by default)
+// You would typically import your tag.scss.js here or use the css tag
+Chip.styles = [css_248z$1, css_248z];
+__decorate([
+    n({ type: Boolean })
+], Chip.prototype, "dismissible", void 0);
+__decorate([
+    n({ reflect: true })
+], Chip.prototype, "configAria", void 0);
+__decorate([
+    r()
+], Chip.prototype, "_hasIconSlotContent", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "skeleton", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "selected", void 0);
+__decorate([
+    n()
+], Chip.prototype, "throttleDelay", void 0);
+__decorate([
+    n()
+], Chip.prototype, "tooltip", void 0);
+__decorate([
+    e$1('.button')
+], Chip.prototype, "buttonElement", void 0);
+Chip = __decorate([
+    IndividualComponent
+], Chip);
+
+export { Chip };
+//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../src/chip/chip/chip.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport styles from './chip.scss';\nimport sizeStyles from './chip-sizes.scss';\nimport { spread } from '@/__internal/directive/spread.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { mixinBaseButton } from '@/button/base-button/base-button.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\n\n/**\n * @label Chip\n * @tag wc-chip\n * @rawTag chip\n * @summary Chip component for displaying compact information with optional actions.\n * @tags display\n *\n * @example\n * ```html\n * <wc-chip>Chip content</wc-chip>\n * ```\n */\n@IndividualComponent\nexport class Chip extends mixinBaseButton(\n  mixinHyperlink(mixinDelegatesAria(mixinElementInternals(LitElement))),\n) {\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  // Define styles (Lit handles Scoping via Shadow DOM by default)\n  // You would typically import your tag.scss.js here or use the css tag\n  static styles = [styles, sizeStyles];\n\n  /** If true, the tag will have a close icon. */\n  @property({ type: Boolean }) dismissible = false;\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  /** True when the `icon` slot contains at least one node. */\n  @state() private _hasIconSlotContent = false;\n\n  /** When true, renders the chip in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /** When true, the chip is in the selected/pressed state. */\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /**\n   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.\n   */\n  @property() throttleDelay?: number;\n\n  /** Optional tooltip text displayed on hover. */\n  @property() tooltip?: string;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  __renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __renderTooltip() {\n    if (this.tooltip) {\n      return html`<wc-tooltip class=\"tooltip\" for=\"button\"\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"icon\"]'),\n      hasContent => {\n        this._hasIconSlotContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  private _dismissClickHandler(e: MouseEvent) {\n    e.stopPropagation();\n\n    // Custom Event: tag--dismiss\n    this.dispatchEvent(\n      new CustomEvent('tag--dismiss', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderCloseButton() {\n    if (!this.dismissible) return nothing;\n\n    return html`\n      <button\n        class=\"close-btn\"\n        @click=${this._dismissClickHandler}\n        aria-label=\"Dismiss\"\n      >\n        <wc-icon class=\"close-btn-icon\" name=\"close\"></wc-icon>\n      </button>\n    `;\n  }\n\n  render() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n\n      ${this.renderChipElement()} ${this.__renderTooltip()}\n    `;\n  }\n\n  renderChipElement() {\n    const cssClasses = {\n      chip: true,\n      button: true,\n      selected: this.selected,\n      dismissible: this.dismissible,\n      'icon-slot-has-content': this._hasIconSlotContent,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderChipContent()}\n      </button>`;\n    }\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      href=${this.href}\n      target=${this.target}\n      tabindex=${this.disabled ? '-1' : '0'}\n      role=\"button\"\n      aria-describedby=${ifDefined(\n        this.softDisabled ? DISABLED_REASON_ID : undefined,\n      )}\n      ?aria-disabled=${this.softDisabled}\n      ${spread(this.configAria)}\n    >\n      ${this.renderChipContent()}\n    </a>`;\n  }\n\n  renderChipContent() {\n    return html`\n      <div class=\"tag-content\">\n        <div class=\"icon-slot-container\">\n          ${this.selected\n            ? html`<wc-icon class=\"selected-icon\" name=\"check\"></wc-icon>`\n            : html`<slot name=\"icon\"></slot>`}\n        </div>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        ${this._renderCloseButton()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","styles","sizeStyles","property","state","query"],"mappings":"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"}

package/dist/{class-map-YU7g0o3B.js → class-map-DG7CA1et.js}

@@ -1,4 +1,4 @@
-import { E } from './IndividualComponent-DUINtMGK.js';
+import { E } from './IndividualComponent-Bdwyrvd6.js';
 import { e as e$1, i, t } from './directive-ZPhl09Yt.js';
 
 /**
@@ -8,4 +8,4 @@ import { e as e$1, i, t } from './directive-ZPhl09Yt.js';
  */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
 export { e };
-//# sourceMappingURL=class-map-YU7g0o3B.js.map
+//# sourceMappingURL=class-map-DG7CA1et.js.map

package/dist/{class-map-YU7g0o3B.js.map → class-map-DG7CA1et.js.map}

@@ -1 +1 @@
-{"version":3,"file":"class-map-YU7g0o3B.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"class-map-DG7CA1et.js","sources":["../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as s,Directive as i,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||t.strings?.length>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter(s=>t[s]).join(\" \")+\" \"}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(\" \").split(/\\s/).filter(t=>\"\"!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["s","t","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAQ,MAAC,CAAC,CAACA,GAAC,CAAC,cAAc,CAAC,CAAC,WAAW,CAACC,GAAC,CAAC,CAAC,GAAG,KAAK,CAACA,GAAC,CAAC,CAACA,GAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,SAAS,EAAE,OAAO,GAAGD,GAAC,CAAC,IAAI,EAAEA,GAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,oGAAoG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAM,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,OAAOA,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/clock.js

@@ -1,5 +1,5 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
 
 class ClockController {
     constructor(host, timeout = 1000) {
@@ -31,6 +31,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: inline-block;
 }

package/dist/clock.js.map

@@ -1 +1 @@
-{"version":3,"file":"clock.js","sources":["../../src/clock/ClockController.ts","../../src/clock/clock.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class ClockController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  value = new Date();\n\n  timeout: number;\n\n  private _timerID?: any;\n\n  constructor(host: ReactiveControllerHost, timeout = 1000) {\n    this.host = host;\n    this.host.addController(this);\n    this.timeout = timeout;\n  }\n\n  hostConnected() {\n    // Start a timer when the host is connected\n    this._timerID = setInterval(() => {\n      this.value = new Date();\n      // Update the host with new value\n      this.host.requestUpdate();\n    }, this.timeout);\n  }\n\n  hostDisconnected() {\n    // Clear the timer when the host is disconnected\n    clearInterval(this._timerID);\n    this._timerID = undefined;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { ClockController } from './ClockController.js';\n\nimport styles from './clock.scss';\n\n/**\n * @label Clock\n * @tag wc-clock\n * @rawTag clock\n * @summary Displays the current time in a given timezone.\n * @overview\n *  - Clocks are used to display the current time in a specified timezone.\n *  - They can be displayed in various formats, including 12-hour and 24-hour time.\n * @tags display\n *\n * @example\n * ```html\n * <wc-clock></wc-clock>\n * ```\n */\n@IndividualComponent\nexport class Clock extends LitElement {\n  static styles = [styles];\n\n  clockController = new ClockController(this, 100);\n\n  @property() timezone?: string;\n\n  __formatDate(date: Date) {\n    return date.toLocaleTimeString('en-US', {\n      timeZone: this.timezone,\n    });\n  }\n\n  render() {\n    const currentDate = this.__formatDate(this.clockController.value);\n    return html`<div class=\"current-time\">${currentDate}</div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;MAEa,eAAe,CAAA;AAS1B,IAAA,WAAA,CAAY,IAA4B,EAAE,OAAO,GAAG,IAAI,EAAA;AANxD,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,IAAI,EAAE;AAOhB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IACxB;IAEA,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;;AAEvB,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;IAClB;IAEA,gBAAgB,GAAA;;AAEd,QAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;AACD;;;;;;;;;;;;;;;;;;;;;;ACxBD;;;;;;;;;;;;;;AAcG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;QAGL,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC;IAclD;AAVE,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AACjE,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,WAAW,QAAQ;IAC7D;;AAfO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALnB,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAiBjB;;;;"}
+{"version":3,"file":"clock.js","sources":["../../src/clock/ClockController.ts","../../src/clock/clock.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class ClockController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  value = new Date();\n\n  timeout: number;\n\n  private _timerID?: any;\n\n  constructor(host: ReactiveControllerHost, timeout = 1000) {\n    this.host = host;\n    this.host.addController(this);\n    this.timeout = timeout;\n  }\n\n  hostConnected() {\n    // Start a timer when the host is connected\n    this._timerID = setInterval(() => {\n      this.value = new Date();\n      // Update the host with new value\n      this.host.requestUpdate();\n    }, this.timeout);\n  }\n\n  hostDisconnected() {\n    // Clear the timer when the host is disconnected\n    clearInterval(this._timerID);\n    this._timerID = undefined;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { ClockController } from './ClockController.js';\n\nimport styles from './clock.scss';\n\n/**\n * @label Clock\n * @tag wc-clock\n * @rawTag clock\n * @summary Displays the current time in a given timezone.\n * @overview\n *  - Clocks are used to display the current time in a specified timezone.\n *  - They can be displayed in various formats, including 12-hour and 24-hour time.\n * @tags display\n *\n * @example\n * ```html\n * <wc-clock></wc-clock>\n * ```\n */\n@IndividualComponent\nexport class Clock extends LitElement {\n  static styles = [styles];\n\n  clockController = new ClockController(this, 100);\n\n  @property() timezone?: string;\n\n  __formatDate(date: Date) {\n    return date.toLocaleTimeString('en-US', {\n      timeZone: this.timezone,\n    });\n  }\n\n  render() {\n    const currentDate = this.__formatDate(this.clockController.value);\n    return html`<div class=\"current-time\">${currentDate}</div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;MAEa,eAAe,CAAA;AAS1B,IAAA,WAAA,CAAY,IAA4B,EAAE,OAAO,GAAG,IAAI,EAAA;AANxD,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,IAAI,EAAE;AAOhB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;IACxB;IAEA,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE;;AAEvB,YAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;AAC3B,QAAA,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC;IAClB;IAEA,gBAAgB,GAAA;;AAEd,QAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5B,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;IAC3B;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBD;;;;;;;;;;;;;;AAcG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;QAGL,IAAA,CAAA,eAAe,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,GAAG,CAAC;IAclD;AAVE,IAAA,YAAY,CAAC,IAAU,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AACjE,QAAA,OAAOC,CAAI,CAAA,CAAA,0BAAA,EAA6B,WAAW,QAAQ;IAC7D;;AAfO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AALnB,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAiBjB;;;;"}