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

package/dist/components/tabs/tab.element.js

@@ -0,0 +1,196 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.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 _UUITabElement = class _UUITabElement extends ActiveMixin(LabelMixin("", LitElement)) {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.orientation = "horizontal";
+    this.addEventListener("click", this.onHostClick);
+  }
+  onHostClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+  }
+  render() {
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html`
+        <a
+          id="button"
+          href=${ifDefined(this.disabled ? void 0 : this.href)}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(rel)}
+          role="tab">
+          <slot name="icon"></slot>
+          ${this.renderLabel()}
+          <slot name="extra"></slot>
+        </a>
+      `;
+    }
+    return html`
+      <button type="button" id="button" ?disabled=${this.disabled} role="tab">
+        <slot name="icon"></slot>
+        ${this.renderLabel()}
+        <slot name="extra"></slot>
+      </button>
+    `;
+  }
+};
+_UUITabElement.styles = [
+  css`
+      :host {
+        color: var(--uui-tab-text, var(--uui-color-interactive));
+        font-family: inherit;
+        width: fit-content;
+      }
+
+      #button {
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        min-height: var(--uui-size-12);
+        min-width: 70px;
+        padding: var(--uui-size-3)
+          var(--uui-tab-padding-horizontal, var(--uui-size-5));
+        border: none;
+        font-size: inherit;
+        background: none;
+        color: inherit;
+        cursor: pointer;
+        font-family: inherit;
+
+        /* for anchor tag: */
+        text-decoration: none;
+        line-height: normal;
+      }
+
+      :host([orientation='vertical']) #button {
+        min-height: var(--uui-size-14);
+        padding: var(--uui-size-2)
+          var(--uui-tab-padding-horizontal, var(--uui-size-5));
+      }
+
+      :host(:not([disabled])) #button:hover {
+        color: var(--uui-tab-text-hover, var(--uui-color-default-emphasis));
+      }
+
+      :host(:not([disabled])) #button:active {
+        box-shadow:
+          inset 0 2px 4px rgba(0, 0, 0, 0.15),
+          0 1px 2px rgba(0, 0, 0, 0.05);
+      }
+
+      :host([active]) {
+        color: var(--uui-tab-text-active, unset);
+      }
+
+      :host([disabled]) #button {
+        color: var(--uui-color-disabled-contrast);
+        cursor: default;
+      }
+
+      #button::before {
+        content: '';
+        position: absolute;
+        background-color: var(--uui-color-current);
+        opacity: 0;
+      }
+      :host([active]) #button::before {
+        opacity: 1;
+      }
+
+      /* HORIZONTAL */
+      :host([orientation='horizontal']) #button::before {
+        left: auto;
+        right: auto;
+        border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;
+        height: 0px;
+        width: calc(100% - 14px);
+        bottom: 0;
+        transition:
+          opacity linear 120ms,
+          height ease-in-out 120ms;
+      }
+      :host([active][orientation='horizontal']) #button::before {
+        height: 4px;
+      }
+
+      /* VERTICAL */
+      :host([orientation='vertical']) #button::before {
+        top: auto;
+        bottom: auto;
+        border-radius: 0 var(--uui-border-radius) var(--uui-border-radius) 0;
+        height: calc(100% - 12px);
+        width: 0px;
+        left: 0;
+        transition:
+          opacity linear 120ms,
+          width ease-in-out 120ms;
+      }
+      :host([active][orientation='vertical']) #button::before {
+        width: 4px;
+      }
+
+      #button:hover::before {
+        background-color: var(--uui-color-current-emphasis);
+      }
+      :host([disabled]) #button::before {
+        background-color: var(--uui-color-disabled-standalone);
+      }
+
+      slot[name='icon']::slotted(*) {
+        font-size: 20px;
+        margin-bottom: var(--uui-size-2);
+      }
+
+      slot.label {
+        text-align: center;
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+      }
+
+      :host([orientation='vertical']) slot.label {
+        text-align: left;
+      }
+    `
+];
+let UUITabElement = _UUITabElement;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUITabElement.prototype, "disabled");
+__decorateClass([
+  property({ type: String })
+], UUITabElement.prototype, "href");
+__decorateClass([
+  property({ type: String })
+], UUITabElement.prototype, "target");
+__decorateClass([
+  property({ type: String })
+], UUITabElement.prototype, "rel");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UUITabElement.prototype, "orientation");
+export {
+  UUITabElement
+};
+//# sourceMappingURL=tab.element.js.map

