@mcp-b/wc-support 0.2.0

package/dist/styles/form-control.styles.js

@@ -0,0 +1,337 @@
+import { css } from "lit";
+/**
+ * Shared label, description, and text box styles for use with form controls.
+ *
+ * Text box components must render the following elements in this order: `#label`, `#description`, `#visual-box`, and
+ * `#text-box` (which must be a child of `#visual-box`). See the template in `<sigvelo-text-area>` for an example.
+ */
+export default css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 0.25em;
+    line-height: 1.25;
+  }
+
+  /* Sizes */
+  :host([size="xs"]) {
+    font-size: var(--sigvelo-control-text-xs);
+  }
+
+  :host([size="sm"]) {
+    font-size: var(--sigvelo-control-text-sm);
+  }
+
+  :host([size="md"]) {
+    font-size: var(--sigvelo-control-text-md);
+  }
+
+  :host([size="lg"]) {
+    font-size: var(--sigvelo-control-text-lg);
+  }
+
+  :host([size="xl"]) {
+    font-size: var(--sigvelo-control-text-xl);
+  }
+
+  #label {
+    display: inline-block;
+    max-width: fit-content;
+    font-weight: var(--sigvelo-font-weight-semibold);
+
+    &:has(~ .disabled) {
+      cursor: not-allowed;
+      color: var(--sigvelo-color-text-muted);
+    }
+  }
+
+  :host([required]) #label::after {
+    margin-inline-start: -0.2em;
+    content: "*";
+  }
+
+  #description {
+    margin-block-end: 0.25em;
+    color: var(--sigvelo-color-text-muted);
+    font-size: 0.875em;
+  }
+
+  #visual-box {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: 0.5em;
+    font: inherit;
+    cursor: text;
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    &:has(#text-box[type="color"]) {
+      padding: 0 0.25em;
+    }
+
+    /* When an autofill value is present, set the background color of the entire visual box, not just the input */
+    &:has(:autofill),
+    &:has(:-webkit-autofill) {
+      background-color: var(--sigvelo-color-primary-bg-subtle);
+    }
+  }
+
+  #text-box {
+    appearance: none;
+    width: 100%;
+    margin: auto 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--sigvelo-color-text);
+    font: inherit;
+    cursor: inherit;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--sigvelo-control-placeholder-color);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    /* Override Safari's autofill background color so the visual box styles show through when autofill values exist */
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-background-clip: text;
+      background-color: transparent;
+      -webkit-text-fill-color: inherit;
+    }
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      -webkit-appearance: none;
+    }
+
+    /* Hide the datalist arrow */
+    &::-webkit-calendar-picker-indicator {
+      display: none !important;
+    }
+
+    /* Color inputs */
+    &[type="color"] {
+      &::-webkit-color-swatch-wrapper {
+        padding: 0.25em 0;
+      }
+
+      &::-webkit-color-swatch {
+        border: none;
+        border-radius: var(--sigvelo-radius-sm);
+      }
+
+      &::-moz-color-swatch,
+      &::-moz-focus-inner {
+        height: calc(100% - 0.5em);
+        padding: 0;
+        border-radius: var(--sigvelo-radius-sm);
+      }
+
+      &:-moz-focus-inner {
+        padding: 0;
+      }
+    }
+
+    /* Number inputs */
+    &[type="number"]::-webkit-inner-spin-button {
+      width: 1em;
+      height: 2em;
+    }
+
+    /* Date / time */
+    &::-webkit-datetime-edit-year-field:focus,
+    &::-webkit-datetime-edit-month-field:focus,
+    &::-webkit-datetime-edit-week-field:focus,
+    &::-webkit-datetime-edit-day-field:focus,
+    &::-webkit-datetime-edit-ampm-field:focus, /* Chrome */
+    &::-webkit-datetime-edit-meridiem-field:focus, /* Safari */
+    &::-webkit-datetime-edit-hour-field:focus,
+    &::-webkit-datetime-edit-millisecond-field:focus,
+    &::-webkit-datetime-edit-minute-field:focus,
+    &::-webkit-datetime-edit-second-field:focus {
+      outline: none;
+      background-color: var(--sigvelo-color-selection-bg);
+      color: var(--sigvelo-color-selection-text);
+    }
+
+    &[type="date"],
+    &[type="datetime-local"],
+    &[type="month"],
+    &[type="time"],
+    &[type="week"] {
+      display: inline-flex;
+      appearance: none;
+      align-items: center;
+      width: 100%;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' style='color: %2382848d;'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z' /%3E%3Cpath d='M16 3v4' /%3E%3Cpath d='M8 3v4' /%3E%3Cpath d='M4 11h16' /%3E%3Cpath d='M11 15h1' /%3E%3Cpath d='M12 15v3' /%3E%3C/svg%3E");
+      background-position: 100% center;
+      background-size: 1.25em;
+      background-repeat: no-repeat;
+
+      &::-webkit-calendar-picker-indicator {
+        display: none;
+      }
+
+      &::-webkit-date-and-time-value {
+        text-align: start;
+      }
+    }
+
+    &[type="time"] {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' style='color: %2382848d;'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M12 12l3 2' /%3E%3Cpath d='M12 7v5' /%3E%3C/svg%3E");
+    }
+  }
+
+  /* We can't hide Firefox's calendar icon, so we'll hide our own instead. */
+  @-moz-document url-prefix() {
+    input[type="date"],
+    input[type="datetime-local"],
+    input[type="month"],
+    input[type="week"] {
+      background-image: none !important;
+    }
+  }
+
+  /* Normal */
+  #visual-box.normal {
+    padding: 0 0.75em;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-muted);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    color: var(--sigvelo-color-text);
+
+    &:has(#text-box:focus-visible) {
+      outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+        var(--sigvelo-color-focus);
+      outline-offset: calc(-1 * var(--sigvelo-border-width));
+    }
+  }
+
+  /* Filled */
+  #visual-box.filled {
+    padding: 0 0.75em;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-bg-subtle);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+
+    &:has(#text-box:focus-visible) {
+      outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+        var(--sigvelo-color-focus);
+      outline-offset: calc(-1 * var(--sigvelo-border-width));
+    }
+  }
+
+  /* Sizes */
+  #visual-box.xs {
+    font-size: var(--sigvelo-control-text-xs);
+
+    #text-box {
+      min-height: calc(var(--sigvelo-control-height-xs) - var(--sigvelo-border-width) * 2);
+    }
+  }
+
+  #visual-box.sm {
+    font-size: var(--sigvelo-control-text-sm);
+
+    #text-box {
+      min-height: calc(var(--sigvelo-control-height-sm) - var(--sigvelo-border-width) * 2);
+    }
+  }
+
+  #visual-box.md {
+    font-size: var(--sigvelo-control-text-md);
+
+    #text-box {
+      min-height: calc(var(--sigvelo-control-height-md) - var(--sigvelo-border-width) * 2);
+    }
+  }
+
+  #visual-box.lg {
+    font-size: var(--sigvelo-control-text-lg);
+
+    #text-box {
+      min-height: calc(var(--sigvelo-control-height-lg) - var(--sigvelo-border-width) * 2);
+    }
+  }
+
+  #visual-box.xl {
+    font-size: var(--sigvelo-control-text-xl);
+
+    #text-box {
+      min-height: calc(var(--sigvelo-control-height-xl) - var(--sigvelo-border-width) * 2);
+    }
+  }
+
+  /* Pills */
+  #visual-box.pill {
+    padding: 0 1.25em;
+    border-radius: var(--sigvelo-radius-full);
+
+    &::-webkit-color-swatch {
+      border-radius: var(--sigvelo-radius-full);
+    }
+
+    &::-moz-color-swatch,
+    &::-moz-focus-inner {
+      border-radius: var(--sigvelo-radius-full);
+    }
+  }
+
+  .text-box-button {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    padding-inline: 0.25em;
+    border: none;
+    background: none;
+    color: var(--sigvelo-color-text-muted);
+    font: inherit;
+    font-size: 1.25em;
+    cursor: pointer;
+    transition: var(--sigvelo-motion-duration-interaction) translate ease;
+
+    &:active {
+      translate: 0 1px;
+    }
+  }
+
+  /* Icons */
+  slot[name="start"]::slotted(*),
+  slot[name="end"]::slotted(*) {
+    color: var(--sigvelo-color-text-muted) !important;
+  }
+
+  slot[name="start"]::slotted(sigvelo-icon),
+  slot[name="end"]::slotted(sigvelo-icon) {
+    font-size: 1.25em !important;
+    pointer-events: none;
+  }
+
+  slot[name="start"]::slotted(svg),
+  slot[name="end"]::slotted(svg) {
+    width: 1.25em;
+    height: 1.25em;
+    pointer-events: none;
+  }
+`;
+//# sourceMappingURL=form-control.styles.js.map

package/dist/styles/form-control.styles.js.map

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

package/dist/styles/host.styles.d.ts

@@ -0,0 +1,4 @@
+/** Styles that should get applied to every component. */
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=host.styles.d.ts.map

package/dist/styles/host.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.styles.d.ts","sourceRoot":"","sources":["../../src/styles/host.styles.ts"],"names":[],"mappings":"AAEA,yDAAyD;;AACzD,wBA6BE"}

package/dist/styles/host.styles.js

@@ -0,0 +1,33 @@
+import { css } from "lit";
+/** Styles that should get applied to every component. */
+export default css `
+  :host {
+    box-sizing: border-box !important;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: border-box !important;
+  }
+
+  ::selection {
+    background-color: var(--sigvelo-color-selection-bg);
+    color: var(--sigvelo-color-selection-text);
+    text-shadow: none !important;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .vh {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+`;
+//# sourceMappingURL=host.styles.js.map

package/dist/styles/host.styles.js.map

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

package/dist/utilities/active-element.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generator that yields all active elements in the DOM tree, traversing through open shadow DOM boundaries. The last
+ * element returned is the "deepest" active element. To fetch the deepest active element, use
+ * `[...activeElements()].pop()`.
+ */
+export declare function activeElements(activeElement?: Element | null): Generator<Element>;
+//# sourceMappingURL=active-element.d.ts.map

package/dist/utilities/active-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-element.d.ts","sourceRoot":"","sources":["../../src/utilities/active-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAiB,cAAc,CAC7B,aAAa,GAAE,OAAO,GAAG,IAA6B,GACrD,SAAS,CAAC,OAAO,CAAC,CAYpB"}

package/dist/utilities/active-element.js

@@ -0,0 +1,16 @@
+/**
+ * Generator that yields all active elements in the DOM tree, traversing through open shadow DOM boundaries. The last
+ * element returned is the "deepest" active element. To fetch the deepest active element, use
+ * `[...activeElements()].pop()`.
+ */
+export function* activeElements(activeElement = document.activeElement) {
+    if (activeElement === null || activeElement === undefined)
+        return;
+    yield activeElement;
+    if ("shadowRoot" in activeElement &&
+        activeElement.shadowRoot &&
+        activeElement.shadowRoot.mode !== "closed") {
+        yield* activeElements(activeElement.shadowRoot.activeElement);
+    }
+}
+//# sourceMappingURL=active-element.js.map

package/dist/utilities/active-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-element.js","sourceRoot":"","sources":["../../src/utilities/active-element.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,SAAS,CAAC,CAAC,cAAc,CAC7B,gBAAgC,QAAQ,CAAC,aAAa;IAEtD,IAAI,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO;IAElE,MAAM,aAAa,CAAC;IAEpB,IACE,YAAY,IAAI,aAAa;QAC7B,aAAa,CAAC,UAAU;QACxB,aAAa,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAC1C,CAAC;QACD,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAChE,CAAC;AACH,CAAC"}

package/dist/utilities/animate.d.ts

@@ -0,0 +1,25 @@
+/** A single direction (enter or exit) of a transition animation. */
+export interface TransitionKeyframes {
+    /** Web Animations API keyframes. */
+    keyframes: Keyframe[];
+    /** CSS easing function, e.g. `cubic-bezier(0.33, 1, 0.68, 1)`. */
+    easing: string;
+}
+/** Enter/exit animation pair for use with the Web Animations API. */
+export interface TransitionAnimation {
+    /** Animation applied when an element enters. */
+    enter: TransitionKeyframes;
+    /** Animation applied when an element exits. */
+    exit: TransitionKeyframes;
+}
+/**
+ * Applies a class to the specified element to animate it. The class is removed after the animation finishes or is
+ * canceled, then the promise resolves. If applying the class doesn't trigger an animation, the promise resolves
+ * immediately.
+ */
+export declare function animateWithClass(el: Element, className: string): Promise<void>;
+/** Determines if two DOMRect objects have different positions. */
+export declare function hasDomRectMoved(oldPosition: DOMRect, newPosition: DOMRect): boolean;
+/** Parses a CSS duration string and returns the corresponding number of milliseconds. */
+export declare function parseCssDuration(duration: string): number;
+//# sourceMappingURL=animate.d.ts.map

package/dist/utilities/animate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../src/utilities/animate.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,kEAAkE;IAClE,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qEAAqE;AACrE,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,KAAK,EAAE,mBAAmB,CAAC;IAC3B,+CAA+C;IAC/C,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAsB9E;AAED,kEAAkE;AAClE,wBAAgB,eAAe,CAAC,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,WAQzE;AAED,yFAAyF;AACzF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAwBzD"}

package/dist/utilities/animate.js

@@ -0,0 +1,58 @@
+/**
+ * Applies a class to the specified element to animate it. The class is removed after the animation finishes or is
+ * canceled, then the promise resolves. If applying the class doesn't trigger an animation, the promise resolves
+ * immediately.
+ */
+export function animateWithClass(el, className) {
+    return new Promise((resolve) => {
+        const handleFinish = () => {
+            el.removeEventListener("animationend", handleFinish);
+            el.removeEventListener("animationcancel", handleFinish);
+            el.classList.remove(className);
+            resolve();
+        };
+        el.classList.add(className);
+        queueMicrotask(() => {
+            if (el.getAnimations().length === 0) {
+                el.classList.remove(className);
+                resolve();
+                return;
+            }
+            el.addEventListener("animationend", handleFinish);
+            el.addEventListener("animationcancel", handleFinish);
+        });
+    });
+}
+/** Determines if two DOMRect objects have different positions. */
+export function hasDomRectMoved(oldPosition, newPosition) {
+    if (!oldPosition)
+        return true;
+    return (oldPosition.top !== newPosition.top ||
+        oldPosition.left !== newPosition.left ||
+        oldPosition.width !== newPosition.width ||
+        oldPosition.height !== newPosition.height);
+}
+/** Parses a CSS duration string and returns the corresponding number of milliseconds. */
+export function parseCssDuration(duration) {
+    // Handle empty or invalid input
+    if (!duration || typeof duration !== "string") {
+        return 0;
+    }
+    // Match number and unit
+    const match = duration.match(/^([0-9]*\.?[0-9]+)(ms|s)$/);
+    if (!match) {
+        return 0;
+    }
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    // Convert to milliseconds based on unit
+    switch (unit) {
+        case "ms":
+            return value;
+        case "s":
+            return value * 1000;
+        default:
+            return 0;
+    }
+}
+//# sourceMappingURL=animate.js.map

package/dist/utilities/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.js","sourceRoot":"","sources":["../../src/utilities/animate.ts"],"names":[],"mappings":"AAgBA;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAW,EAAE,SAAiB;IAC7D,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,EAAE,CAAC,mBAAmB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YACrD,EAAE,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;YACxD,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAC/B,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;QAEF,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAE5B,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,EAAE,CAAC,aAAa,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACpC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC/B,OAAO,EAAE,CAAC;gBACV,OAAO;YACT,CAAC;YAED,EAAE,CAAC,gBAAgB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YAClD,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC;AAED,kEAAkE;AAClE,MAAM,UAAU,eAAe,CAAC,WAAoB,EAAE,WAAoB;IACxE,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,CAAC;IAC9B,OAAO,CACL,WAAW,CAAC,GAAG,KAAK,WAAW,CAAC,GAAG;QACnC,WAAW,CAAC,IAAI,KAAK,WAAW,CAAC,IAAI;QACrC,WAAW,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK;QACvC,WAAW,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,CAC1C,CAAC;AACJ,CAAC;AAED,yFAAyF;AACzF,MAAM,UAAU,gBAAgB,CAAC,QAAgB;IAC/C,gCAAgC;IAChC,IAAI,CAAC,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QAC9C,OAAO,CAAC,CAAC;IACX,CAAC;IAED,wBAAwB;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IAC1D,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,CAAC,CAAC;IACX,CAAC;IAED,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAEtB,wCAAwC;IACxC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;QACf,KAAK,GAAG;YACN,OAAO,KAAK,GAAG,IAAI,CAAC;QACtB;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC"}

package/dist/utilities/defined.d.ts

@@ -0,0 +1,37 @@
+interface AllDefinedOptions {
+    /**
+     * A callback that accepts a custom element tag name and returns `true` if the custom element should be defined before
+     * resolving or `false` to skip it. The tag name is always in lowercase.
+     */
+    match: (tagName: string) => boolean;
+    /**
+     * To wait for additional custom elements that may not be on the page when the function is called, provide them here.
+     */
+    additionalElements: string | string[];
+    /**
+     * The root in which to look for custom elements. Defaults to `document`. By design, shadow roots are not traversed,
+     * but you can call this function and set `root` to a custom element's shadow root if needed.
+     */
+    root: Document | ShadowRoot;
+}
+/**
+ * Waits for custom elements that are currently on the page to be registered before resolving. This is sugar for
+ * awaiting `customElements.whenDefined()` multiple times. By default, the function waits for all undefined Sigvelo
+ * elements, but you can pass a custom match function to wait for other custom elements instead.
+ *
+ * The function returns with `Promise.all()`, so any loading errors will cause it to reject. Make sure you handle errors
+ * accordingly using a try/catch block or a `.catch()`.
+ *
+ * @example
+ * // Wait for Sigvelo elements
+ * await allDefined();
+ *
+ * // Wait for all custom elements that start with `foo-` as well as the `<bar-button>` element
+ * await allDefined({
+ *   match: tagName => tagName.startsWith('foo-'),
+ *   additionalElements: ['bar-button', 'baz-dialog']
+ * });
+ */
+export declare function allDefined(options?: Partial<AllDefinedOptions>): Promise<void>;
+export {};
+//# sourceMappingURL=defined.d.ts.map

package/dist/utilities/defined.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defined.d.ts","sourceRoot":"","sources":["../../src/utilities/defined.ts"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB;;;OAGG;IACH,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAEpC;;OAEG;IACH,kBAAkB,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEtC;;;OAGG;IACH,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,iBA0BpE"}

package/dist/utilities/defined.js

@@ -0,0 +1,42 @@
+import { isDesignSystemTag } from "../prefix.js";
+/**
+ * Waits for custom elements that are currently on the page to be registered before resolving. This is sugar for
+ * awaiting `customElements.whenDefined()` multiple times. By default, the function waits for all undefined Sigvelo
+ * elements, but you can pass a custom match function to wait for other custom elements instead.
+ *
+ * The function returns with `Promise.all()`, so any loading errors will cause it to reject. Make sure you handle errors
+ * accordingly using a try/catch block or a `.catch()`.
+ *
+ * @example
+ * // Wait for Sigvelo elements
+ * await allDefined();
+ *
+ * // Wait for all custom elements that start with `foo-` as well as the `<bar-button>` element
+ * await allDefined({
+ *   match: tagName => tagName.startsWith('foo-'),
+ *   additionalElements: ['bar-button', 'baz-dialog']
+ * });
+ */
+export async function allDefined(options) {
+    const opts = {
+        match: (tagName) => isDesignSystemTag(tagName),
+        additionalElements: [],
+        root: document,
+        ...options,
+    };
+    // Ensure additional elements is an array
+    const additionalElements = Array.isArray(opts.additionalElements)
+        ? opts.additionalElements
+        : [opts.additionalElements];
+    // Discover undefined elements in the document
+    const undefinedElements = [...opts.root.querySelectorAll(":not(:defined)")]
+        .map((el) => el.localName)
+        .filter((tag, index, arr) => arr.indexOf(tag) === index) // make it unique
+        .filter((tag) => opts.match(tag)); // make sure it matches
+    const tagsToAwait = [...undefinedElements, ...additionalElements];
+    // Wait for all to be registered
+    await Promise.all(tagsToAwait.map((tag) => customElements.whenDefined(tag)));
+    // Wait a cycle for the first update
+    await new Promise(requestAnimationFrame);
+}
+//# sourceMappingURL=defined.js.map

package/dist/utilities/defined.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defined.js","sourceRoot":"","sources":["../../src/utilities/defined.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAqBjD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,OAAoC;IACnE,MAAM,IAAI,GAAsB;QAC9B,KAAK,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC;QAC9C,kBAAkB,EAAE,EAAE;QACtB,IAAI,EAAE,QAAQ;QACd,GAAG,OAAO;KACX,CAAC;IAEF,yCAAyC;IACzC,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAC/D,CAAC,CAAC,IAAI,CAAC,kBAAkB;QACzB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAE9B,8CAA8C;IAC9C,MAAM,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;SACxE,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC;SACzB,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,iBAAiB;SACzE,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,uBAAuB;IAE5D,MAAM,WAAW,GAAG,CAAC,GAAG,iBAAiB,EAAE,GAAG,kBAAkB,CAAC,CAAC;IAElE,gCAAgC;IAChC,MAAM,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAE7E,oCAAoC;IACpC,MAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAC3C,CAAC"}

package/dist/utilities/drag.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Attaches the necessary events to make an element draggable.
+ *
+ * This by itself will not make the element draggable, but it provides the events and callbacks necessary to facilitate
+ * dragging. Use the `clientX` and `clientY` arguments of each callback to update the UI as desired when dragging.
+ *
+ * Drag functionality will be enabled as soon as the constructor is called. A `start()` and `stop()` method can be used
+ * to start and stop it, if needed.
+ *
+ * Note: to prevent undesired scrolling while dragging on touch devices, use `touch-action: none` in the component's
+ * styles instead of preventing the `pointerdown` event.
+ *
+ * @usage
+ *
+ * const draggable = new DraggableElement(element, {
+ *   start: (clientX, clientY) => { ... },
+ *   move: (clientX, clientY) => { ... },
+ *   stop: (clientX, clientY) => { ... }
+ * });
+ */
+export declare class DraggableElement {
+    private element;
+    private isActive;
+    private isDragging;
+    private options;
+    constructor(el: Element, options: Partial<DraggableElementOptions>);
+    private handleDragStart;
+    private handleDragStop;
+    private handleDragMove;
+    /** Start listening to drags. */
+    start(): void;
+    /** Stop listening to drags. */
+    stop(): void;
+    /** Starts or stops the drag listeners. */
+    toggle(isActive?: boolean): void;
+}
+export interface DraggableElementOptions {
+    /** Runs when dragging starts. */
+    start: (clientX: number, clientY: number) => void;
+    /** Runs as the user is dragging. This may execute often, so avoid expensive operations. */
+    move: (clientX: number, clientY: number) => void;
+    /** Runs when dragging ends. */
+    stop: (clientX: number, clientY: number) => void;
+}
+//# sourceMappingURL=drag.d.ts.map

package/dist/utilities/drag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../src/utilities/drag.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,OAAO,CAA0B;gBAE7B,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,uBAAuB,CAAC;IAYlE,OAAO,CAAC,eAAe,CAwBrB;IAEF,OAAO,CAAC,cAAc,CAapB;IAEF,OAAO,CAAC,cAAc,CAQpB;IAEF,gCAAgC;IACzB,KAAK;IAWZ,+BAA+B;IACxB,IAAI;IAaX,0CAA0C;IACnC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO;CASjC;AAED,MAAM,WAAW,uBAAuB;IACtC,iCAAiC;IACjC,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,+BAA+B;IAC/B,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD"}