@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -1,34 +1,40 @@
-import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.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`
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/tabs/tab.element.ts
+/**
+* A single tab. Should be put into `<uui-tab-group>`,
+* @element uui-tabs
+* @slot - for label
+* @slot icon - for icon
+* @slot extra - for extra
+* @description - All-round tab-button
+* @cssprop --uui-tab-text - Define the tab text color
+* @cssprop --uui-tab-text-hover - Define the tab text hover color
+* @cssprop --uui-tab-text-active - Define the tab text active color
+* @cssprop --uui-tab-divider - Define the tab dividers color
+* @cssprop --uui-tab-padding-horizontal - Define the tab horizontal padding
+*/
+var UUITabElement = class 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)}
@@ -40,18 +46,17 @@ const _UUITabElement = class _UUITabElement extends ActiveMixin(LabelMixin("", L
           <slot name="extra"></slot>
         </a>
       `;
-    }
-    return html`
+		}
+		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`
+	}
+	static {
+		this.styles = [css`
       :host {
         color: var(--uui-tab-text, var(--uui-color-interactive));
         font-family: inherit;
@@ -172,25 +177,30 @@ _UUITabElement.styles = [
       :host([orientation='vertical']) slot.label {
         text-align: left;
       }
-    `
-];
-let UUITabElement = _UUITabElement;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUITabElement.prototype, "disabled");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UUITabElement.prototype, "href");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UUITabElement.prototype, "target");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UUITabElement.prototype, "rel");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UUITabElement.prototype, "orientation");
-export {
-  UUITabElement
+    `];
+	}
 };
-//# sourceMappingURL=tab.element.js.map
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUITabElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUITabElement.prototype, "href", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUITabElement.prototype, "target", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUITabElement.prototype, "rel", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUITabElement.prototype, "orientation", void 0);
+//#endregion
+export { UUITabElement };
+
+//# sourceMappingURL=tab.element.js.map

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

@@ -1 +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, reflect: true })\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, reflect: true })\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, reflect: true })\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,QAAQ,SAAS,MAAM;AAAA,GAhB9B,cAiBJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAzB9B,cA0BJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,cAmCJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA3C9B,cA4CJ,WAAA,aAAA;"}
+{"version":3,"file":"tab.element.js","names":[],"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, reflect: true })\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, reflect: true })\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, reflect: true })\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,IAAa,gBAAb,cAAmC,YAAY,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC;CA8CzE,cAAc;EACZ,MAAM;kBAvCU;qBAoC+B;EAI/C,KAAK,iBAAiB,SAAS,KAAK,WAAW;CACjD;CAEA,YAAoB,GAAe;EACjC,IAAI,KAAK,UAAU;GACjB,EAAE,eAAe;GACjB,EAAE,yBAAyB;EAC7B;CACF;CAEA,SAAS;EACP,IAAI,KAAK,MAAM;GACb,MAAM,MACJ,KAAK,QACJ,KAAK,WAAW,WAAW,wBAAwB,KAAA;GACtD,OAAO,IAAI;;;iBAGA,UAAU,KAAK,WAAW,KAAA,IAAY,KAAK,IAAI,EAAE;mBAC/C,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;gBACvC,UAAU,GAAG,EAAE;;;YAGnB,KAAK,YAAY,EAAE;;;;EAI3B;EACA,OAAO,IAAI;oDACqC,KAAK,SAAS;;UAExD,KAAK,YAAY,EAAE;;;;CAI3B;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0HL;;AACF;YA1MG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;YASxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;YASxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,OAAA,KAAA,CAAA;YASxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA"}

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

@@ -10,4 +10,3 @@ 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

@@ -1,11 +1,12 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUITabGroupElement } from "./tab-group.element.js";
 import { UUITabElement } from "./tab.element.js";
+import { UUITabEvent } from "./UUITabEvent.js";
+import { UUITabGroupEvent } from "./UUITabGroupEvent.js";
+//#region src/components/tabs/tabs.ts
 defineElement("uui-tab-group", UUITabGroupElement);
 defineElement("uui-tab", UUITabElement);
-export {
-  UUITabElement,
-  UUITabGroupElement,
-  UUITabGroupElement as default
-};
-//# sourceMappingURL=tabs.js.map
+//#endregion
+export { UUITabElement, UUITabEvent, UUITabGroupElement, UUITabGroupEvent };
+
+//# sourceMappingURL=tabs.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"tabs.js","names":[],"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';\n"],"mappings":";;;;;;AAIA,cAAc,iBAAiB,kBAAkB;AACjD,cAAc,WAAW,aAAa"}

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

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './tag.element.js';
-export { UUITagElement as default } from './tag.element.js';

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

@@ -1,26 +1,28 @@
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LitElement, css, html } 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`
+//#region src/components/tag/tag.element.ts
+/**
+*
+*  @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.
+*/
+var UUITagElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.color = "default";
+		this.look = "primary";
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-block;
         font-size: var(--uui-tag-font-size, var(--uui-type-small-size));
@@ -94,16 +96,12 @@ _UUITagElement.styles = [
         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
+__decorate([property({ reflect: true })], UUITagElement.prototype, "color", void 0);
+__decorate([property({ reflect: true })], UUITagElement.prototype, "look", void 0);
+//#endregion
+export { UUITagElement };
+
+//# sourceMappingURL=tag.element.js.map

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

@@ -1 +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      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: var(\n          --uui-tag-border-color,\n          var(--uui-color-divider-standalone)\n        );\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;AA+EF;AA7EE,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;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;"}
+{"version":3,"file":"tag.element.js","names":[],"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      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: var(\n          --uui-tag-border-color,\n          var(--uui-color-divider-standalone)\n        );\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"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,gBAAb,cAAmC,WAAW;;;eAQjB;cASF;;CAEzB,SAAS;EACP,OAAO,IAAI;CACb;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2EL;;AACF;YA7FG,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,cAAA,WAAA,SAAA,KAAA,CAAA;YAS1B,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA"}

package/dist/components/tag/tag.js

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

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

@@ -1 +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;"}
+{"version":3,"file":"tag.js","names":[],"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';\n"],"mappings":";;;AAGA,cAAc,WAAW,aAAa"}

package/dist/components/textarea/UUITextareaEvent.js

@@ -1,16 +1,20 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUITextareaEvent = class _UUITextareaEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      ...eventInit
-    });
-  }
+//#region src/components/textarea/UUITextareaEvent.ts
+var UUITextareaEvent = class extends UUIEvent {
+	static {
+		this.CHANGE = "change";
+	}
+	static {
+		this.INPUT = "input";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			...eventInit
+		});
+	}
 };
-_UUITextareaEvent.CHANGE = "change";
-_UUITextareaEvent.INPUT = "input";
-let UUITextareaEvent = _UUITextareaEvent;
-export {
-  UUITextareaEvent
-};
-//# sourceMappingURL=UUITextareaEvent.js.map
+//#endregion
+export { UUITextareaEvent };
+
+//# sourceMappingURL=UUITextareaEvent.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"UUITextareaEvent.js","names":[],"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"],"mappings":";;AAGA,IAAa,mBAAb,cAAsC,SAAiC;;gBAC7B;;;eACD;;CAEvC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

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

@@ -6,4 +6,3 @@ declare global {
 }
 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

@@ -8,7 +8,9 @@ declare const UUITextareaElement_base: (new (...args: any[]) => import("../../in
  * @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 {color} --uui-textarea-border-color-hover - Sets the border color of the textarea when hovered
  * @cssprop --uui-textarea-font-size - Overwrites the default font size
+ * @cssprop --uui-textarea-padding - Overwrites the default padding
  * @extends UUIFormControlMixin
  */
 export declare class UUITextareaElement extends UUITextareaElement_base {