@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/toast-notification-layout/toast-notification-layout.element.js

@@ -0,0 +1,71 @@
+import { LitElement, html, css } from "lit";
+import { property, state } from "lit/decorators.js";
+import { UUITextStyles } from "../../styles/uui-text.styles.js";
+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;
+};
+const _UUIToastNotificationLayoutElement = class _UUIToastNotificationLayoutElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.headline = "";
+    this._headlineSlotHasContent = false;
+    this._headlineSlotChanged = (e) => {
+      this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+    };
+  }
+  render() {
+    return html`
+      <div id="message" class="uui-text">
+        <h5
+          style=${this._headlineSlotHasContent || this.headline && this.headline !== "" ? "" : "display: none"}>
+          ${this.headline}
+          <slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
+        </h5>
+        <slot></slot>
+        <slot id="actions" name="actions"></slot>
+      </div>
+    `;
+  }
+};
+_UUIToastNotificationLayoutElement.styles = [
+  UUITextStyles,
+  css`
+      #message {
+        margin-bottom: calc(var(--uui-size-space-1) * -1);
+      }
+      #message::after {
+        content: '';
+        display: block;
+        clear: both;
+      }
+      #actions {
+        /*
+        display: flex;
+        width: 100%;
+        justify-content: flex-end;
+        */
+        display: block;
+        float: right;
+
+        margin-top: var(--uui-size-space-4);
+        margin-bottom: calc(var(--uui-size-space-2) * -1);
+      }
+    `
+];
+let UUIToastNotificationLayoutElement = _UUIToastNotificationLayoutElement;
+__decorateClass([
+  property({ type: String })
+], UUIToastNotificationLayoutElement.prototype, "headline");
+__decorateClass([
+  state()
+], UUIToastNotificationLayoutElement.prototype, "_headlineSlotHasContent");
+export {
+  UUIToastNotificationLayoutElement
+};
+//# sourceMappingURL=toast-notification-layout.element.js.map

package/dist/components/toast-notification-layout/toast-notification-layout.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification-layout.element.js","sources":["../../../src/components/toast-notification-layout/toast-notification-layout.element.ts"],"sourcesContent":["import { UUITextStyles } from '../../styles/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\n/**\n *  @element uui-toast-notification-layout\n *  @description - Component for setting the layout for a toast notification, to be used within toast-notification.\n *  @slot - for content\n *  @slot headline - for headline\n *  @slot actions - for actions\n */\nexport class UUIToastNotificationLayoutElement extends LitElement {\n  /**\n   * Headline for this notification, can also be set via the 'headline' slot.\n   * @attr\n   * @default\n   */\n  @property({ type: String })\n  headline: string = '';\n\n  @state()\n  private _headlineSlotHasContent = false;\n\n  private readonly _headlineSlotChanged = (e: Event) => {\n    this._headlineSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    return html`\n      <div id=\"message\" class=\"uui-text\">\n        <h5\n          style=${this._headlineSlotHasContent ||\n          (this.headline && this.headline !== '')\n            ? ''\n            : 'display: none'}>\n          ${this.headline}\n          <slot name=\"headline\" @slotchange=${this._headlineSlotChanged}></slot>\n        </h5>\n        <slot></slot>\n        <slot id=\"actions\" name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      #message {\n        margin-bottom: calc(var(--uui-size-space-1) * -1);\n      }\n      #message::after {\n        content: '';\n        display: block;\n        clear: both;\n      }\n      #actions {\n        /*\n        display: flex;\n        width: 100%;\n        justify-content: flex-end;\n        */\n        display: block;\n        float: right;\n\n        margin-top: var(--uui-size-space-4);\n        margin-bottom: calc(var(--uui-size-space-2) * -1);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAWO,MAAM,qCAAN,MAAM,2CAA0C,WAAW;AAAA,EAA3D,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,WAAmB;AAGnB,SAAQ,0BAA0B;AAElC,SAAiB,uBAAuB,CAAC,MAAa;AACpD,WAAK,0BACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS;AAAA,IAC5E;AAAA,EAAA;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,kBAGO,KAAK,2BACZ,KAAK,YAAY,KAAK,aAAa,KAChC,KACA,eAAe;AAAA,YACjB,KAAK,QAAQ;AAAA,8CACqB,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrE;AA2BF;AAzBE,mCAAyB,SAAS;AAAA,EAChC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApCG,IAAM,oCAAN;AAOL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,kCAOX,WAAA,UAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GATI,kCAUH,WAAA,yBAAA;"}

