@vonage/vivid 5.15.1 → 5.16.0

package/side-drawer/index.js

@@ -1,98 +1,56 @@
-import { V as v, a as n, h as d, c as b, d as m } from "../bundled/vivid-element.js";
-import { h } from "../bundled/index.js";
-import { w as f } from "../bundled/when.js";
-import { c as p } from "../bundled/class-names.js";
-var u = Object.defineProperty, l = (o, e, r, i) => {
-  for (var t = void 0, s = o.length - 1, c; s >= 0; s--)
-    (c = o[s]) && (t = c(e, r, t) || t);
-  return t && u(e, r, t), t;
+import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { t as a } from "../bundled/when.js";
+import { t as o } from "../bundled/decorate.js";
+import { t as s } from "../bundled/class-names.js";
+import { t as c } from "../bundled/dialog.js";
+//#region src/lib/side-drawer/side-drawer.ts
+var l = class extends i {
+	constructor(...e) {
+		super(...e), this.alternate = !1, this.modal = !1, this.open = !1, this.trailing = !1;
+	}
+	attributeChangedCallback(e, t, n) {
+		switch (super.attributeChangedCallback(e, t, n), e) {
+			case "open": this.open ? this.#t() : this.#e();
+		}
+	}
+	#e() {
+		this.$emit("close", void 0, { bubbles: !1 });
+	}
+	#t() {
+		this.$emit("open", void 0, { bubbles: !1 });
+	}
+	_onKeydown(e) {
+		if (c(e)) {
+			this._handleCloseRequest();
+			return;
+		} else return !0;
+	}
+	_handleCloseRequest() {
+		this.$emit("cancel", void 0, {
+			bubbles: !1,
+			cancelable: !0
+		}) && (this.open = !1);
+	}
 };
-class a extends v {
-  constructor() {
-    super(...arguments), this.alternate = !1, this.modal = !1, this.open = !1, this.trailing = !1;
-  }
-  attributeChangedCallback(e, r, i) {
-    super.attributeChangedCallback(e, r, i), e === "open" && (this.open ? this.#e() : this.#o());
-  }
-  #o() {
-    this.$emit("close", void 0, { bubbles: !1 });
-  }
-  #e() {
-    this.$emit("open", void 0, { bubbles: !1 });
-  }
-  /**
-   * @internal
-   */
-  _onKeydown(e) {
-    if (h(e)) {
-      this._handleCloseRequest();
-      return;
-    } else
-      return !0;
-  }
-  /**
-   * @internal
-   */
-  _handleCloseRequest() {
-    this.$emit("cancel", void 0, {
-      bubbles: !1,
-      cancelable: !0
-    }) && (this.open = !1);
-  }
-}
-l([
-  n({
-    mode: "boolean"
-  })
-], a.prototype, "alternate");
-l([
-  n({
-    mode: "boolean"
-  })
-], a.prototype, "modal");
-l([
-  n({
-    mode: "boolean"
-  })
-], a.prototype, "open");
-l([
-  n({
-    mode: "boolean"
-  })
-], a.prototype, "trailing");
-const g = ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media(prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}", w = ({ modal: o, open: e, trailing: r }) => p(
-  "control",
-  ["modal", o],
-  ["open", e],
-  ["trailing", r]
-), k = ({ open: o }) => p("scrim", ["open", o]), y = d`
+//#endregion
+//#region src/lib/side-drawer/index.ts
+o([t({ mode: "boolean" })], l.prototype, "alternate", void 0), o([t({ mode: "boolean" })], l.prototype, "modal", void 0), o([t({ mode: "boolean" })], l.prototype, "open", void 0), o([t({ mode: "boolean" })], l.prototype, "trailing", void 0), r(n("side-drawer", l, e`
 	<div
-		class="${w}"
-		?inert="${(o) => !o.open}"
-		part="base ${(o) => o.alternate ? "vvd-theme-alternate" : ""}"
-		@keydown="${(o, e) => o._onKeydown(e.event)}"
+		class="${({ modal: e, open: t, trailing: n }) => s("control", ["modal", e], ["open", t], ["trailing", n])}"
+		?inert="${(e) => !e.open}"
+		part="base ${(e) => e.alternate ? "vvd-theme-alternate" : ""}"
+		@keydown="${(e, t) => e._onKeydown(t.event)}"
 	>
 		<slot></slot>
 	</div>
 
