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

package/dist/components/card-user/card-user.element.js

@@ -0,0 +1,188 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _UUICardUserElement_instances, renderButton_fn, renderLink_fn, renderContent_fn;
+import "../card/card.js";
+import { html, nothing, css } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../avatar/avatar.js";
+import { slotHasContent } from "../../internal/utils/slotHasContent.js";
+import { UUICardElement } from "../card/card.element.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 _UUICardUserElement = class _UUICardUserElement extends UUICardElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _UUICardUserElement_instances);
+    this.name = "";
+    this._avatarSlotHasContent = false;
+    this._avatarSlotChanged = (e) => {
+      this._avatarSlotHasContent = slotHasContent(e.target);
+    };
+  }
+  render() {
+    return html`
+      ${this.href ? __privateMethod(this, _UUICardUserElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardUserElement_instances, renderButton_fn).call(this)}
+      <!-- Select border must be right after #open-part -->
+      <div id="select-border"></div>
+      ${this.selectable ? this.renderCheckbox() : nothing}
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
+    `;
+  }
+};
+_UUICardUserElement_instances = new WeakSet();
+renderButton_fn = function() {
+  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
+  return html`
+      <div
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${__privateMethod(this, _UUICardUserElement_instances, renderContent_fn).call(this)}
+      </div>
+    `;
+};
+renderLink_fn = function() {
+  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
+  const rel = this.target === "_blank" ? "noopener noreferrer" : void 0;
+  return html`
+      <a
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : void 0)}
+        target=${ifDefined(this.target || void 0)}
+        rel=${ifDefined(this.rel || rel)}>
+        ${__privateMethod(this, _UUICardUserElement_instances, renderContent_fn).call(this)}
+      </a>
+    `;
+};
+renderContent_fn = function() {
+  return html`
+      <div id="content">
+        ${this._avatarSlotHasContent ? nothing : html`<uui-avatar
+              class="avatar"
+              name=${this.name}
+              size="m"></uui-avatar>`}
+        <slot
+          name="avatar"
+          class="avatar"
+          @slotchange=${this._avatarSlotChanged}></slot>
+        <span title="${this.name}">${this.name}</span>
+        <slot></slot>
+      </div>
+    `;
+};
+_UUICardUserElement.styles = [
+  ...UUICardElement.styles,
+  css`
+      :host {
+        min-width: 250px;
+      }
+
+      slot:not([name])::slotted(*) {
+        font-size: var(--uui-type-small-size);
+        line-height: var(--uui-size-6);
+      }
+
+      ::slotted(*) {
+        text-align: center;
+      }
+
+      slot[name='tag'] {
+        position: absolute;
+        bottom: var(--uui-size-space-4);
+        right: var(--uui-size-space-4);
+        display: flex;
+        justify-content: right;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-space-4);
+        right: var(--uui-size-space-4);
+        display: flex;
+        justify-content: right;
+
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
+      }
+
+      #open-part {
+        cursor: pointer;
+        flex-grow: 1;
+        padding: var(--uui-size-space-5) var(--uui-size-space-4);
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
+      }
+
+      #open-part:hover #content {
+        color: var(--uui-color-interactive-emphasis);
+      }
+      #open-part:hover #content > span {
+        text-decoration: underline;
+      }
+
+      :host([selectable]) #open-part {
+        padding: 0;
+        margin: var(--uui-size-space-5) var(--uui-size-space-4);
+      }
+
+      #content {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        align-items: center;
+        margin: 0 0 3px 0;
+        height: 100%;
+      }
+
+      #content > span {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: center;
+        margin-top: 3px;
+        font-weight: 700;
+        overflow-wrap: anywhere;
+      }
+
+      .avatar {
+        font-size: 1.5em;
+        margin-top: var(--uui-size-space-1);
+        margin-bottom: var(--uui-size-space-2);
+      }
+    `
+];
+let UUICardUserElement = _UUICardUserElement;
+__decorateClass([
+  property({ type: String })
+], UUICardUserElement.prototype, "name");
+__decorateClass([
+  state()
+], UUICardUserElement.prototype, "_avatarSlotHasContent");
+export {
+  UUICardUserElement
+};
+//# sourceMappingURL=card-user.element.js.map