package/dist/components/toast-notification-layout/toast-notification-layout.js

@@ -0,0 +1,11 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIToastNotificationLayoutElement } from "./toast-notification-layout.element.js";
+defineElement(
+  "uui-toast-notification-layout",
+  UUIToastNotificationLayoutElement
+);
+export {
+  UUIToastNotificationLayoutElement,
+  UUIToastNotificationLayoutElement as default
+};
+//# sourceMappingURL=toast-notification-layout.js.map

package/dist/components/toast-notification-layout/toast-notification-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification-layout.js","sources":["../../../src/components/toast-notification-layout/toast-notification-layout.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIToastNotificationLayoutElement } from './toast-notification-layout.element.js';\n\ndefineElement(\n  'uui-toast-notification-layout',\n  UUIToastNotificationLayoutElement,\n);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-toast-notification-layout': UUIToastNotificationLayoutElement;\n  }\n}\n\nexport * from './toast-notification-layout.element.js';\nexport { UUIToastNotificationLayoutElement as default } from './toast-notification-layout.element.js';\n"],"names":[],"mappings":";;AAGA;AAAA,EACE;AAAA,EACA;AACF;"}

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,8 @@
+import { UUIToggleElement } from './toggle.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-toggle': UUIToggleElement;
+    }
+}
+export * from './toggle.element.js';
+export { UUIToggleElement as default } from './toggle.element.js';

package/dist/components/toggle/toggle.element.d.ts