-	<div class="side-drawer-app-content" ?inert="${(o) => o.open && o.modal}">
+	<div class="side-drawer-app-content" ?inert="${(e) => e.open && e.modal}">
 		<slot name="app-content"></slot>
 	</div>
 
-	${f(
-  (o) => o.modal,
-  d`<div
-			class="${k}"
-			@click="${(o) => o._handleCloseRequest()}"
-		></div>`
-)}
-`, x = m(
-  "side-drawer",
-  a,
-  y,
-  [],
-  {
-    styles: g
-  }
-), C = b(x);
-C();
+	${a((e) => e.modal, e`<div
+			class="${({ open: e }) => s("scrim", ["open", e])}"
+			@click="${(e) => e._handleCloseRequest()}"
+		></div>`)}
+`, [], { styles: ":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset,280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset,280px)}@media (prefers-reduced-motion:no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}" }))();
+//#endregion

package/simple-color-picker/definition.cjs

@@ -1,225 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const popup_definition = require('../unbundled/definition5.cjs');
-const icon_definition = require('../icon/definition.cjs');
-const tooltip_definition = require('../tooltip/definition.cjs');
-const fastElement = require('@microsoft/fast-element');
-const anchored = require('../unbundled/anchored.cjs');
-const baseColorPicker = require('../unbundled/base-color-picker.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const index = require('../unbundled/index.cjs');
-
-const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class SimpleColorPicker extends anchored.Anchored(baseColorPicker.BaseColorPicker(vividElement.VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.placement = "top-start";
-    this.swatchesPerRow = 7;
-    /**
-     * @internal
-     */
-    this.#openedByKeyboard = false;
-    /**
-     * @internal
-     */
-    this.#openPopup = () => {
-      if (!this.open) {
-        this.#openedByKeyboard = false;
-        fastElement.Updates.enqueue(() => this.open = true);
-      }
-    };
-    /**
-     * @internal
-     */
-    this.#handleAnchorKeydown = (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        if (!this.open) {
-          this.#openedByKeyboard = true;
-          fastElement.Updates.enqueue(() => this.open = true);
-        }
-        event.preventDefault();
-      }
-    };
-    /**
-     * @internal
-     */
-    this._closeOnClickOutside = (e) => {
-      const clickedOutside = !this.contains(e.target);
-      const clickedOnAnchor = this._anchorEl?.contains(e.target);
-      if (clickedOutside || clickedOnAnchor) this.open = false;
-    };
-    /**
-     * @internal
-     */
-    this._closeOnEscape = (e) => {
-      if (e.key === "Escape") {
-        this.open = false;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  openChanged(_oldValue, newValue) {
-    this._updateListeners();
-    if (this._anchorEl) {
-      this.#updateAnchor(this._anchorEl);
-    }
-    if (newValue && this.isConnected) {
-      requestAnimationFrame(() => {
-        this._refreshCanvasColor();
-        if (this.#openedByKeyboard) {
-          const selectedIndex = this.swatches.findIndex(
-            (swatch) => swatch.value === this.value
-          );
-          const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
-          this._focusSwatchByIndex(targetIndex);
-        }
-        this.#openedByKeyboard = false;
-      });
-    }
-  }
-  /**
-   * @internal
-   */
-  _getRowLength() {
-    return this.swatchesPerRow;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._updateListeners();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._updateListeners();
-  }
-  /**
-   * @internal
-   */
-  _updateListeners() {
-    document.removeEventListener("click", this._closeOnClickOutside);
-    document.removeEventListener("keydown", this._closeOnEscape);
-    if (this.open && this.isConnected) {
-      document.addEventListener("click", this._closeOnClickOutside);
-      document.addEventListener("keydown", this._closeOnEscape);
-    }
-  }
-  /**
-   * @internal
-   */
-  _getFocusReturnEl() {
-    return this._anchorEl ?? null;
-  }
-  /**
-   * @internal
-   */
-  _anchorElChanged(oldValue, newValue) {
-    if (oldValue) this.#cleanupAnchor(oldValue);
-    if (newValue) this.#setupAnchor(newValue);
-  }
-  /**
-   * @internal
-   */
-  #updateAnchor(a) {
-    a.setAttribute("aria-expanded", this.open.toString());
-    a.setAttribute("data-expanded", this.open.toString());
-  }
-  /**
-   * @internal
-   */
-  #setupAnchor(a) {
-    this.#updateAnchor(a);
-    a.addEventListener("click", this.#openPopup, true);
-    a.addEventListener("keydown", this.#handleAnchorKeydown);
-    a.setAttribute("aria-haspopup", "true");
-  }
-  /**
-   * @internal
-   */
-  #cleanupAnchor(a) {
-    a.removeEventListener("click", this.#openPopup, true);
-    a.removeEventListener("keydown", this.#handleAnchorKeydown);
-    a.removeAttribute("aria-expanded");
-    a.removeAttribute("data-expanded");
-    a.removeAttribute("aria-haspopup");
-  }
-  #openedByKeyboard;
-  #openPopup;
-  #handleAnchorKeydown;
-}
-__decorateClass([
-  fastElement.attr({ mode: "fromView" })
-], SimpleColorPicker.prototype, "placement");
-__decorateClass([
-  fastElement.attr({
-    attribute: "swatches-per-row",
-    mode: "fromView",
-    converter: fastElement.nullableNumberConverter
-  })
-], SimpleColorPicker.prototype, "swatchesPerRow");
-
-const getClasses = (_) => fastWebUtilities.classNames("control");
-const SimpleColorPickerTemplate = (context) => {
-  const popupTag = context.tagFor(popup_definition.Popup);
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  const tooltipTag = context.tagFor(tooltip_definition.VwcTooltipElement);
-  const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
-  return fastElement.html`
-		${anchorSlotTemplate}
-		<${popupTag}
-			class="${getClasses}"
-			:anchor="${(x) => x._anchorEl}"
-			:open="${(x) => x.open}"
-			placement="${(x) => x.placement}"
-			offset="4"
-			@keydown="${(x, { event }) => {
-    if (x.open && index.handleEscapeKeyAndStopPropogation(event)) {
-      return false;
-    }
-    return true;
-  }}"
-		>
-			<div class="palette" role="grid" 
-				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x._getRowLength())}"
-				aria-colcount="${(x) => x._getRowLength()}"
-				style="--swatches-per-row: ${(x) => x._getRowLength()};"
-				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
-				${fastElement.repeat(
-    (x) => x.swatches,
-    (x) => x._renderColorSwatch(iconTag, tooltipTag),
-    { positioning: true }
-  )}
-			</div>
-		</${popupTag}>
-	`;
-};
-
-const simpleColorPickerDefinition = vividElement.defineVividComponent(
-  "simple-color-picker",
-  SimpleColorPicker,
-  SimpleColorPickerTemplate,
-  [popup_definition.popupDefinition, icon_definition.iconDefinition, tooltip_definition.tooltipDefinition],
-  {
-    styles
-  }
-);
-const registerSimpleColorPicker = vividElement.createRegisterFunction(
-  simpleColorPickerDefinition
-);
-
-exports.VwcSimpleColorPickerElement = SimpleColorPicker;
-exports.registerSimpleColorPicker = registerSimpleColorPicker;
-exports.simpleColorPickerDefinition = simpleColorPickerDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition62.cjs");
+exports.VwcSimpleColorPickerElement = require_definition$1.SimpleColorPicker;
+exports.registerSimpleColorPicker = require_definition$1.registerSimpleColorPicker;
+exports.simpleColorPickerDefinition = require_definition$1.simpleColorPickerDefinition;

package/simple-color-picker/definition.js

@@ -1,219 +1,3 @@
-import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/definition.js';
-import { Updates, attr, nullableNumberConverter, repeat, html } from '@microsoft/fast-element';
-import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';
-import { B as BaseColorPicker } from '../unbundled/base-color-picker.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
-
-const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class SimpleColorPicker extends Anchored(BaseColorPicker(VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.placement = "top-start";
-    this.swatchesPerRow = 7;
-    /**
-     * @internal
-     */
-    this.#openedByKeyboard = false;
-    /**
-     * @internal
-     */
-    this.#openPopup = () => {
-      if (!this.open) {
-        this.#openedByKeyboard = false;
-        Updates.enqueue(() => this.open = true);
-      }
-    };
-    /**
-     * @internal
-     */
-    this.#handleAnchorKeydown = (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        if (!this.open) {
-          this.#openedByKeyboard = true;
-          Updates.enqueue(() => this.open = true);
-        }
-        event.preventDefault();
-      }
-    };
-    /**
-     * @internal
-     */
-    this._closeOnClickOutside = (e) => {
-      const clickedOutside = !this.contains(e.target);
-      const clickedOnAnchor = this._anchorEl?.contains(e.target);
-      if (clickedOutside || clickedOnAnchor) this.open = false;
-    };
-    /**
-     * @internal
-     */
-    this._closeOnEscape = (e) => {
-      if (e.key === "Escape") {
-        this.open = false;
-      }
-    };
-  }
-  /**
-   * @internal
-   */
-  openChanged(_oldValue, newValue) {
-    this._updateListeners();
-    if (this._anchorEl) {
-      this.#updateAnchor(this._anchorEl);
-    }
-    if (newValue && this.isConnected) {
-      requestAnimationFrame(() => {
-        this._refreshCanvasColor();
-        if (this.#openedByKeyboard) {
-          const selectedIndex = this.swatches.findIndex(
-            (swatch) => swatch.value === this.value
-          );
-          const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
-          this._focusSwatchByIndex(targetIndex);
-        }
-        this.#openedByKeyboard = false;
-      });
-    }
-  }
-  /**
-   * @internal
-   */
-  _getRowLength() {
-    return this.swatchesPerRow;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._updateListeners();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._updateListeners();
-  }
-  /**
-   * @internal
-   */
-  _updateListeners() {
-    document.removeEventListener("click", this._closeOnClickOutside);
-    document.removeEventListener("keydown", this._closeOnEscape);
-    if (this.open && this.isConnected) {
-      document.addEventListener("click", this._closeOnClickOutside);
-      document.addEventListener("keydown", this._closeOnEscape);
-    }
-  }
-  /**
-   * @internal
-   */
-  _getFocusReturnEl() {
-    return this._anchorEl ?? null;
-  }
-  /**
-   * @internal
-   */
-  _anchorElChanged(oldValue, newValue) {
-    if (oldValue) this.#cleanupAnchor(oldValue);
-    if (newValue) this.#setupAnchor(newValue);
-  }
-  /**
-   * @internal
-   */
-  #updateAnchor(a) {
-    a.setAttribute("aria-expanded", this.open.toString());
-    a.setAttribute("data-expanded", this.open.toString());
-  }
-  /**
-   * @internal
-   */
-  #setupAnchor(a) {
-    this.#updateAnchor(a);
-    a.addEventListener("click", this.#openPopup, true);
-    a.addEventListener("keydown", this.#handleAnchorKeydown);
-    a.setAttribute("aria-haspopup", "true");
-  }
-  /**
-   * @internal
-   */
-  #cleanupAnchor(a) {
-    a.removeEventListener("click", this.#openPopup, true);
-    a.removeEventListener("keydown", this.#handleAnchorKeydown);
-    a.removeAttribute("aria-expanded");
-    a.removeAttribute("data-expanded");
-    a.removeAttribute("aria-haspopup");
-  }
-  #openedByKeyboard;
-  #openPopup;
-  #handleAnchorKeydown;
-}
-__decorateClass([
-  attr({ mode: "fromView" })
-], SimpleColorPicker.prototype, "placement");
-__decorateClass([
-  attr({
-    attribute: "swatches-per-row",
-    mode: "fromView",
-    converter: nullableNumberConverter
-  })
-], SimpleColorPicker.prototype, "swatchesPerRow");
-
-const getClasses = (_) => classNames("control");
-const SimpleColorPickerTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
-  const iconTag = context.tagFor(Icon);
-  const tooltipTag = context.tagFor(Tooltip);
-  const anchorSlotTemplate = anchorSlotTemplateFactory();
-  return html`
-		${anchorSlotTemplate}
-		<${popupTag}
-			class="${getClasses}"
-			:anchor="${(x) => x._anchorEl}"
-			:open="${(x) => x.open}"
-			placement="${(x) => x.placement}"
-			offset="4"
-			@keydown="${(x, { event }) => {
-    if (x.open && handleEscapeKeyAndStopPropogation(event)) {
-      return false;
-    }
-    return true;
-  }}"
-		>
-			<div class="palette" role="grid" 
-				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x._getRowLength())}"
-				aria-colcount="${(x) => x._getRowLength()}"
-				style="--swatches-per-row: ${(x) => x._getRowLength()};"
-				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
-				${repeat(
-    (x) => x.swatches,
-    (x) => x._renderColorSwatch(iconTag, tooltipTag),
-    { positioning: true }
-  )}
-			</div>
-		</${popupTag}>
-	`;
-};
-
-const simpleColorPickerDefinition = defineVividComponent(
-  "simple-color-picker",
-  SimpleColorPicker,
-  SimpleColorPickerTemplate,
-  [popupDefinition, iconDefinition, tooltipDefinition],
-  {
-    styles
-  }
-);
-const registerSimpleColorPicker = createRegisterFunction(
-  simpleColorPickerDefinition
-);
-
+import "../unbundled/definition2.js";
+import { n as simpleColorPickerDefinition, r as SimpleColorPicker, t as registerSimpleColorPicker } from "../unbundled/definition62.js";
 export { SimpleColorPicker as VwcSimpleColorPickerElement, registerSimpleColorPicker, simpleColorPickerDefinition };