package/dist/components/card-user/card-user.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-user.element.js","sources":["../../../src/components/card-user/card-user.element.ts"],"sourcesContent":["import { slotHasContent } from '../../internal/utils/index.js';\nimport { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../avatar/avatar.js';\n\n/**\n *  @element uui-card-user\n *  @description - Card component for displaying a user node.\n *  @slot - slot for the default content area\n *  @slot tag - slot for the tag with support for `<uui-tag>` elements\n *  @slot avatar - slot for the avatar with support for the `<uui-avatar>` element\n *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n */\nexport class UUICardUserElement extends UUICardElement {\n  /**\n   * User name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  @state()\n  private _avatarSlotHasContent = false;\n  private readonly _avatarSlotChanged = (e: Event) => {\n    this._avatarSlotHasContent = slotHasContent(e.target);\n  };\n\n  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <div\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        @click=${this.handleOpenClick}\n        @keydown=${this.handleOpenKeydown}>\n        ${this.#renderContent()}\n      </div>\n    `;\n  }\n\n  #renderLink() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n    return html`\n      <a\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        href=${ifDefined(!this.disabled ? this.href : undefined)}\n        target=${ifDefined(this.target || undefined)}\n        rel=${ifDefined(this.rel || rel)}>\n        ${this.#renderContent()}\n      </a>\n    `;\n  }\n\n  #renderContent() {\n    return html`\n      <div id=\"content\">\n        ${this._avatarSlotHasContent\n          ? nothing\n          : html`<uui-avatar\n              class=\"avatar\"\n              name=${this.name}\n              size=\"m\"></uui-avatar>`}\n        <slot\n          name=\"avatar\"\n          class=\"avatar\"\n          @slotchange=${this._avatarSlotChanged}></slot>\n        <span title=\"${this.name}\">${this.name}</span>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  public render() {\n    return html`\n      ${this.href ? this.#renderLink() : this.#renderButton()}\n      <!-- Select border must be right after #open-part -->\n      <div id=\"select-border\"></div>\n      ${this.selectable ? this.renderCheckbox() : nothing}\n      <slot name=\"tag\"></slot>\n      <slot name=\"actions\"></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      :host {\n        min-width: 250px;\n      }\n\n      slot:not([name])::slotted(*) {\n        font-size: var(--uui-type-small-size);\n        line-height: var(--uui-size-6);\n      }\n\n      ::slotted(*) {\n        text-align: center;\n      }\n\n      slot[name='tag'] {\n        position: absolute;\n        bottom: var(--uui-size-space-4);\n        right: var(--uui-size-space-4);\n        display: flex;\n        justify-content: right;\n      }\n\n      slot[name='actions'] {\n        position: absolute;\n        top: var(--uui-size-space-4);\n        right: var(--uui-size-space-4);\n        display: flex;\n        justify-content: right;\n\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\n      }\n\n      #open-part {\n        cursor: pointer;\n        flex-grow: 1;\n        padding: var(--uui-size-space-5) var(--uui-size-space-4);\n      }\n\n      :host([disabled]) #open-part {\n        pointer-events: none;\n      }\n\n      #open-part:hover #content {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      #open-part:hover #content > span {\n        text-decoration: underline;\n      }\n\n      :host([selectable]) #open-part {\n        padding: 0;\n        margin: var(--uui-size-space-5) var(--uui-size-space-4);\n      }\n\n      #content {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        align-items: center;\n        margin: 0 0 3px 0;\n        height: 100%;\n      }\n\n      #content > span {\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        vertical-align: center;\n        margin-top: 3px;\n        font-weight: 700;\n        overflow-wrap: anywhere;\n      }\n\n      .avatar {\n        font-size: 1.5em;\n        margin-top: var(--uui-size-space-1);\n        margin-bottom: var(--uui-size-space-2);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,sBAAN,MAAM,4BAA2B,eAAe;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,OAAO;AAGP,SAAQ,wBAAwB;AAChC,SAAiB,qBAAqB,CAAC,MAAa;AAClD,WAAK,wBAAwB,eAAe,EAAE,MAAM;AAAA,IACtD;AAAA,EAAA;AAAA,EAiDO,SAAS;AACd,WAAO;AAAA,QACH,KAAK,OAAO,sBAAK,8CAAL,aAAqB,sBAAK,gDAAL,UAAoB;AAAA;AAAA;AAAA,QAGrD,KAAK,aAAa,KAAK,eAAA,IAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,EAIvD;AA4FF;AApKO;AAgBL,kBAAA,WAAgB;AACd,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,iBACrB,KAAK,eAAe;AAAA,mBAClB,KAAK,iBAAiB;AAAA,UAC/B,sBAAK,iDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,gBAAA,WAAc;AACZ,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,QAAM,MAAM,KAAK,WAAW,WAAW,wBAAwB;AAC/D,SAAO;AAAA;AAAA;AAAA,mBAGQ,UAAU,QAAQ,CAAC;AAAA,eACvB,UAAU,CAAC,KAAK,WAAW,KAAK,OAAO,MAAS,CAAC;AAAA,iBAC/C,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,cACtC,UAAU,KAAK,OAAO,GAAG,CAAC;AAAA,UAC9B,sBAAK,iDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,mBAAA,WAAiB;AACf,SAAO;AAAA;AAAA,UAED,KAAK,wBACH,UACA;AAAA;AAAA,qBAES,KAAK,IAAI;AAAA,qCACO;AAAA;AAAA;AAAA;AAAA,wBAIb,KAAK,kBAAkB;AAAA,uBACxB,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA;AAAA;AAAA;AAI5C;AAaA,oBAAyB,SAAS;AAAA,EAChC,GAAG,eAAe;AAAA,EAClB;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;AA5EG,IAAM,qBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,mBAQX,WAAA,MAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAVI,mBAWH,WAAA,uBAAA;"}

package/dist/components/card-user/card-user.js

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

package/dist/components/card-user/card-user.js.map

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

package/dist/components/checkbox/checkbox-indeterminate.example.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import '../checkbox/checkbox.js';
+export type Option = {
+    value: string;
+    label: string;
+};
+export default class UUICheckboxIndeterminateExample extends LitElement {
+    label: string;
+    parent: Option;
+    options: Option[];
+    values: string[];
+    private _handleParentChange;
+    private _handleOptionChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-checkbox-indeterminate-example': UUICheckboxIndeterminateExample;
+    }
+}