@@ -0,0 +1,25 @@
+import { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';
+/**
+ *  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.
+ *  @element uui-toggle
+ *  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action
+ *  @cssprop --uui-toggle-size - Define the toggle size.
+ *  @cssprop --uui-toggle-switch-width - Define the slider width.
+ *  @cssprop --uui-toggle-background-color - Set the toggle background color
+ *  @cssprop --uui-toggle-border-color - Set the toggle border color
+ *  @cssprop --uui-toggle-border-color-hover - Set the toggle background color when hovered
+ *  @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered
+ *  @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused
+ *  @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused
+ *  @extends UUIBooleanInputElement
+ */
+export declare class UUIToggleElement extends UUIBooleanInputElement {
+    /**
+     * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/
+     * @type {boolean}
+     */
+    static readonly formAssociated = true;
+    constructor();
+    renderCheckbox(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/toggle/toggle.element.js

@@ -0,0 +1,181 @@
+import { UUIBooleanInputElement } from "../boolean-input/boolean-input.element.js";
+import "../boolean-input/UUIBooleanInputEvent.js";
+import { html, css } from "lit";
+import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
+import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
+import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
+const _UUIToggleElement = class _UUIToggleElement extends UUIBooleanInputElement {
+  constructor() {
+    super("switch");
+  }
+  renderCheckbox() {
+    return html`
+      <div id="toggle">
+        <div id="icon-checked">${iconCheck}</div>
+        <div id="icon-unchecked">${iconRemove}</div>
+      </div>
+    `;
+  }
+};
+_UUIToggleElement.formAssociated = true;
+_UUIToggleElement.styles = [
+  ...UUIBooleanInputElement.styles,
+  UUIHorizontalShakeKeyframes,
+  css`
+      :host {
+        --uui-toggle-size: 18px;
+        --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));
+      }
+
+      #toggle {
+        position: relative;
+        grid-area: 'input';
+        display: flex;
+        align-items: center;
+
+        flex-shrink: 0;
+
+        width: var(--uui-toggle-switch-width);
+        height: var(--uui-toggle-size);
+        border-radius: 100px;
+
+        background-color: var(
+          --uui-toggle-background-color,
+          var(--uui-color-border)
+        );
+        border: 1px solid
+          var(--uui-toggle-border-color, var(--uui-color-border-standalone));
+        font-size: calc(var(--uui-toggle-size) * 0.6);
+      }
+
+      label:hover input:not([disabled]) ~ #toggle {
+        border-color: var(
+          --uui-toggle-border-color-hover,
+          var(--uui-color-border-emphasis)
+        );
+        background-color: var(
+          --uui-toggle-background-color-hover,
+          var(--uui-color-border)
+        );
+      }
+
+      label:focus #toggle {
+        border-color: var(
+          --uui-toggle-border-color-focus,
+          var(--uui-color-focus)
+        );
+        background-color: var(
+          --uui-toggle-background-color-focus,
+          var(--uui-color-surface-emphasis)
+        );
+      }
+
+      input:checked ~ #toggle {
+        background-color: var(--uui-color-selected);
+      }
+      input:checked ~ #toggle::after {
+        border-color: var(--uui-color-selected-standalone);
+      }
+
+      label:hover input:checked:not([disabled]) ~ #toggle {
+        background-color: var(--uui-color-selected-emphasis);
+      }
+
+      label:focus input:checked ~ #toggle {
+        background-color: var(--uui-color-selected-emphasis);
+      }
+
+      #icon-checked,
+      #icon-unchecked {
+        position: absolute;
+        vertical-align: middle;
+        width: 1em;
+        height: 1em;
+        line-height: 0;
+        transition: color 120ms;
+        svg {
+          stroke-width: 2.5;
+        }
+      }
+
+      #icon-checked {
+        margin-left: -0.45em;
+        left: calc((var(--uui-toggle-size) + 1px) * 0.5);
+        color: var(--uui-color-interactive);
+      }
+
+      #icon-unchecked {
+        margin-right: -0.5em;
+        right: calc((var(--uui-toggle-size) + 1px) * 0.5);
+        color: var(--uui-color-interactive);
+      }
+
+      input:checked ~ #toggle #icon-checked {
+        color: var(--uui-color-selected-contrast);
+      }
+
+      #toggle::after {
+        content: '';
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        width: calc(var(--uui-toggle-size) - 2px);
+        height: calc(var(--uui-toggle-size) - 2px);
+        border-radius: 100px;
+        background-color: var(--uui-color-selected-contrast);
+        border: 1px solid var(--uui-color-border-standalone);
+        box-sizing: border-box;
+        transition:
+          width 120ms ease,
+          left 120ms ease,
+          transform 120ms ease,
+          background-color 120ms;
+      }
+
+      input:checked ~ #toggle::after {
+        left: calc(100% - 2px);
+        transform: translateX(-100%);
+      }
+
+      input:focus-visible ~ #toggle {
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      :host(:not([disabled], [readonly])) label:active #toggle::after {
+        /** Stretch when mouse down */
+        width: calc(1.06 * var(--uui-toggle-size));
+      }
+
+      :host([disabled]) #toggle {
+        background-color: var(--uui-color-disabled-standalone);
+      }
+      :host([disabled]) input:checked ~ #toggle {
+        background-color: var(--uui-color-disabled-contrast);
+      }
+      :host([disabled]) #toggle::after {
+        background-color: var(--uui-color-disabled);
+      }
+      :host([disabled]) #toggle #icon-unchecked {
+        color: var(--uui-color-disabled-contrast);
+      }
+      :host([disabled]) label:active #toggle {
+        animation: ${UUIHorizontalShakeAnimationValue};
+      }
+      :host([disabled]) input:checked #toggle #icon-checked {
+        color: var(--uui-color-disabled-contrast);
+      }
+
+      :host(:not([pristine]):invalid) #toggle,
+      :host(:not([pristine]):invalid) label:hover #toggle,
+      /* polyfill support */
+      :host(:not([pristine])[internals-invalid]) #toggle,
+      :host(:not([pristine])[internals-invalid]) label:hover #toggle {
+        border: 1px solid var(--uui-color-invalid-standalone);
+      }
+    `
+];
+let UUIToggleElement = _UUIToggleElement;
+export {
+  UUIToggleElement
+};
+//# sourceMappingURL=toggle.element.js.map

package/dist/components/toggle/toggle.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.element.js","sources":["../../../src/components/toggle/toggle.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport {\n  iconCheck,\n  iconRemove,\n} from '../icon-registry-essential/svgs/index.js';\nimport { css, html } from 'lit';\n\n/**\n *  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.\n *  @element uui-toggle\n *  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action\n *  @cssprop --uui-toggle-size - Define the toggle size.\n *  @cssprop --uui-toggle-switch-width - Define the slider width.\n *  @cssprop --uui-toggle-background-color - Set the toggle background color\n *  @cssprop --uui-toggle-border-color - Set the toggle border color\n *  @cssprop --uui-toggle-border-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused\n *  @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused\n *  @extends UUIBooleanInputElement\n */\nexport class UUIToggleElement extends UUIBooleanInputElement {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  constructor() {\n    super('switch');\n  }\n\n  renderCheckbox() {\n    return html`\n      <div id=\"toggle\">\n        <div id=\"icon-checked\">${iconCheck}</div>\n        <div id=\"icon-unchecked\">${iconRemove}</div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUIBooleanInputElement.styles,\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        --uui-toggle-size: 18px;\n        --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));\n      }\n\n      #toggle {\n        position: relative;\n        grid-area: 'input';\n        display: flex;\n        align-items: center;\n\n        flex-shrink: 0;\n\n        width: var(--uui-toggle-switch-width);\n        height: var(--uui-toggle-size);\n        border-radius: 100px;\n\n        background-color: var(\n          --uui-toggle-background-color,\n          var(--uui-color-border)\n        );\n        border: 1px solid\n          var(--uui-toggle-border-color, var(--uui-color-border-standalone));\n        font-size: calc(var(--uui-toggle-size) * 0.6);\n      }\n\n      label:hover input:not([disabled]) ~ #toggle {\n        border-color: var(\n          --uui-toggle-border-color-hover,\n          var(--uui-color-border-emphasis)\n        );\n        background-color: var(\n          --uui-toggle-background-color-hover,\n          var(--uui-color-border)\n        );\n      }\n\n      label:focus #toggle {\n        border-color: var(\n          --uui-toggle-border-color-focus,\n          var(--uui-color-focus)\n        );\n        background-color: var(\n          --uui-toggle-background-color-focus,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n\n      input:checked ~ #toggle {\n        background-color: var(--uui-color-selected);\n      }\n      input:checked ~ #toggle::after {\n        border-color: var(--uui-color-selected-standalone);\n      }\n\n      label:hover input:checked:not([disabled]) ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      label:focus input:checked ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      #icon-checked,\n      #icon-unchecked {\n        position: absolute;\n        vertical-align: middle;\n        width: 1em;\n        height: 1em;\n        line-height: 0;\n        transition: color 120ms;\n        svg {\n          stroke-width: 2.5;\n        }\n      }\n\n      #icon-checked {\n        margin-left: -0.45em;\n        left: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      #icon-unchecked {\n        margin-right: -0.5em;\n        right: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      input:checked ~ #toggle #icon-checked {\n        color: var(--uui-color-selected-contrast);\n      }\n\n      #toggle::after {\n        content: '';\n        position: absolute;\n        top: 1px;\n        left: 1px;\n        width: calc(var(--uui-toggle-size) - 2px);\n        height: calc(var(--uui-toggle-size) - 2px);\n        border-radius: 100px;\n        background-color: var(--uui-color-selected-contrast);\n        border: 1px solid var(--uui-color-border-standalone);\n        box-sizing: border-box;\n        transition:\n          width 120ms ease,\n          left 120ms ease,\n          transform 120ms ease,\n          background-color 120ms;\n      }\n\n      input:checked ~ #toggle::after {\n        left: calc(100% - 2px);\n        transform: translateX(-100%);\n      }\n\n      input:focus-visible ~ #toggle {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host(:not([disabled], [readonly])) label:active #toggle::after {\n        /** Stretch when mouse down */\n        width: calc(1.06 * var(--uui-toggle-size));\n      }\n\n      :host([disabled]) #toggle {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n      :host([disabled]) input:checked ~ #toggle {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) #toggle::after {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) #toggle #icon-unchecked {\n        color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) label:active #toggle {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n      :host([disabled]) input:checked #toggle #icon-checked {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([pristine]):invalid) #toggle,\n      :host(:not([pristine]):invalid) label:hover #toggle,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) #toggle,\n      :host(:not([pristine])[internals-invalid]) label:hover #toggle {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;AAyBO,MAAM,oBAAN,MAAM,0BAAyB,uBAAuB;AAAA,EAO3D,cAAc;AACZ,UAAM,QAAQ;AAAA,EAChB;AAAA,EAEA,iBAAiB;AACf,WAAO;AAAA;AAAA,iCAEsB,SAAS;AAAA,mCACP,UAAU;AAAA;AAAA;AAAA,EAG3C;AA8JF;AA3KE,kBAAgB,iBAAiB;AAejC,kBAAyB,SAAS;AAAA,EAChC,GAAG,uBAAuB;AAAA,EAC1B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA0IiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjK9C,IAAM,mBAAN;"}

package/dist/components/toggle/toggle.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIToggleElement } from "./toggle.element.js";
+defineElement("uui-toggle", UUIToggleElement);
+export {
+  UUIToggleElement,
+  UUIToggleElement as default
+};
+//# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIToggleElement } from './toggle.element.js';\n\ndefineElement('uui-toggle', UUIToggleElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-toggle': UUIToggleElement;\n  }\n}\n\nexport * from './toggle.element.js';\nexport { UUIToggleElement as default } from './toggle.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,cAAc,gBAAgB;"}

package/dist/components/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,8 @@
+import { UUIVisuallyHiddenElement } from './visually-hidden.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-visually-hidden': UUIVisuallyHiddenElement;
+    }
+}
+export * from './visually-hidden.element.js';
+export { UUIVisuallyHiddenElement as default } from './visually-hidden.element.js';

package/dist/components/visually-hidden/visually-hidden.element.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-visually-hidden
+ */
+export declare class UUIVisuallyHiddenElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/visually-hidden/visually-hidden.element.js

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from "lit";
+const _UUIVisuallyHiddenElement = class _UUIVisuallyHiddenElement extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUIVisuallyHiddenElement.styles = [
+  css`
+      :host(:not(:focus-within)) {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        clip: rect(0 0 0 0) !important;
+        clip-path: inset(50%) !important;
+        border: none !important;
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        padding: 0 !important;
+      }
+    `
+];
+let UUIVisuallyHiddenElement = _UUIVisuallyHiddenElement;
+export {
+  UUIVisuallyHiddenElement
+};
+//# sourceMappingURL=visually-hidden.element.js.map

package/dist/components/visually-hidden/visually-hidden.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.element.js","sources":["../../../src/components/visually-hidden/visually-hidden.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n * @element uui-visually-hidden\n */\nexport class UUIVisuallyHiddenElement extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host(:not(:focus-within)) {\n        position: absolute !important;\n        width: 1px !important;\n        height: 1px !important;\n        clip: rect(0 0 0 0) !important;\n        clip-path: inset(50%) !important;\n        border: none !important;\n        overflow: hidden !important;\n        white-space: nowrap !important;\n        padding: 0 !important;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAKO,MAAM,4BAAN,MAAM,kCAAiC,WAAW;AAAA,EACvD,SAAS;AACP,WAAO;AAAA,EACT;AAiBF;AAfE,0BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AANG,IAAM,2BAAN;"}

package/dist/components/visually-hidden/visually-hidden.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIVisuallyHiddenElement } from "./visually-hidden.element.js";
+defineElement("uui-visually-hidden", UUIVisuallyHiddenElement);
+export {
+  UUIVisuallyHiddenElement,
+  UUIVisuallyHiddenElement as default
+};
+//# sourceMappingURL=visually-hidden.js.map

package/dist/components/visually-hidden/visually-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.js","sources":["../../../src/components/visually-hidden/visually-hidden.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIVisuallyHiddenElement } from './visually-hidden.element.js';\n\ndefineElement('uui-visually-hidden', UUIVisuallyHiddenElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-visually-hidden': UUIVisuallyHiddenElement;\n  }\n}\n\nexport * from './visually-hidden.element.js';\nexport { UUIVisuallyHiddenElement as default } from './visually-hidden.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,uBAAuB,wBAAwB;"}

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+export * from './internal/index.js';
+export * from './styles/index.js';
+export * from './components/button/button.js';
+export * from './components/badge/badge.js';
+export * from './components/icon/icon.js';
+export * from './components/icon-registry/icon-registry.js';
+export * from './components/icon-registry-essential/icon-registry-essential.js';
+export * from './components/input/input.js';
+export * from './components/input-password/input-password.js';
+export * from './components/dialog/dialog.js';
+export * from './components/dialog-layout/dialog-layout.js';
+export * from './components/table/table.js';
+export * from './components/label/label.js';
+export * from './components/action-bar/action-bar.js';
+export * from './components/avatar/avatar.js';
+export * from './components/boolean-input/boolean-input.js';
+export * from './components/breadcrumbs/breadcrumbs.js';
+export * from './components/checkbox/checkbox.js';
+export * from './components/color-area/color-area.js';
+export * from './components/color-slider/color-slider.js';
+export * from './components/color-swatch/color-swatch.js';
+export * from './components/form/form.js';
+export * from './components/form-layout-item/form-layout-item.js';
+export * from './components/form-validation-message/form-validation-message.js';
+export * from './components/keyboard-shortcut/keyboard-shortcut.js';
+export * from './components/loader/loader.js';
+export * from './components/loader-bar/loader-bar.js';
+export * from './components/loader-circle/loader-circle.js';
+export * from './components/modal/modal.js';
+export * from './components/popover-container/popover-container.js';
+export * from './components/progress-bar/progress-bar.js';
+export * from './components/radio/radio.js';
+export * from './components/range-slider/range-slider.js';
+export * from './components/responsive-container/responsive-container.js';
+export * from './components/scroll-container/scroll-container.js';
+export * from './components/select/select.js';
+export * from './components/slider/slider.js';
+export * from './components/symbol-drag-handle/symbol-drag-handle.js';
+export * from './components/symbol-expand/symbol-expand.js';
+export * from './components/symbol-file/symbol-file.js';
+export * from './components/symbol-folder/symbol-folder.js';
+export * from './components/symbol-lock/symbol-lock.js';
+export * from './components/symbol-more/symbol-more.js';
+export * from './components/symbol-sort/symbol-sort.js';
+export * from './components/tag/tag.js';
+export * from './components/textarea/textarea.js';
+export * from './components/toggle/toggle.js';
+export * from './components/visually-hidden/visually-hidden.js';
+export * from './components/box/box.js';
+export * from './components/card/card.js';
+export * from './components/avatar-group/avatar-group.js';
+export * from './components/button-group/button-group.js';
+export * from './components/button-inline-create/button-inline-create.js';
+export * from './components/button-copy-text/button-copy-text.js';
+export * from './components/color-swatches/color-swatches.js';
+export * from './components/combobox-list/combobox-list.js';
+export * from './components/menu-item/menu-item.js';
+export * from './components/ref/ref.js';
+export * from './components/symbol-file-dropzone/symbol-file-dropzone.js';
+export * from './components/tabs/tabs.js';
+export * from './components/toast-notification/toast-notification.js';
+export * from './components/card-block-type/card-block-type.js';
+export * from './components/card-content-node/card-content-node.js';
+export * from './components/card-media/card-media.js';
+export * from './components/card-user/card-user.js';
+export * from './components/ref-list/ref-list.js';
+export * from './components/ref-node/ref-node.js';
+export * from './components/symbol-file-thumbnail/symbol-file-thumbnail.js';
+export * from './components/toast-notification-container/toast-notification-container.js';
+export * from './components/toast-notification-layout/toast-notification-layout.js';
+export * from './components/input-lock/input-lock.js';
+export * from './components/pagination/pagination.js';
+export * from './components/ref-node-data-type/ref-node-data-type.js';
+export * from './components/ref-node-document-type/ref-node-document-type.js';
+export * from './components/ref-node-form/ref-node-form.js';
+export * from './components/ref-node-member/ref-node-member.js';
+export * from './components/ref-node-package/ref-node-package.js';
+export * from './components/ref-node-user/ref-node-user.js';
+export * from './components/file-dropzone/file-dropzone.js';
+export * from './components/file-preview/file-preview.js';
+export * from './components/input-file/input-file.js';
+export * from './components/combobox/combobox.js';
+export * from './components/color-picker/color-picker.js';