package/simple-color-picker/index.cjs

@@ -1,19 +1,19 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),l=require("../bundled/definition9.cjs"),p=require("../bundled/definition2.cjs"),d=require("../bundled/definition11.cjs"),h=require("../bundled/anchored.cjs"),v=require("../bundled/base-color-picker.cjs"),f=require("../bundled/index.cjs"),m=require("../bundled/repeat.cjs"),g=require("../bundled/class-names.cjs"),w=".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";var _=Object.defineProperty,u=(i,e,o,n)=>{for(var s=void 0,t=i.length-1,a;t>=0;t--)(a=i[t])&&(s=a(e,o,s)||s);return s&&_(e,o,s),s};class c extends h.Anchored(v.BaseColorPicker(r.VividElement)){constructor(){super(...arguments),this.placement="top-start",this.swatchesPerRow=7,this.#e=!1,this.#t=()=>{this.open||(this.#e=!1,r.Updates.enqueue(()=>this.open=!0))},this.#o=e=>{(e.key==="Enter"||e.key===" ")&&(this.open||(this.#e=!0,r.Updates.enqueue(()=>this.open=!0)),e.preventDefault())},this._closeOnClickOutside=e=>{const o=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(o||n)&&(this.open=!1)},this._closeOnEscape=e=>{e.key==="Escape"&&(this.open=!1)}}openChanged(e,o){this._updateListeners(),this._anchorEl&&this.#s(this._anchorEl),o&&this.isConnected&&requestAnimationFrame(()=>{if(this._refreshCanvasColor(),this.#e){const n=this.swatches.findIndex(t=>t.value===this.value),s=n>=0?n:0;this._focusSwatchByIndex(s)}this.#e=!1})}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_updateListeners(){document.removeEventListener("click",this._closeOnClickOutside),document.removeEventListener("keydown",this._closeOnEscape),this.open&&this.isConnected&&(document.addEventListener("click",this._closeOnClickOutside),document.addEventListener("keydown",this._closeOnEscape))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,o){e&&this.#i(e),o&&this.#r(o)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){this.#s(e),e.addEventListener("click",this.#t,!0),e.addEventListener("keydown",this.#o),e.setAttribute("aria-haspopup","true")}#i(e){e.removeEventListener("click",this.#t,!0),e.removeEventListener("keydown",this.#o),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded"),e.removeAttribute("aria-haspopup")}#e;#t;#o}u([r.attr({mode:"fromView"})],c.prototype,"placement");u([r.attr({attribute:"swatches-per-row",mode:"fromView",converter:r.nullableNumberConverter})],c.prototype,"swatchesPerRow");const k=i=>g.classNames("control"),b=i=>{const e=i.tagFor(l.Popup),o=i.tagFor(p.Icon),n=i.tagFor(d.Tooltip),s=h.anchorSlotTemplateFactory();return r.html`
-		${s}
-		<${e}
-			class="${k}"
-			:anchor="${t=>t._anchorEl}"
-			:open="${t=>t.open}"
-			placement="${t=>t.placement}"
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/repeat.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dialog.cjs`),o=require(`../bundled/definition8.cjs`),s=require(`../bundled/anchored.cjs`),c=require(`../bundled/definition18.cjs`),l=require(`../bundled/base-color-picker.cjs`);var u=`.palette{grid-template-columns:repeat(var(--swatches-per-row,7), var(--_color-swatch-size,24px));display:grid}.swatch{background-color:var(--swatch-color);block-size:var(--_color-swatch-size,24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size,24px);border-radius:4px;padding:0;position:relative}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:none;outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--focus-inset:-3px}:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.palette{padding:var(--_color-palette-spacing,16px);gap:var(--_color-palette-gap,12px)}::part(popup-base){block-size:max-content;max-block-size:100vh;inline-size:max-content;max-inline-size:100vw;min-block-size:var(--_color-swatch-size,24px);min-inline-size:var(--_color-swatch-size,24px)}`,d=class extends s.t(l.t(e.t)){constructor(...e){super(...e),this.placement=`top-start`,this.swatchesPerRow=7,this._closeOnClickOutside=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this._closeOnEscape=e=>{e.key===`Escape`&&(this.open=!1)}}openChanged(e,t){this._updateListeners(),this._anchorEl&&this.#e(this._anchorEl),t&&this.isConnected&&requestAnimationFrame(()=>{if(this._refreshCanvasColor(),this.#r){let e=this.swatches.findIndex(e=>e.value===this.value),t=e>=0?e:0;this._focusSwatchByIndex(t)}this.#r=!1})}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_updateListeners(){document.removeEventListener(`click`,this._closeOnClickOutside),document.removeEventListener(`keydown`,this._closeOnEscape),this.open&&this.isConnected&&(document.addEventListener(`click`,this._closeOnClickOutside),document.addEventListener(`keydown`,this._closeOnEscape))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,t){e&&this.#n(e),t&&this.#t(t)}#e(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#t(e){this.#e(e),e.addEventListener(`click`,this.#i,!0),e.addEventListener(`keydown`,this.#a),e.setAttribute(`aria-haspopup`,`true`)}#n(e){e.removeEventListener(`click`,this.#i,!0),e.removeEventListener(`keydown`,this.#a),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.removeAttribute(`aria-haspopup`)}#r=!1;#i=()=>{this.open||(this.#r=!1,e.O.enqueue(()=>this.open=!0))};#a=t=>{(t.key===`Enter`||t.key===` `)&&(this.open||(this.#r=!0,e.O.enqueue(()=>this.open=!0)),t.preventDefault())}};r.t([e.l({mode:`fromView`})],d.prototype,`placement`,void 0),r.t([e.l({attribute:`swatches-per-row`,mode:`fromView`,converter:e.u})],d.prototype,`swatchesPerRow`,void 0);var f=e=>i.t(`control`),p=e.o(`simple-color-picker`,d,r=>{let i=r.tagFor(o.i),l=r.tagFor(n.r),u=r.tagFor(c.r);return e.d`
+		${s.n()}
+		<${i}
+			class="${f}"
+			:anchor="${e=>e._anchorEl}"
+			:open="${e=>e.open}"
+			placement="${e=>e.placement}"
 			offset="4"
-			@keydown="${(t,{event:a})=>!(t.open&&f.handleEscapeKeyAndStopPropogation(a))}"
+			@keydown="${(e,{event:t})=>!(e.open&&a.t(t))}"
 		>
 			<div class="palette" role="grid" 
-				aria-rowcount="${t=>Math.ceil(t.swatches.length/t._getRowLength())}"
-				aria-colcount="${t=>t._getRowLength()}"
-				style="--swatches-per-row: ${t=>t._getRowLength()};"
-				aria-label="${t=>t.locale.simpleColorPicker.colorPaletteLabel}">
-				${m.repeat(t=>t.swatches,t=>t._renderColorSwatch(o,n),{positioning:!0})}
+				aria-rowcount="${e=>Math.ceil(e.swatches.length/e._getRowLength())}"
+				aria-colcount="${e=>e._getRowLength()}"
+				style="--swatches-per-row: ${e=>e._getRowLength()};"
+				aria-label="${e=>e.locale.simpleColorPicker.colorPaletteLabel}">
+				${t.n(e=>e.swatches,e=>e._renderColorSwatch(l,u),{positioning:!0})}
 			</div>
-		</${e}>
-	`},x=r.defineVividComponent("simple-color-picker",c,b,[l.popupDefinition,p.iconDefinition,d.tooltipDefinition],{styles:w}),C=r.createRegisterFunction(x);C();
+		</${i}>
+	`},[o.t,n.t,c.n],{styles:u});e.s(p)();