package/dist/components/tabs/tab.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.element.js","sources":["../../../src/components/tabs/tab.element.ts"],"sourcesContent":["import { ActiveMixin, LabelMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * A single tab. Should be put into `<uui-tab-group>`,\n * @element uui-tabs\n * @slot - for label\n * @slot icon - for icon\n * @slot extra - for extra\n * @description - All-round tab-button\n * @cssprop --uui-tab-text - Define the tab text color\n * @cssprop --uui-tab-text-hover - Define the tab text hover color\n * @cssprop --uui-tab-text-active - Define the tab text active color\n * @cssprop --uui-tab-divider - Define the tab dividers color\n * @cssprop --uui-tab-padding-horizontal - Define the tab horizontal padding\n */\nexport class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {\n  /**\n   * Reflects the disabled state of the element. True if tab is disabled. Change this to switch the state programmatically.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public disabled = false;\n\n  /**\n   * Set an href, this will turns the inner button into a anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  /**\n   * Set the visual orientation of this tab, this changes the look and placement of the active indication.\n   * @type {string}\n   * @attr\n   * @default horizontal\n   */\n  @property({ type: String, reflect: true })\n  public orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.onHostClick);\n  }\n\n  private onHostClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n    }\n  }\n\n  render() {\n    if (this.href) {\n      const rel =\n        this.rel ||\n        (this.target === '_blank' ? 'noopener noreferrer' : undefined);\n      return html`\n        <a\n          id=\"button\"\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          target=${ifDefined(this.target || undefined)}\n          rel=${ifDefined(rel)}\n          role=\"tab\">\n          <slot name=\"icon\"></slot>\n          ${this.renderLabel()}\n          <slot name=\"extra\"></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button type=\"button\" id=\"button\" ?disabled=${this.disabled} role=\"tab\">\n        <slot name=\"icon\"></slot>\n        ${this.renderLabel()}\n        <slot name=\"extra\"></slot>\n      </button>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        color: var(--uui-tab-text, var(--uui-color-interactive));\n        font-family: inherit;\n        width: fit-content;\n      }\n\n      #button {\n        position: relative;\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        min-height: var(--uui-size-12);\n        min-width: 70px;\n        padding: var(--uui-size-3)\n          var(--uui-tab-padding-horizontal, var(--uui-size-5));\n        border: none;\n        font-size: inherit;\n        background: none;\n        color: inherit;\n        cursor: pointer;\n        font-family: inherit;\n\n        /* for anchor tag: */\n        text-decoration: none;\n        line-height: normal;\n      }\n\n      :host([orientation='vertical']) #button {\n        min-height: var(--uui-size-14);\n        padding: var(--uui-size-2)\n          var(--uui-tab-padding-horizontal, var(--uui-size-5));\n      }\n\n      :host(:not([disabled])) #button:hover {\n        color: var(--uui-tab-text-hover, var(--uui-color-default-emphasis));\n      }\n\n      :host(:not([disabled])) #button:active {\n        box-shadow:\n          inset 0 2px 4px rgba(0, 0, 0, 0.15),\n          0 1px 2px rgba(0, 0, 0, 0.05);\n      }\n\n      :host([active]) {\n        color: var(--uui-tab-text-active, unset);\n      }\n\n      :host([disabled]) #button {\n        color: var(--uui-color-disabled-contrast);\n        cursor: default;\n      }\n\n      #button::before {\n        content: '';\n        position: absolute;\n        background-color: var(--uui-color-current);\n        opacity: 0;\n      }\n      :host([active]) #button::before {\n        opacity: 1;\n      }\n\n      /* HORIZONTAL */\n      :host([orientation='horizontal']) #button::before {\n        left: auto;\n        right: auto;\n        border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;\n        height: 0px;\n        width: calc(100% - 14px);\n        bottom: 0;\n        transition:\n          opacity linear 120ms,\n          height ease-in-out 120ms;\n      }\n      :host([active][orientation='horizontal']) #button::before {\n        height: 4px;\n      }\n\n      /* VERTICAL */\n      :host([orientation='vertical']) #button::before {\n        top: auto;\n        bottom: auto;\n        border-radius: 0 var(--uui-border-radius) var(--uui-border-radius) 0;\n        height: calc(100% - 12px);\n        width: 0px;\n        left: 0;\n        transition:\n          opacity linear 120ms,\n          width ease-in-out 120ms;\n      }\n      :host([active][orientation='vertical']) #button::before {\n        width: 4px;\n      }\n\n      #button:hover::before {\n        background-color: var(--uui-color-current-emphasis);\n      }\n      :host([disabled]) #button::before {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n\n      slot[name='icon']::slotted(*) {\n        font-size: 20px;\n        margin-bottom: var(--uui-size-2);\n      }\n\n      slot.label {\n        text-align: center;\n        display: flex;\n        width: 100%;\n        flex-direction: column;\n      }\n\n      :host([orientation='vertical']) slot.label {\n        text-align: left;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,YAAY,WAAW,IAAI,UAAU,CAAC,EAAE;AAAA,EA8CzE,cAAc;AACZ,UAAA;AAvCF,SAAO,WAAW;AAoClB,SAAO,cAA0C;AAI/C,SAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAA;AACF,QAAE,yBAAA;AAAA,IACJ;AAAA,EACF;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM;AACb,YAAM,MACJ,KAAK,QACJ,KAAK,WAAW,WAAW,wBAAwB;AACtD,aAAO;AAAA;AAAA;AAAA,iBAGI,UAAU,KAAK,WAAW,SAAY,KAAK,IAAI,CAAC;AAAA,mBAC9C,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,gBACtC,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA,YAGlB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,IAI1B;AACA,WAAO;AAAA,oDACyC,KAAK,QAAQ;AAAA;AAAA,UAEvD,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,EAI1B;AA8HF;AA5HE,eAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtFG,IAAM,gBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,cAQJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,cAiBJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBf,cA0BJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCf,cAmCJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA3C9B,cA4CJ,WAAA,aAAA;"}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,13 @@
+import { UUITabGroupElement } from './tab-group.element.js';
+import { UUITabElement } from './tab.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-tab-group': UUITabGroupElement;
+        'uui-tab': UUITabElement;
+    }
+}
+export * from './tab-group.element.js';
+export * from './tab.element.js';
+export * from './UUITabEvent.js';
+export * from './UUITabGroupEvent.js';
+export { UUITabGroupElement as default } from './tab-group.element.js';

package/dist/components/tabs/tabs.js

@@ -0,0 +1,11 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUITabGroupElement } from "./tab-group.element.js";
+import { UUITabElement } from "./tab.element.js";
+defineElement("uui-tab-group", UUITabGroupElement);
+defineElement("uui-tab", UUITabElement);
+export {
+  UUITabElement,
+  UUITabGroupElement,
+  UUITabGroupElement as default
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUITabGroupElement } from './tab-group.element.js';\nimport { UUITabElement } from './tab.element.js';\n\ndefineElement('uui-tab-group', UUITabGroupElement);\ndefineElement('uui-tab', UUITabElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-tab-group': UUITabGroupElement;\n    'uui-tab': UUITabElement;\n  }\n}\n\nexport * from './tab-group.element.js';\nexport * from './tab.element.js';\nexport * from './UUITabEvent.js';\nexport * from './UUITabGroupEvent.js';\nexport { UUITabGroupElement as default } from './tab-group.element.js';\n"],"names":[],"mappings":";;;AAIA,cAAc,iBAAiB,kBAAkB;AACjD,cAAc,WAAW,aAAa;"}

package/dist/components/tag/tag.d.ts

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

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import type { UUIInterfaceColor, UUIInterfaceLook } from '../../internal/types/index.js';
+/**
+ *
+ *  @element uui-tag
+ *  @description Tag component from Umbraco UI components library. Comes in one shape, but different looks and sizes
+ *  @slot - slot for tag contents
+ *  @cssprop --uui-tag-font-size - overwrite the default font-size for the tag.
+ *  @cssprop --uui-tag-padding - overwrite the default padding size for the tag.
+ *  @cssprop --uui-tag-border-radius - overwrite the default border-radius for the tag.
+ *  @cssprop --uui-tag-border-color - overwrite the default border color for the tag.
+ */
+export declare class UUITagElement extends LitElement {
+    /**
+     * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
+     * @type {"default" | "positive" | "warning" | "danger"}
+     * @attr
+     * @default "default"
+     */
+    color: UUIInterfaceColor;
+    /**
+     * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
+     * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"}
+     * @attr
+     * @default "default"
+     */
+    look: UUIInterfaceLook;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/tag/tag.element.js

@@ -0,0 +1,108 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.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 _UUITagElement = class _UUITagElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.color = "default";
+    this.look = "primary";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUITagElement.styles = [
+  css`
+      :host {
+        display: inline-block;
+        font-size: var(--uui-tag-font-size, var(--uui-type-small-size));
+        font-weight: 700;
+        line-height: 1;
+        padding: var(
+          --uui-tag-padding,
+          var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)
+        );
+        user-select: none;
+        border-radius: var(--uui-tag-border-radius, var(--uui-size-4));
+        border: 1px solid var(--uui-tag-border-color, transparent);
+      }
+
+      slot {
+        display: block;
+        align-content: center;
+        margin: 2px;
+      }
+
+      :host {
+        --color: var(--uui-color-default);
+        --color-standalone: var(--uui-color-default-standalone);
+        --color-contrast: var(--uui-color-default-contrast);
+      }
+      :host([color='positive']) {
+        --color: var(--uui-color-positive);
+        --color-standalone: var(--uui-color-positive-standalone);
+        --color-contrast: var(--uui-color-positive-contrast);
+      }
+      :host([color='warning']) {
+        --color: var(--uui-color-warning);
+        --color-standalone: var(--uui-color-warning-standalone);
+        --color-contrast: var(--uui-color-warning-contrast);
+      }
+      :host([color='danger']) {
+        --color: var(--uui-color-danger);
+        --color-standalone: var(--uui-color-danger-standalone);
+        --color-contrast: var(--uui-color-danger-contrast);
+      }
+      :host([color='invalid']) {
+        --color: var(--uui-color-invalid);
+        --color-standalone: var(--uui-color-invalid-standalone);
+        --color-contrast: var(--uui-color-invalid-contrast);
+      }
+
+      :host {
+        background-color: var(--uui-color-surface);
+        color: var(--color-standalone);
+        border-color: transparent;
+      }
+      :host([look='primary']) {
+        background-color: var(--color);
+        color: var(--color-contrast);
+        border-color: transparent;
+      }
+      :host([look='secondary']) {
+        background-color: var(--uui-color-surface-alt);
+        color: var(--color-standalone);
+        border-color: transparent;
+      }
+      :host([look='outline']) {
+        background-color: transparent;
+        color: var(--color-standalone);
+        border-color: var(--color-standalone);
+      }
+      :host([look='placeholder']) {
+        border-style: dashed;
+        background-color: transparent;
+        color: var(--color-standalone);
+        border-color: var(--uui-color-border-standalone);
+      }
+    `
+];
+let UUITagElement = _UUITagElement;
+__decorateClass([
+  property({ reflect: true })
+], UUITagElement.prototype, "color");
+__decorateClass([
+  property({ reflect: true })
+], UUITagElement.prototype, "look");
+export {
+  UUITagElement
+};
+//# sourceMappingURL=tag.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.element.js","sources":["../../../src/components/tag/tag.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/**\n *\n *  @element uui-tag\n *  @description Tag component from Umbraco UI components library. Comes in one shape, but different looks and sizes\n *  @slot - slot for tag contents\n *  @cssprop --uui-tag-font-size - overwrite the default font-size for the tag.\n *  @cssprop --uui-tag-padding - overwrite the default padding size for the tag.\n *  @cssprop --uui-tag-border-radius - overwrite the default border-radius for the tag.\n *  @cssprop --uui-tag-border-color - overwrite the default border color for the tag.\n */\n\nexport class UUITagElement extends LitElement {\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'primary';\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        font-size: var(--uui-tag-font-size, var(--uui-type-small-size));\n        font-weight: 700;\n        line-height: 1;\n        padding: var(\n          --uui-tag-padding,\n          var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)\n        );\n        user-select: none;\n        border-radius: var(--uui-tag-border-radius, var(--uui-size-4));\n        border: 1px solid var(--uui-tag-border-color, transparent);\n      }\n\n      slot {\n        display: block;\n        align-content: center;\n        margin: 2px;\n      }\n\n      :host {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n\n      :host {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n        border-color: transparent;\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='outline']) {\n        background-color: transparent;\n        color: var(--color-standalone);\n        border-color: var(--color-standalone);\n      }\n      :host([look='placeholder']) {\n        border-style: dashed;\n        background-color: transparent;\n        color: var(--color-standalone);\n        border-color: var(--uui-color-border-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAA2B;AAS3B,SAAA,OAAyB;AAAA,EAAA;AAAA,EAEzB,SAAS;AACP,WAAO;AAAA,EACT;AA8EF;AA5EE,eAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxBG,IAAM,gBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAPhB,cAQX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,cAiBX,WAAA,MAAA;"}

package/dist/components/tag/tag.js

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

package/dist/components/tag/tag.js.map

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

package/dist/components/textarea/UUITextareaEvent.d.ts

@@ -0,0 +1,7 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUITextareaElement } from './textarea.element.js';
+export declare class UUITextareaEvent extends UUIEvent<{}, UUITextareaElement> {
+    static readonly CHANGE: string;
+    static readonly INPUT: string;
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/textarea/UUITextareaEvent.js

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

package/dist/components/textarea/UUITextareaEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUITextareaEvent.js","sources":["../../../src/components/textarea/UUITextareaEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUITextareaElement } from './textarea.element.js';\n\nexport class UUITextareaEvent extends UUIEvent<{}, UUITextareaElement> {\n  public static readonly CHANGE: string = 'change';\n  public static readonly INPUT: string = 'input';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,oBAAN,MAAM,0BAAyB,SAAiC;AAAA,EAIrE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,kBAAuB,SAAiB;AACxC,kBAAuB,QAAgB;AAFlC,IAAM,mBAAN;"}

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,9 @@
+import { UUITextareaElement } from './textarea.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-textarea': UUITextareaElement;
+    }
+}
+export * from './textarea.element.js';
+export * from './UUITextareaEvent.js';
+export { UUITextareaElement as default } from './textarea.element.js';

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

@@ -0,0 +1,124 @@
+import { LitElement } from 'lit';
+declare const UUITextareaElement_base: (new (...args: any[]) => import("../../index.js").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
+/**
+ * @element uui-textarea
+ * @fires UUITextareaEvent#change on change
+ * @fires InputEvent#input on input
+ * @fires KeyboardEvent#keyup on keyup
+ * @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea
+ * @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea
+ * @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea
+ * @cssprop --uui-textarea-font-size - Overwrites the default font size
+ * @extends UUIFormControlMixin
+ */
+export declare class UUITextareaElement extends UUITextareaElement_base {
+    /**
+     * 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;
+    /**
+     * Defines the textarea placeholder.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    placeholder: string;
+    /**
+     * Disables the textarea.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * This is a minimum value of the input.
+     * @type {number}
+     * @attr
+     * @default undefined
+     */
+    minlength?: number;
+    /**
+     * Minlength validation message.
+     * @attr
+     * @default
+     */
+    minlengthMessage: string | ((charsLeft: number) => string);
+    /**
+     * This is a maximum value of the input.
+     * @type {number}
+     * @attr
+     * @default undefined
+     */
+    maxlength?: number;
+    /**
+     * Maxlength validation message.
+     * @attr
+     * @default
+     */
+    maxlengthMessage: string | ((max: number, current: number) => string);
+    protected readonly _textarea: HTMLInputElement;
+    /**
+     * Enables automatic height adjustment. The height will be confined within the min and max height if defined.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    autoHeight: boolean;
+    /**
+     * Label to be used for aria-label and eventually as visual label
+     * @type {string}
+     * @attr
+     */
+    label: string;
+    /**
+     * Sets the number of rows of the textarea
+     * @type {number}
+     * @attr
+     */
+    rows?: number;
+    /**
+     * Sets the number of cols of the textarea
+     * @type {number}
+     * @attr
+     */
+    cols?: number;
+    /**
+     * Indicates how the control should wrap the value for form submission. If this attribute is not specified, soft is its default value.
+     * @type {'soft' | 'hard'}
+     * @attr
+     * @default undefined
+     */
+    wrap?: 'soft' | 'hard';
+    constructor();
+    /**
+     * Override value setter to trigger autoUpdateHeight when value changes
+     */
+    private _autoHeightRafId;
+    set value(newValue: string);
+    get value(): string;
+    connectedCallback(): void;
+    /**
+     * This method enables <label for="..."> to focus the select
+     */
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    /**
+     * This method enables <label for="..."> to open the select
+     */
+    click(): Promise<void>;
+    protected getFormElement(): HTMLElement;
+    private onInput;
+    private onChange;
+    private autoUpdateHeight;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};