package/dist/components/checkbox/checkbox.d.ts

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

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

@@ -0,0 +1,17 @@
+import { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';
+/**
+ *  Umbraco checkbox, toggles between checked and uncheck
+ *  @element uui-checkbox
+ *  @fires UUIBooleanInputEvent#change - fires when the element is begin checked by a user action
+ *  @cssprop --uui-checkbox-size - To set the size of the checkbox.
+ *  @extends UUIBooleanInputElement
+ */
+export declare class UUICheckboxElement 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;
+    renderCheckbox(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/checkbox/checkbox.element.js

@@ -0,0 +1,202 @@
+import { UUIBooleanInputElement } from "../boolean-input/boolean-input.element.js";
+import "../boolean-input/UUIBooleanInputEvent.js";
+import { html, css, svg } from "lit";
+import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
+const check = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 10 17 4 12" /></svg>`;
+const subtract = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12.25h14" /></svg>`;
+const _UUICheckboxElement = class _UUICheckboxElement extends UUIBooleanInputElement {
+  renderCheckbox() {
+    return html`
+      <div id="ticker">
+        <div id="icon-check">${this.indeterminate ? subtract : check}</div>
+      </div>
+    `;
+  }
+};
+_UUICheckboxElement.formAssociated = true;
+_UUICheckboxElement.styles = [
+  ...UUIBooleanInputElement.styles,
+  UUIHorizontalShakeKeyframes,
+  css`
+      :host {
+        --uui-checkbox-size: 18px;
+      }
+
+      #ticker {
+        position: relative;
+        grid-area: 'input';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        box-sizing: border-box;
+        width: var(--uui-checkbox-size);
+        height: var(--uui-checkbox-size);
+        border-radius: var(
+          --uui-checkbox-border-radius,
+          var(--uui-border-radius-1)
+        );
+
+        color: var(--uui-toggle-color, var(--uui-color-selected-contrast));
+        background-color: var(
+          --uui-toggle-background-color,
+          var(--uui-color-surface)
+        );
+        border: 1px solid
+          var(--uui-checkbox-border-color, var(--uui-color-border-standalone));
+        font-size: calc(var(--uui-checkbox-size) * 0.7);
+      }
+      label:hover input:not([disabled]) + #ticker {
+        border-color: var(
+          --uui-checkbox-border-color-hover,
+          var(--uui-color-border-emphasis)
+        );
+        background-color: var(
+          --uui-checkbox-background-color-hover,
+          var(--uui-color-surface-emphasis)
+        );
+      }
+      label:focus #ticker {
+        border-color: var(
+          --uui-checkbox-border-color-focus,
+          var(--uui-color-border-emphasis)
+        );
+        background-color: var(
+          --uui-checkbox-background-color-focus,
+          var(--uui-color-surface-emphasis)
+        );
+      }
+      input:checked:not([disabled]) + #ticker,
+      input:indeterminate:not([disabled]) + #ticker {
+        border-color: var(--uui-color-selected);
+      }
+
+      label:hover input:checked:not([disabled]) + #ticker,
+      label:hover input:indeterminate:not([disabled]) + #ticker {
+        border-color: var(--uui-color-selected-emphasis);
+      }
+
+      label:focus input:checked + #ticker,
+      label:focus input:indeterminate + #ticker {
+        border-color: var(--uui-color-selected-emphasis);
+      }
+
+      #icon-check {
+        position: absolute;
+        vertical-align: middle;
+        width: 1em;
+        height: 1em;
+        line-height: 1.3em;
+        transition:
+          transform 80ms ease-in-out,
+          fill 120ms,
+          opacity 120ms;
+        color: var(--uui-color-selected-contrast);
+        opacity: 0;
+      }
+
+      #ticker::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border-radius: calc(
+          var(--uui-checkbox-border-radius, var(--uui-border-radius-1))
+        );
+        background-color: var(--uui-color-selected);
+        transition:
+          transform 80ms ease-in-out,
+          opacity 80ms,
+          background-color 80ms;
+        transform: scale(0);
+        opacity: 0;
+      }
+      label:hover input:checked:not([disabled]) + #ticker::before,
+      label:hover input:indeterminate:not([disabled]) + #ticker::before {
+        background-color: var(--uui-color-selected-emphasis);
+      }
+
+      input:checked + #ticker::before,
+      input:indeterminate + #ticker::before {
+        transform: scale(1);
+        opacity: 1;
+      }
+      input:checked + #ticker #icon-check,
+      input:indeterminate + #ticker #icon-check {
+        opacity: 1;
+      }
+      label:focus input:checked + #ticker,
+      label:focus input:indeterminate + #ticker {
+        background-color: var(--uui-color-selected-emphasis);
+      }
+
+      input:focus-visible + #ticker {
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      :host(:not([disabled], [readonly]))
+        label:active
+        input:checked
+        + #ticker
+        #icon-check {
+        /** Stretch when mouse down */
+        transform: scale(0.9);
+      }
+
+      :host(:not([disabled], [readonly]))
+        label:active
+        input:indeterminate
+        + #ticker
+        #icon-check {
+        /** Stretch when mouse down */
+        transform: scale(0.9);
+      }
+
+      :host(:not([pristine]):invalid) #ticker,
+      :host(:not([pristine]):invalid) label:hover #ticker,
+      :host(:not([pristine]):invalid) label:hover input:checked:not([disabled]) + #ticker,
+      :host(:not([pristine]):invalid) label:hover input:indeterminate:not([disabled]) + #ticker,
+      :host(:not([pristine]):invalid) label:focus input:checked + #ticker,
+      :host(:not([pristine]):invalid) label:focus input:indeterminate + #ticker,
+      /* polyfill support */
+      :host(:not([pristine])[internals-invalid]) #ticker,
+      :host(:not([pristine])[internals-invalid]) label:hover #ticker,
+      :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,
+      :host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,
+      :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,
+      :host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {
+        border: 1px solid var(--uui-color-invalid-standalone);
+      }
+
+      :host([disabled]) #ticker {
+        background-color: var(--uui-color-disabled);
+      }
+      :host([disabled]) input:checked + #ticker {
+        background-color: var(--uui-color-disabled);
+      }
+      :host([disabled]) input:indeterminate + #ticker {
+        background-color: var(--uui-color-disabled);
+      }
+      :host([disabled]) #ticker::before {
+        background-color: var(--uui-color-disabled);
+      }
+      :host([disabled]) #ticker #icon-check {
+        color: var(--uui-color-disabled-contrast);
+      }
+      :host([disabled]) label:active #ticker {
+        animation: ${UUIHorizontalShakeAnimationValue};
+      }
+      :host([disabled]) input:checked + #ticker #icon-check,
+      :host([disabled]) input:indeterminate + #ticker #icon-check {
+        color: var(--uui-color-disabled-contrast);
+      }
+    `
+];
+let UUICheckboxElement = _UUICheckboxElement;
+export {
+  UUICheckboxElement
+};
+//# sourceMappingURL=checkbox.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.element.js","sources":["../../../src/components/checkbox/checkbox.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport { css, html, svg } from 'lit';\n\n// Custom SVG for the checkbox, as this is smaller in size than the icon registry version: [NL]\nconst check = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 10 17 4 12\" /></svg>`;\nconst subtract = svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 12.25h14\" /></svg>`;\n\n/**\n *  Umbraco checkbox, toggles between checked and uncheck\n *  @element uui-checkbox\n *  @fires UUIBooleanInputEvent#change - fires when the element is begin checked by a user action\n *  @cssprop --uui-checkbox-size - To set the size of the checkbox.\n *  @extends UUIBooleanInputElement\n */\nexport class UUICheckboxElement 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  renderCheckbox() {\n    return html`\n      <div id=\"ticker\">\n        <div id=\"icon-check\">${this.indeterminate ? subtract : check}</div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUIBooleanInputElement.styles,\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        --uui-checkbox-size: 18px;\n      }\n\n      #ticker {\n        position: relative;\n        grid-area: 'input';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n\n        box-sizing: border-box;\n        width: var(--uui-checkbox-size);\n        height: var(--uui-checkbox-size);\n        border-radius: var(\n          --uui-checkbox-border-radius,\n          var(--uui-border-radius-1)\n        );\n\n        color: var(--uui-toggle-color, var(--uui-color-selected-contrast));\n        background-color: var(\n          --uui-toggle-background-color,\n          var(--uui-color-surface)\n        );\n        border: 1px solid\n          var(--uui-checkbox-border-color, var(--uui-color-border-standalone));\n        font-size: calc(var(--uui-checkbox-size) * 0.7);\n      }\n      label:hover input:not([disabled]) + #ticker {\n        border-color: var(\n          --uui-checkbox-border-color-hover,\n          var(--uui-color-border-emphasis)\n        );\n        background-color: var(\n          --uui-checkbox-background-color-hover,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n      label:focus #ticker {\n        border-color: var(\n          --uui-checkbox-border-color-focus,\n          var(--uui-color-border-emphasis)\n        );\n        background-color: var(\n          --uui-checkbox-background-color-focus,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n      input:checked:not([disabled]) + #ticker,\n      input:indeterminate:not([disabled]) + #ticker {\n        border-color: var(--uui-color-selected);\n      }\n\n      label:hover input:checked:not([disabled]) + #ticker,\n      label:hover input:indeterminate:not([disabled]) + #ticker {\n        border-color: var(--uui-color-selected-emphasis);\n      }\n\n      label:focus input:checked + #ticker,\n      label:focus input:indeterminate + #ticker {\n        border-color: var(--uui-color-selected-emphasis);\n      }\n\n      #icon-check {\n        position: absolute;\n        vertical-align: middle;\n        width: 1em;\n        height: 1em;\n        line-height: 1.3em;\n        transition:\n          transform 80ms ease-in-out,\n          fill 120ms,\n          opacity 120ms;\n        color: var(--uui-color-selected-contrast);\n        opacity: 0;\n      }\n\n      #ticker::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        border-radius: calc(\n          var(--uui-checkbox-border-radius, var(--uui-border-radius-1))\n        );\n        background-color: var(--uui-color-selected);\n        transition:\n          transform 80ms ease-in-out,\n          opacity 80ms,\n          background-color 80ms;\n        transform: scale(0);\n        opacity: 0;\n      }\n      label:hover input:checked:not([disabled]) + #ticker::before,\n      label:hover input:indeterminate:not([disabled]) + #ticker::before {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      input:checked + #ticker::before,\n      input:indeterminate + #ticker::before {\n        transform: scale(1);\n        opacity: 1;\n      }\n      input:checked + #ticker #icon-check,\n      input:indeterminate + #ticker #icon-check {\n        opacity: 1;\n      }\n      label:focus input:checked + #ticker,\n      label:focus input:indeterminate + #ticker {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      input:focus-visible + #ticker {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host(:not([disabled], [readonly]))\n        label:active\n        input:checked\n        + #ticker\n        #icon-check {\n        /** Stretch when mouse down */\n        transform: scale(0.9);\n      }\n\n      :host(:not([disabled], [readonly]))\n        label:active\n        input:indeterminate\n        + #ticker\n        #icon-check {\n        /** Stretch when mouse down */\n        transform: scale(0.9);\n      }\n\n      :host(:not([pristine]):invalid) #ticker,\n      :host(:not([pristine]):invalid) label:hover #ticker,\n      :host(:not([pristine]):invalid) label:hover input:checked:not([disabled]) + #ticker,\n      :host(:not([pristine]):invalid) label:hover input:indeterminate:not([disabled]) + #ticker,\n      :host(:not([pristine]):invalid) label:focus input:checked + #ticker,\n      :host(:not([pristine]):invalid) label:focus input:indeterminate + #ticker,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) #ticker,\n      :host(:not([pristine])[internals-invalid]) label:hover #ticker,\n      :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,\n      :host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,\n      :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,\n      :host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n\n      :host([disabled]) #ticker {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) input:checked + #ticker {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) input:indeterminate + #ticker {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) #ticker::before {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) #ticker #icon-check {\n        color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) label:active #ticker {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n      :host([disabled]) input:checked + #ticker #icon-check,\n      :host([disabled]) input:indeterminate + #ticker #icon-check {\n        color: var(--uui-color-disabled-contrast);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,QAAQ;AACd,MAAM,WAAW;AASV,MAAM,sBAAN,MAAM,4BAA2B,uBAAuB;AAAA,EAO7D,iBAAiB;AACf,WAAO;AAAA;AAAA,+BAEoB,KAAK,gBAAgB,WAAW,KAAK;AAAA;AAAA;AAAA,EAGlE;AAuLF;AA/LE,oBAAgB,iBAAiB;AAUjC,oBAAyB,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;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,qBA0KiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5L9C,IAAM,qBAAN;"}

package/dist/components/checkbox/checkbox.js

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

package/dist/components/checkbox/checkbox.js.map

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

package/dist/components/color-area/UUIColorAreaEvent.d.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIColorAreaElement } from './color-area.element.js';
+export declare class UUIColorAreaEvent extends UUIEvent<{}, UUIColorAreaElement> {
+    static readonly CHANGE = "change";
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/color-area/UUIColorAreaEvent.js

@@ -0,0 +1,15 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIColorAreaEvent = class _UUIColorAreaEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIColorAreaEvent.CHANGE = "change";
+let UUIColorAreaEvent = _UUIColorAreaEvent;
+export {
+  UUIColorAreaEvent
+};
+//# sourceMappingURL=UUIColorAreaEvent.js.map

package/dist/components/color-area/UUIColorAreaEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIColorAreaEvent.js","sources":["../../../src/components/color-area/UUIColorAreaEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIColorAreaElement } from './color-area.element.js';\n\nexport class UUIColorAreaEvent extends UUIEvent<{}, UUIColorAreaElement> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,qBAAN,MAAM,2BAA0B,SAAkC;AAAA,EAGvE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,mBAAuB,SAAS;AAD3B,IAAM,oBAAN;"}

package/dist/components/color-area/color-area.d.ts

@@ -0,0 +1,9 @@
+import { UUIColorAreaElement } from './color-area.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-color-area': UUIColorAreaElement;
+    }
+}
+export * from './color-area.element.js';
+export * from './UUIColorAreaEvent.js';
+export { UUIColorAreaElement as default } from './color-area.element.js';

package/dist/components/color-area/color-area.element.d.ts

@@ -0,0 +1,87 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-color-area
+ * @cssprop --uui-color-area-grid-handle-size - The size of the handle in the grid
+ * @cssprop --uui-color-area-border-radius - The border radius of the color area
+ */
+export declare class UUIColorAreaElement extends LitElement {
+    private isDraggingGridHandle;
+    /**
+     * Sets the color area to disabled.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the color area to readonly mode.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * The current hue.
+     * @attr
+     * @type number
+     * @default 0
+     * @min 0
+     * @max 360
+     * @step 1
+     * @unit °
+     */
+    hue: number;
+    /**
+     * The current saturation.
+     * @attr
+     * @type number
+     * @default 0
+     * @min 0
+     * @max 100
+     * @step 1
+     * @unit %
+     **/
+    saturation: number;
+    /**
+     * The current lightness.
+     * @attr
+     * @type number
+     * @default 0
+     * @min 0
+     * @max 100
+     * @step 1
+     * @unit %
+     **/
+    lightness: number;
+    /**
+     * The current brightness.
+     * @attr
+     * @type number
+     * @default 0
+     * @min 0
+     * @max 100
+     * @step 1
+     * @unit %
+     **/
+    brightness: number;
+    /**
+     * The current alpha.
+     * @attr
+     * @type number
+     * @default 100
+     * @min 0
+     * @max 100
+     * @step 1
+     * @unit %
+     */
+    alpha: number;
+    private _value;
+    /** The current value. */
+    get value(): string;
+    set value(newVal: string);
+    handleGridDrag(event: PointerEvent): void;
+    handleGridKeyDown(event: KeyboardEvent): void;
+    syncValues(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}