npm - @umbraco-ui/uui - Versions diffs - 2.0.0-alpha.1 → 2.0.0-rc.0 - Mend

@umbraco-ui/uui 2.0.0-alpha.1 → 2.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (96) hide show

package/custom-elements.json CHANGED Viewed

@@ -754,10 +754,6 @@
           "name": "--uui-button-content-align",
           "description": "Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'."
         },
-        {
-          "name": "--uui-button-transition",
-          "description": "Add transition to the button. Default is none."
-        },
         {
           "name": "--uui-focus-outline-color",
           "description": "overwrite the focus outline color"
@@ -1224,10 +1220,6 @@
           "name": "--uui-button-content-align",
           "description": "Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'."
         },
-        {
-          "name": "--uui-button-transition",
-          "description": "Add transition to the button. Default is none."
-        },
         {
           "name": "--uui-focus-outline-color",
           "description": "overwrite the focus outline color"
@@ -2984,6 +2976,11 @@
       "name": "uui-combobox-list-option",
       "path": "./src/components/combobox-list/combobox-list-option.element.ts",
       "attributes": [
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "value",
           "description": "Value of the option.",
@@ -3022,6 +3019,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -3103,6 +3106,11 @@
           "type": "string",
           "default": "\"\\\"\\\"\""
         },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "for",
           "description": "provide another element of which keyboard navigation",
@@ -3125,6 +3133,12 @@
           "type": "string",
           "default": "\"\\\"\\\"\""
         },
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "for",
           "attribute": "for",
@@ -3132,6 +3146,16 @@
           "type": "HTMLElement",
           "default": "\"this\""
         },
+        {
+          "name": "selectedValues",
+          "description": "Array of selected option values. Only relevant when multiple is true.",
+          "type": "string[]"
+        },
+        {
+          "name": "selectedDisplayValues",
+          "description": "Array of display values for selected options. Only relevant when multiple is true.",
+          "type": "string[]"
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -3179,6 +3203,12 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "multiple",
+          "description": "Enables multiple selection mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "hide-expand-symbol",
           "description": "Removes the expand symbol.",
@@ -3269,6 +3299,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Enables multiple selection mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "hideExpandSymbol",
           "attribute": "hide-expand-symbol",

package/dist/components/avatar/avatar.element.js CHANGED Viewed

@@ -53,6 +53,7 @@ const _UUIAvatarElement = class _UUIAvatarElement extends LitElement {
   }
   renderImage() {
     return html` <img
+      decoding="async"
       src="${this.imgSrc}"
       srcset="${this.imgSrcset}"
       alt="${this._initials}"

package/dist/components/avatar/avatar.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.element.js","sources":["../../../src/components/avatar/avatar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\n/*\n Avatar for displaying users\n * @element uui-avatar\n * @slot - For anything other than initials (no more than 2-3 characters)\n /\nexport class UUIAvatarElement extends LitElement {\n /\n Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n * @type {boolean}\n * @attr overflow\n * @default true\n /\n @property({ type: Boolean, attribute: true, reflect: true })\n public overflow = true;\n\n /\n Use this to apply a image src\n * @type {string}\n * @attr img-src\n * @default ''\n /\n @property({ type: String, attribute: 'img-src' })\n public imgSrc = '';\n\n /\n Use this to apply a image srcset\n * @type {string}\n * @attr img-srcset\n * @default ''\n /\n @property({ type: String, attribute: 'img-srcset' })\n public imgSrcset = '';\n\n /\n Provide the name used for labels and to generate the initials.\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String, reflect: true })\n name = '';\n\n /\n Use this to override the initials generated from the name.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String })\n initials?: string;\n\n private get _initials() {\n return this.initials?.substring(0, 3) \|\| this.createInitials(this.name);\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.name) {\n console.warn(this.tagName + ' needs a `name`', this);\n }\n }\n\n private createInitials(name: string) {\n let initials = '';\n\n if (!name) {\n return initials;\n }\n\n // Split by whitespace and filter out parts that start with special characters or emojis\n // This filters out parts beginning with punctuation (like parentheses, brackets, @ symbols)\n // and emojis, while keeping parts that start with letters or numbers\n const nameParts = name\n .split(/\\s+/)\n .filter(part => part.length > 0 && !/^[^\\p{L}\\p{N}]/u.test(part));\n\n // If no valid letter/number parts, check if we have emojis or other pictographic content\n if (nameParts.length === 0) {\n const trimmedName = name.trim();\n // Only render content if it contains emojis/pictographs, not just punctuation\n // Limit to the first emoji to avoid overflow in small avatars\n if (\n trimmedName.length > 0 &&\n /\\p{Extended_Pictographic}/u.test(trimmedName)\n ) {\n // Split by spaces and get the first part that contains an emoji\n const parts = trimmedName.split(/\\s+/);\n for (const part of parts) {\n if (/\\p{Extended_Pictographic}/u.test(part)) {\n return part;\n }\n }\n }\n return initials;\n }\n\n // Take first character of the first valid name part\n initials = nameParts[0].charAt(0);\n\n // If there's more than one valid name part, add the first character of the last valid name part\n if (nameParts.length > 1) {\n initials += nameParts.at(-1)!.charAt(0);\n }\n\n return initials.toUpperCase();\n }\n\n private renderImage() {\n return html` <img\n src=\"${this.imgSrc}\"\n srcset=\"${this.imgSrcset}\"\n alt=\"${this._initials}\"\n title=\"${this.name}\" />`;\n }\n\n render() {\n return html`\n ${when(\n this.imgSrc,\n () => this.renderImage(),\n () => this._initials,\n )}\n <slot></slot>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n overflow: hidden;\n border-radius: 50%;\n font-weight: 700;\n -webkit-font-smoothing: subpixel-antialiased;\n width: calc(2em + 4px);\n height: calc(2em + 4px);\n user-select: none;\n / box-sizing: border-box; */\n aspect-ratio: 1;\n box-shadow: 0 0 0 1.5px var(--uui-color-border);\n }\n\n :host([overflow]) {\n overflow: unset;\n }\n\n img {\n object-fit: cover;\n height: 100%;\n width: 100%;\n overflow: hidden;\n border-radius: 50%;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AASO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,WAAW;AASlB,SAAO,SAAS;AAShB,SAAO,YAAY;AASnB,SAAA,OAAO;AAAA,EAAA;AAAA,EAWP,IAAY,YAAY;AACtB,WAAO,KAAK,UAAU,UAAU,GAAG,CAAC,KAAK,KAAK,eAAe,KAAK,IAAI;AAAA,EACxE;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,MAAM;AACd,cAAQ,KAAK,KAAK,UAAU,mBAAmB,IAAI;AAAA,IACrD;AAAA,EACF;AAAA,EAEQ,eAAe,MAAc;AACnC,QAAI,WAAW;AAEf,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAKA,UAAM,YAAY,KACf,MAAM,KAAK,EACX,OAAO,CAAA,SAAQ,KAAK,SAAS,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;AAGlE,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,cAAc,KAAK,KAAA;AAGzB,UACE,YAAY,SAAS,KACrB,WAAA,8BAAA,GAAA,EAA6B,KAAK,WAAW,GAC7C;AAEA,cAAM,QAAQ,YAAY,MAAM,KAAK;AACrC,mBAAW,QAAQ,OAAO;AACxB,cAAI,WAAA,8BAAA,GAAA,EAA6B,KAAK,IAAI,GAAG;AAC3C,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAGA,eAAW,UAAU,CAAC,EAAE,OAAO,CAAC;AAGhC,QAAI,UAAU,SAAS,GAAG;AACxB,kBAAY,UAAU,GAAG,EAAE,EAAG,OAAO,CAAC;AAAA,IACxC;AAEA,WAAO,SAAS,YAAA;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,WAAO;AAAA,~~aACE~~,KAAK,MAAM;AAAA,gBACR,KAAK,SAAS;AAAA,aACjB,KAAK,SAAS;AAAA,eACZ,KAAK,IAAI;AAAA,EACtB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH;AAAA,MACA,KAAK;AAAA,MACL,MAAM,KAAK,YAAA;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAAA;AAAA;AAAA,EAGL;AAmCF;AAjCE,kBAAyB,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;~~AA1HG~~,IAAM,mBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,MAAM,SAAS,MAAM;AAAA,GAPhD,iBAQJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GAhBrC,iBAiBJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAzBxC,iBA0BJ,WAAA,WAAA;AASP,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,iBAmCX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Cf,iBA4CX,WAAA,UAAA;"}
1	+ {"version":3,"file":"avatar.element.js","sources":["../../../src/components/avatar/avatar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\n/*\n Avatar for displaying users\n * @element uui-avatar\n * @slot - For anything other than initials (no more than 2-3 characters)\n /\nexport class UUIAvatarElement extends LitElement {\n /\n Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n * @type {boolean}\n * @attr overflow\n * @default true\n /\n @property({ type: Boolean, attribute: true, reflect: true })\n public overflow = true;\n\n /\n Use this to apply a image src\n * @type {string}\n * @attr img-src\n * @default ''\n /\n @property({ type: String, attribute: 'img-src' })\n public imgSrc = '';\n\n /\n Use this to apply a image srcset\n * @type {string}\n * @attr img-srcset\n * @default ''\n /\n @property({ type: String, attribute: 'img-srcset' })\n public imgSrcset = '';\n\n /\n Provide the name used for labels and to generate the initials.\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String, reflect: true })\n name = '';\n\n /\n Use this to override the initials generated from the name.\n * @type {string}\n * @attr\n * @default undefined\n /\n @property({ type: String })\n initials?: string;\n\n private get _initials() {\n return this.initials?.substring(0, 3) \|\| this.createInitials(this.name);\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.name) {\n console.warn(this.tagName + ' needs a `name`', this);\n }\n }\n\n private createInitials(name: string) {\n let initials = '';\n\n if (!name) {\n return initials;\n }\n\n // Split by whitespace and filter out parts that start with special characters or emojis\n // This filters out parts beginning with punctuation (like parentheses, brackets, @ symbols)\n // and emojis, while keeping parts that start with letters or numbers\n const nameParts = name\n .split(/\\s+/)\n .filter(part => part.length > 0 && !/^[^\\p{L}\\p{N}]/u.test(part));\n\n // If no valid letter/number parts, check if we have emojis or other pictographic content\n if (nameParts.length === 0) {\n const trimmedName = name.trim();\n // Only render content if it contains emojis/pictographs, not just punctuation\n // Limit to the first emoji to avoid overflow in small avatars\n if (\n trimmedName.length > 0 &&\n /\\p{Extended_Pictographic}/u.test(trimmedName)\n ) {\n // Split by spaces and get the first part that contains an emoji\n const parts = trimmedName.split(/\\s+/);\n for (const part of parts) {\n if (/\\p{Extended_Pictographic}/u.test(part)) {\n return part;\n }\n }\n }\n return initials;\n }\n\n // Take first character of the first valid name part\n initials = nameParts[0].charAt(0);\n\n // If there's more than one valid name part, add the first character of the last valid name part\n if (nameParts.length > 1) {\n initials += nameParts.at(-1)!.charAt(0);\n }\n\n return initials.toUpperCase();\n }\n\n private renderImage() {\n return html` <img\n decoding=\"async\"\n src=\"${this.imgSrc}\"\n srcset=\"${this.imgSrcset}\"\n alt=\"${this._initials}\"\n title=\"${this.name}\" />`;\n }\n\n render() {\n return html`\n ${when(\n this.imgSrc,\n () => this.renderImage(),\n () => this._initials,\n )}\n <slot></slot>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n overflow: hidden;\n border-radius: 50%;\n font-weight: 700;\n -webkit-font-smoothing: subpixel-antialiased;\n width: calc(2em + 4px);\n height: calc(2em + 4px);\n user-select: none;\n / box-sizing: border-box; */\n aspect-ratio: 1;\n box-shadow: 0 0 0 1.5px var(--uui-color-border);\n }\n\n :host([overflow]) {\n overflow: unset;\n }\n\n img {\n object-fit: cover;\n height: 100%;\n width: 100%;\n overflow: hidden;\n border-radius: 50%;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AASO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,WAAW;AASlB,SAAO,SAAS;AAShB,SAAO,YAAY;AASnB,SAAA,OAAO;AAAA,EAAA;AAAA,EAWP,IAAY,YAAY;AACtB,WAAO,KAAK,UAAU,UAAU,GAAG,CAAC,KAAK,KAAK,eAAe,KAAK,IAAI;AAAA,EACxE;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,MAAM;AACd,cAAQ,KAAK,KAAK,UAAU,mBAAmB,IAAI;AAAA,IACrD;AAAA,EACF;AAAA,EAEQ,eAAe,MAAc;AACnC,QAAI,WAAW;AAEf,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAKA,UAAM,YAAY,KACf,MAAM,KAAK,EACX,OAAO,CAAA,SAAQ,KAAK,SAAS,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;AAGlE,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,cAAc,KAAK,KAAA;AAGzB,UACE,YAAY,SAAS,KACrB,WAAA,8BAAA,GAAA,EAA6B,KAAK,WAAW,GAC7C;AAEA,cAAM,QAAQ,YAAY,MAAM,KAAK;AACrC,mBAAW,QAAQ,OAAO;AACxB,cAAI,WAAA,8BAAA,GAAA,EAA6B,KAAK,IAAI,GAAG;AAC3C,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAGA,eAAW,UAAU,CAAC,EAAE,OAAO,CAAC;AAGhC,QAAI,UAAU,SAAS,GAAG;AACxB,kBAAY,UAAU,GAAG,EAAE,EAAG,OAAO,CAAC;AAAA,IACxC;AAEA,WAAO,SAAS,YAAA;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,WAAO;AAAA;AAAA,aAEE,KAAK,MAAM;AAAA,gBACR,KAAK,SAAS;AAAA,aACjB,KAAK,SAAS;AAAA,eACZ,KAAK,IAAI;AAAA,EACtB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH;AAAA,MACA,KAAK;AAAA,MACL,MAAM,KAAK,YAAA;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAAA;AAAA;AAAA,EAGL;AAmCF;AAjCE,kBAAyB,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;AA3HG,IAAM,mBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,MAAM,SAAS,MAAM;AAAA,GAPhD,iBAQJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GAhBrC,iBAiBJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAzBxC,iBA0BJ,WAAA,WAAA;AASP,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,iBAmCX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Cf,iBA4CX,WAAA,UAAA;"}

package/dist/components/boolean-input/boolean-input.element.js CHANGED Viewed

@@ -7,6 +7,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _UUIBooleanInputElement_instances, onKeyDown_fn;
 import { LitElement, html, css } from "lit";
 import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { UUIBooleanInputEvent } from "./UUIBooleanInputEvent.js";
 import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
@@ -102,7 +103,12 @@ const _UUIBooleanInputElement = class _UUIBooleanInputElement extends UUIFormCon
           .checked=${this.checked}
           .indeterminate=${this.indeterminate}
           aria-checked="${this.checked ? "true" : "false"}"
-          aria-label=${this.label}
+          aria-label=${ifDefined(
+      this.getAttribute("aria-label") || this.label || void 0
+    )}
+          aria-labelledby=${ifDefined(
+      this.getAttribute("aria-labelledby") || void 0
+    )}
           role="${this.inputRole}" />
         ${this.renderCheckbox()} ${this.renderLabel()}
       </label>

package/dist/components/boolean-input/boolean-input.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"boolean-input.element.js","sources":["../../../src/components/boolean-input/boolean-input.element.ts"],"sourcesContent":["import {\n UUIFormControlWithBasicsMixin,\n LabelMixin,\n} from '../../internal/mixins/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { UUIBooleanInputEvent } from './UUIBooleanInputEvent.js';\n\ntype LabelPosition = 'left' \| 'right' \| 'top' \| 'bottom';\n\n/*\n Base class wrapping native input type=\"checkbox\". Extend for custom boolean input.\n * @extends LabelMixin\n * @fires UUIBooleanInputEvent#change on change\n * @abstract\n /\nexport abstract class UUIBooleanInputElement extends UUIFormControlWithBasicsMixin(\n LabelMixin('', LitElement),\n '',\n) {\n private _value = '';\n\n /* intentional overwrite of FormControlMixins value getter and setter method. /\n get value() {\n return this._value;\n }\n set value(newVal: string) {\n const oldValue = super.value;\n this._value = newVal;\n this._internals.setFormValue(\n this._checked && this.name !== '' ? this._value : null,\n );\n\n this.requestUpdate('value', oldValue);\n }\n\n /\n Specifies the label position of the checkbox or the toggle\n * @type {'left' \| 'right' \| 'top' \| 'bottom'}\n * @attr label-position\n * @default right\n /\n @property({ type: String, attribute: 'label-position', reflect: true })\n labelPosition: LabelPosition = 'right';\n\n private _checked = false;\n\n /\n Reflects the state of the element.\n * True if checkbox or toggle is checked. Change this to switch the state programmatically.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean }) // Do not 'reflect' as the attribute is used as fallback.\n get checked() {\n return this._checked;\n }\n set checked(newVal) {\n const oldValue = this._checked;\n this._checked = newVal;\n this._internals.setFormValue(\n this._checked && this.name !== '' ? this._value \|\| 'on' : null,\n );\n this.requestUpdate('checked', oldValue);\n }\n\n /\n Indeterminate state for the input.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /\n Disables the input.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @query('#input')\n protected readonly _input!: HTMLInputElement;\n\n private readonly inputRole: 'checkbox' \| 'switch';\n\n constructor(inputRole: 'checkbox' \| 'switch' = 'checkbox') {\n super();\n if (this._value === '') {\n this._value = 'on';\n }\n this.inputRole = inputRole;\n this.addEventListener('keydown', this.#onKeyDown);\n }\n\n protected getFormElement(): HTMLInputElement {\n return this._input;\n }\n\n #onKeyDown(e: KeyboardEvent): void {\n if (e.key == 'Enter') {\n this.submit();\n }\n }\n\n public hasValue(): boolean {\n return this.checked;\n }\n\n public formResetCallback() {\n super.formResetCallback();\n this.checked = this.hasAttribute('checked');\n }\n\n /\n This method enables <label for=\"...\"> to focus the input\n /\n async focus() {\n await this.updateComplete;\n this._input.focus();\n }\n async click() {\n await this.updateComplete;\n this._input.click();\n }\n\n private _onInputChange(e: Event) {\n e.stopPropagation();\n this.pristine = false;\n this.checked = this._input.checked;\n this.indeterminate = this._input.indeterminate;\n this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));\n }\n\n /\n When extending UUIBooleanInputBase class you need to implement this abstract method. It should return a template of your input.\n * @returns {TemplateResult}\n * @abstract\n * @method\n */\n protected abstract renderCheckbox(): TemplateResult;\n\n render() {\n return html`\n <label>\n <input\n id=\"input\"\n type=\"checkbox\"\n @change=\"${this._onInputChange}\"\n .disabled=${this.disabled \|\| this.readonly}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n aria-checked=\"${this.checked ? 'true' : 'false'}\"\n aria-label=${this.label}\n role=\"${this.inputRole}\" />\n ${this.renderCheckbox()} ${this.renderLabel()}\n </label>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-block;\n }\n\n label {\n position: relative;\n cursor: pointer;\n user-select: none;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-items: center;\n gap: var(--uui-size-3);\n }\n\n :host([readonly]) label {\n cursor: default;\n }\n\n input {\n position: absolute;\n height: 0px;\n width: 0px;\n opacity: 0;\n }\n\n :host([label-position='left']) label {\n flex-direction: row-reverse;\n }\n\n :host([label-position='top']) label {\n gap: var(--uui-size-half-base-unit);\n flex-direction: column-reverse;\n }\n\n :host([label-position='bottom']) label {\n gap: var(--uui-size-half-base-unit);\n flex-direction: column;\n }\n\n :host([disabled]) label {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .label {\n display: block;\n }\n\n span.label:empty {\n display: none;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;AAkBO~~,MAAe,0BAAf,MAAe,gCAA+B;AAAA,EACnD,WAAW,IAAI,UAAU;AAAA,EACzB;AACF,EAAE;AAAA,EAgFA,YAAY,YAAmC,YAAY;AACzD,UAAA;AApFG;AAIL,SAAQ,SAAS;AAuBjB,SAAA,gBAA+B;AAE/B,SAAQ,WAAW;AA6BnB,SAAA,gBAAgB;AAShB,SAAA,WAAW;AASX,SAAA,WAAW;AAST,QAAI,KAAK,WAAW,IAAI;AACtB,WAAK,SAAS;AAAA,IAChB;AACA,SAAK,YAAY;AACjB,SAAK,iBAAiB,WAAW,sBAAK,gDAAU;AAAA,EAClD;AAAA;AAAA,EAnFA,IAAI,QAAQ;AACV,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,MAAM,QAAgB;AACxB,UAAM,WAAW,MAAM;AACvB,SAAK,SAAS;AACd,SAAK,WAAW;AAAA,MACd,KAAK,YAAY,KAAK,SAAS,KAAK,KAAK,SAAS;AAAA,IAAA;AAGpD,SAAK,cAAc,SAAS,QAAQ;AAAA,EACtC;AAAA;AAAA,EAqBA,IAAI,UAAU;AACZ,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,QAAQ,QAAQ;AAClB,UAAM,WAAW,KAAK;AACtB,SAAK,WAAW;AAChB,SAAK,WAAW;AAAA,MACd,KAAK,YAAY,KAAK,SAAS,KAAK,KAAK,UAAU,OAAO;AAAA,IAAA;AAE5D,SAAK,cAAc,WAAW,QAAQ;AAAA,EACxC;AAAA,EA2CU,iBAAmC;AAC3C,WAAO,KAAK;AAAA,EACd;AAAA,EAQO,WAAoB;AACzB,WAAO,KAAK;AAAA,EACd;AAAA,EAEO,oBAAoB;AACzB,UAAM,kBAAA;AACN,SAAK,UAAU,KAAK,aAAa,SAAS;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QAAQ;AACZ,UAAM,KAAK;AACX,SAAK,OAAO,MAAA;AAAA,EACd;AAAA,EACA,MAAM,QAAQ;AACZ,UAAM,KAAK;AACX,SAAK,OAAO,MAAA;AAAA,EACd;AAAA,EAEQ,eAAe,GAAU;AAC/B,MAAE,gBAAA;AACF,SAAK,WAAW;AAChB,SAAK,UAAU,KAAK,OAAO;AAC3B,SAAK,gBAAgB,KAAK,OAAO;AACjC,SAAK,cAAc,IAAI,qBAAqB,qBAAqB,MAAM,CAAC;AAAA,EAC1E;AAAA,EAUA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,cAAc;AAAA,sBAClB,KAAK,YAAY,KAAK,QAAQ;AAAA,qBAC/B,KAAK,OAAO;AAAA,2BACN,KAAK,aAAa;AAAA,0BACnB,KAAK,UAAU,SAAS,OAAO;AAAA,uBAClC,KAAK,KAAK;AAAA,~~kBACf~~,KAAK,SAAS;AAAA,UACtB,KAAK,eAAA,CAAgB,IAAI,KAAK,aAAa;AAAA;AAAA;AAAA,EAGnD;AA0DF;~~AArNO~~;AAgGL,wBAAW,GAAwB;AACjC,MAAI,EAAE,OAAO,SAAS;AACpB,SAAK,OAAA;AAAA,EACP;AACF;~~AAyDA~~,wBAAyB,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;~~AA9JG~~,IAAe,yBAAf;AA2BL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,SAAS,MAAM;AAAA,GA1BlD,uBA2BpB,WAAA,iBAAA,CAAA;AAYI,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAtCP,uBAuChB,WAAA,WAAA,CAAA;AAmBJ,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzDtB,uBA0DpB,WAAA,iBAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlEtB,uBAmEpB,WAAA,YAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA3EtB,uBA4EpB,WAAA,YAAA,CAAA;AAGmB,gBAAA;AAAA,EADlB,MAAM,QAAQ;AAAA,GA9EK,uBA+ED,WAAA,UAAA,CAAA;"}
1	+ {"version":3,"file":"boolean-input.element.js","sources":["../../../src/components/boolean-input/boolean-input.element.ts"],"sourcesContent":["import {\n UUIFormControlWithBasicsMixin,\n LabelMixin,\n} from '../../internal/mixins/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { UUIBooleanInputEvent } from './UUIBooleanInputEvent.js';\n\ntype LabelPosition = 'left' \| 'right' \| 'top' \| 'bottom';\n\n/*\n Base class wrapping native input type=\"checkbox\". Extend for custom boolean input.\n * @extends LabelMixin\n * @fires UUIBooleanInputEvent#change on change\n * @abstract\n /\nexport abstract class UUIBooleanInputElement extends UUIFormControlWithBasicsMixin(\n LabelMixin('', LitElement),\n '',\n) {\n private _value = '';\n\n /* intentional overwrite of FormControlMixins value getter and setter method. /\n get value() {\n return this._value;\n }\n set value(newVal: string) {\n const oldValue = super.value;\n this._value = newVal;\n this._internals.setFormValue(\n this._checked && this.name !== '' ? this._value : null,\n );\n\n this.requestUpdate('value', oldValue);\n }\n\n /\n Specifies the label position of the checkbox or the toggle\n * @type {'left' \| 'right' \| 'top' \| 'bottom'}\n * @attr label-position\n * @default right\n /\n @property({ type: String, attribute: 'label-position', reflect: true })\n labelPosition: LabelPosition = 'right';\n\n private _checked = false;\n\n /\n Reflects the state of the element.\n * True if checkbox or toggle is checked. Change this to switch the state programmatically.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean }) // Do not 'reflect' as the attribute is used as fallback.\n get checked() {\n return this._checked;\n }\n set checked(newVal) {\n const oldValue = this._checked;\n this._checked = newVal;\n this._internals.setFormValue(\n this._checked && this.name !== '' ? this._value \|\| 'on' : null,\n );\n this.requestUpdate('checked', oldValue);\n }\n\n /\n Indeterminate state for the input.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n /\n Disables the input.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @query('#input')\n protected readonly _input!: HTMLInputElement;\n\n private readonly inputRole: 'checkbox' \| 'switch';\n\n constructor(inputRole: 'checkbox' \| 'switch' = 'checkbox') {\n super();\n if (this._value === '') {\n this._value = 'on';\n }\n this.inputRole = inputRole;\n this.addEventListener('keydown', this.#onKeyDown);\n }\n\n protected getFormElement(): HTMLInputElement {\n return this._input;\n }\n\n #onKeyDown(e: KeyboardEvent): void {\n if (e.key == 'Enter') {\n this.submit();\n }\n }\n\n public hasValue(): boolean {\n return this.checked;\n }\n\n public formResetCallback() {\n super.formResetCallback();\n this.checked = this.hasAttribute('checked');\n }\n\n /\n This method enables <label for=\"...\"> to focus the input\n /\n async focus() {\n await this.updateComplete;\n this._input.focus();\n }\n async click() {\n await this.updateComplete;\n this._input.click();\n }\n\n private _onInputChange(e: Event) {\n e.stopPropagation();\n this.pristine = false;\n this.checked = this._input.checked;\n this.indeterminate = this._input.indeterminate;\n this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));\n }\n\n /\n When extending UUIBooleanInputBase class you need to implement this abstract method. It should return a template of your input.\n * @returns {TemplateResult}\n * @abstract\n * @method\n */\n protected abstract renderCheckbox(): TemplateResult;\n\n render() {\n return html`\n <label>\n <input\n id=\"input\"\n type=\"checkbox\"\n @change=\"${this._onInputChange}\"\n .disabled=${this.disabled \|\| this.readonly}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n aria-checked=\"${this.checked ? 'true' : 'false'}\"\n aria-label=${ifDefined(\n this.getAttribute('aria-label') \|\| this.label \|\| undefined,\n )}\n aria-labelledby=${ifDefined(\n this.getAttribute('aria-labelledby') \|\| undefined,\n )}\n role=\"${this.inputRole}\" />\n ${this.renderCheckbox()} ${this.renderLabel()}\n </label>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-block;\n }\n\n label {\n position: relative;\n cursor: pointer;\n user-select: none;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-items: center;\n gap: var(--uui-size-3);\n }\n\n :host([readonly]) label {\n cursor: default;\n }\n\n input {\n position: absolute;\n height: 0px;\n width: 0px;\n opacity: 0;\n }\n\n :host([label-position='left']) label {\n flex-direction: row-reverse;\n }\n\n :host([label-position='top']) label {\n gap: var(--uui-size-half-base-unit);\n flex-direction: column-reverse;\n }\n\n :host([label-position='bottom']) label {\n gap: var(--uui-size-half-base-unit);\n flex-direction: column;\n }\n\n :host([disabled]) label {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .label {\n display: block;\n }\n\n span.label:empty {\n display: none;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/button/button.element.d.ts CHANGED Viewed

@@ -30,7 +30,6 @@ declare const UUIButtonElement_base: (new (...args: any[]) => import("../../inde
  *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state
  *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
  *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
- *  @cssprop --uui-button-transition - Add transition to the button. Default is none.
  *  @cssprop --uui-focus-outline-color - overwrite the focus outline color
  */
 export declare class UUIButtonElement extends UUIButtonElement_base {

package/dist/components/button/button.element.js CHANGED Viewed

@@ -6,6 +6,39 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _resetStateTimeout;
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import { iconWrong } from "../icon-registry-essential/svgs/iconWrong.js";
 import { nothing, html, css, LitElement } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -14,8 +47,6 @@ import "../loader-circle/loader-circle.js";
 import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
 import { PopoverTargetMixin } from "../../internal/mixins/PopoverTargetMixin.js";
-import { iconWrong } from "../icon-registry-essential/svgs/iconWrong.js";
-import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
 import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -116,7 +147,12 @@ const _UUIButtonElement = class _UUIButtonElement extends UUIFormControlWithBasi
       return html`
         <a
           id="button"
-          aria-label=${ifDefined(this.label)}
+          aria-label=${ifDefined(
+        this.getAttribute("aria-label") || this.label || void 0
+      )}
+          aria-labelledby=${ifDefined(
+        this.getAttribute("aria-labelledby") || void 0
+      )}
           title=${ifDefined(this.title === "" ? void 0 : this.title)}
           href=${ifDefined(this.disabled ? void 0 : this.href)}
           target=${ifDefined(this.target || void 0)}
@@ -131,7 +167,12 @@ const _UUIButtonElement = class _UUIButtonElement extends UUIFormControlWithBasi
         id="button"
         type=${this.type}
         ?disabled=${this.disabled}
-        aria-label=${ifDefined(this.label)}
+        aria-label=${ifDefined(
+      this.getAttribute("aria-label") || this.label || void 0
+    )}
+        aria-labelledby=${ifDefined(
+      this.getAttribute("aria-labelledby") || void 0
+    )}
         title=${ifDefined(this.title === "" ? void 0 : this.title)}>
         ${this.renderState()} ${this.renderLabel()}
         <slot name="extra"></slot>
@@ -234,7 +275,10 @@ _UUIButtonElement.styles = [
         box-shadow: none;
-        transition: var(--uui-button-transition, none);
+        transition:
+          background-color 60ms,
+          color 60ms,
+          border-color 60ms;
       }
       #button:focus-visible {
@@ -297,6 +341,15 @@ _UUIButtonElement.styles = [
       /** Button color attribute: */
       #button {
+        --color: var(--uui-color-interactive);
+        --color-standalone: var(--uui-color-interactive);
+        --color-emphasis: var(--uui-color-interactive-emphasis);
+        --color-contrast: var(--uui-color-interactive-contrast);
+      }
+      /* PRIMARY — DEFAULT */
+      :host([look='primary']:not([color])) #button,
+      :host([look='primary'][color='']) #button,
+      :host([look='primary'][color='default']) #button {
         --color: var(--uui-color-default);
         --color-standalone: var(--uui-color-default-standalone);
         --color-emphasis: var(--uui-color-default-emphasis);
@@ -343,10 +396,7 @@ _UUIButtonElement.styles = [
         border-color: var(--uui-button-border-color, transparent);
       }
       :host(:not([disabled]):hover) #button {
-        background-color: var(
-          --uui-button-background-color-hover,
-          var(--uui-color-surface-emphasis)
-        );
+        background-color: var(--uui-button-background-color-hover, transparent);
         color: var(--uui-button-contrast-hover, var(--color-standalone));
         border-color: var(--uui-button-border-color-hover, transparent);
       }
@@ -364,9 +414,8 @@ _UUIButtonElement.styles = [
         background-color: var(--uui-button-background-color, var(--color));
         color: var(--uui-button-contrast, var(--color-contrast));
         border-color: var(--uui-button-border-color, transparent);
-        /* special for primary: */
-        font-weight: var(--uui-button-font-weight, 400);
+        /** makes font slightly bolder */
+        text-shadow: 0 0 currentColor;
       }
       :host([look='primary']:hover) #button {
@@ -391,6 +440,7 @@ _UUIButtonElement.styles = [
         color: var(--uui-button-contrast-disabled, var(--color-contrast));
         border-color: var(--uui-button-border-color-disabled, var(--color));
       }
       /* SECONDARY */
       :host([look='secondary']) #button {
         background-color: var(
@@ -399,9 +449,8 @@ _UUIButtonElement.styles = [
         );
         color: var(--uui-button-contrast, var(--color-standalone));
         border-color: var(--uui-button-border-color, transparent);
-        /* special for secondary: */
-        font-weight: var(--uui-button-font-weight, 400);
+        /** makes font slightly bolder */
+        text-shadow: 0 0 currentColor;
       }
       :host([look='secondary']:hover) #button {
         background-color: var(
@@ -428,9 +477,6 @@ _UUIButtonElement.styles = [
           --uui-button-border-color,
           var(--uui-color-border-standalone)
         );
-        /* special for outline: */
-        font-weight: var(--uui-button-font-weight, 400);
       }
       :host([look='outline']:not([disabled]):hover) #button {
         background-color: var(--uui-button-background-color-hover, transparent);

package/dist/components/button/button.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.element.js","sources":["../../../src/components/button/button.element.ts"],"sourcesContent":["import {\n UUIHorizontalShakeAnimationValue,\n UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport {\n LabelMixin,\n PopoverTargetMixin,\n UUIFormControlWithBasicsMixin,\n} from '../../internal/mixins/index.js';\nimport { iconCheck, iconWrong } from '../icon-registry-essential/svgs/index.js';\nimport type {\n UUIInterfaceColor,\n UUIInterfaceLook,\n} from '../../internal/types/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\nimport '../loader-circle/loader-circle.js';\n\nexport type UUIButtonState = undefined \| 'waiting' \| 'success' \| 'failed';\n\nexport type UUIButtonType = 'submit' \| 'button' \| 'reset';\n\n/*\n @element uui-button\n * @fires {UUIButtonEvent} click - fires when the element is clicked\n * @slot - for default content\n * @slot label - for label content\n * @slot extra - for extra\n * @property {string} label - label to be used for aria-label and potentially as visual label for some components\n * @attribute label - label to be used for aria-label and potentially as visual label for some components\n * @description - All-around button\n * @cssprop --uui-button-height - overwrite the button height\n * @cssprop --uui-button-border-width - overwrite the border width\n * @cssprop --uui-button-border-radius - overwrite the border radius\n * @cssprop --uui-button-font-weight - overwrite the font weight\n * @cssprop --uui-button-font-size - overwrite the font size\n * @cssprop --uui-button-background-color - overwrite the background color\n * @cssprop --uui-button-background-color-hover - overwrite the background color for hover state\n * @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state\n * @cssprop --uui-button-border-color - overwrite the border color\n * @cssprop --uui-button-border-color-hover - overwrite the border color for hover state\n * @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state\n * @cssprop --uui-button-contrast - overwrite the text color\n * @cssprop --uui-button-contrast-hover - overwrite the text color for hover state\n * @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state\n * @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.\n * @cssprop --uui-button-transition - Add transition to the button. Default is none.\n * @cssprop --uui-focus-outline-color - overwrite the focus outline color\n /\nexport class UUIButtonElement extends UUIFormControlWithBasicsMixin(\n LabelMixin('', PopoverTargetMixin(LitElement)),\n) {\n /\n Specifies the type of button\n * @type {\"submit\" \| \"button\" \| \"reset\"}\n * @attr\n * @default \"button\"\n /\n @property({ type: String, reflect: true })\n type: UUIButtonType = 'button';\n\n /\n Disables the button, changes the looks of it and prevents if from emitting the click event\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\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 = '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\" \| \"positive\" \| \"warning\" \| \"danger\"}\n * @attr\n * @default \"default\"\n /\n @property({ reflect: true })\n color: UUIInterfaceColor = 'default';\n\n /\n Makes the left and right padding of the button narrower.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n /\n Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.\n * @type {undefined \|'waiting' \| 'success' \| 'failed'}\n * @attr\n * @default undefined\n /\n @property({ type: String, reflect: true })\n state: UUIButtonState = undefined;\n\n /\n Set an href, this will turns the 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 Sets the title attribute, which provides a tooltip for both button and anchor elements.\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String })\n public title: string = '';\n\n @query('#button')\n protected readonly _button!: HTMLInputElement;\n\n constructor() {\n super();\n this.addEventListener('click', this._onHostClick);\n }\n\n protected getFormElement(): HTMLElement {\n return this._button;\n }\n\n async focus() {\n await this.updateComplete;\n this._button.focus();\n }\n async blur() {\n await this.updateComplete;\n this._button.blur();\n }\n async click() {\n await this.updateComplete;\n this._button.click();\n }\n\n private _onHostClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n e.stopImmediatePropagation();\n return;\n }\n\n if (this._internals?.form) {\n switch (this.type) {\n case 'reset':\n this._internals.form.reset();\n break;\n case 'button':\n break;\n default:\n this.submit();\n break;\n }\n }\n\n this._togglePopover();\n }\n\n #resetStateTimeout?: number;\n\n // Reset the state after 2sec if it is 'success' or 'failed'.\n updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('state')) {\n clearTimeout(this.#resetStateTimeout);\n if (this.state === 'success' \|\| this.state === 'failed') {\n this.#resetStateTimeout = setTimeout(\n () => (this.state = undefined),\n 2000,\n ) as any;\n }\n }\n }\n\n protected renderState(): TemplateResult \| typeof nothing {\n let element: TemplateResult;\n switch (this.state) {\n case 'waiting':\n element = html`<uui-loader-circle id=\"loader\"></uui-loader-circle>`;\n break;\n case 'success':\n element = html`<uui-icon\n name=\"check\"\n .fallback=${iconCheck.strings[0]}></uui-icon>`;\n break;\n case 'failed':\n element = html`<uui-icon\n name=\"wrong\"\n .fallback=${iconWrong.strings[0]}></uui-icon>`;\n break;\n default:\n return nothing;\n }\n\n return html`<div id=\"state\">${element}</div>`;\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 aria-label=${ifDefined(this.label)}\n title=${ifDefined(this.title === '' ? undefined : this.title)}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(rel)}>\n ${this.renderState()} ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </a>\n `;\n }\n return html`\n <button\n id=\"button\"\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.label)}\n title=${ifDefined(this.title === '' ? undefined : this.title)}>\n ${this.renderState()} ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </button>\n `;\n }\n\n static override readonly styles = [\n UUIHorizontalShakeKeyframes,\n css`\n :host {\n position: relative;\n display: inline-flex;\n margin-left: calc(var(--uui-button-merge-border-left, 0) -1px);\n --uui-button-padding-left-factor: 3;\n --uui-button-padding-right-factor: 3;\n --uui-button-padding-top-factor: 1;\n --uui-button-padding-bottom-factor: 1;\n\n min-height: var(--uui-button-height, var(--uui-size-11));\n max-height: 100%;\n cursor: pointer;\n\n text-align: center;\n font-size: var(--uui-button-font-size, inherit);\n font-weight: var(--uui-button-font-weight, 400);\n transition:\n background-color 80ms,\n border-color 80ms,\n color 80ms;\n }\n\n :host([compact]) {\n --uui-button-padding-left-factor: 1;\n --uui-button-padding-right-factor: 1;\n --uui-button-padding-top-factor: 0;\n --uui-button-padding-bottom-factor: 0;\n }\n\n .label {\n line-height: 1; /** needed to reset 'a > span' /\n transition: opacity 120ms;\n display: flex;\n gap: var(--uui-size-1);\n align-items: center;\n }\n\n :host([state]:not([state=''])) .label {\n opacity: 0;\n }\n\n #state {\n position: absolute;\n opacity: 0;\n animation-name: fadeIn;\n animation-delay: 40ms;\n animation-duration: 360ms;\n animation-fill-mode: forwards;\n display: flex;\n justify-content: center;\n width: 100%;\n height: 100%;\n align-items: center;\n }\n\n #button {\n width: 100%;\n background-color: transparent;\n color: inherit;\n font-size: inherit;\n border-radius: inherit;\n font-family: inherit;\n font-weight: inherit;\n text-align: inherit;\n border: none;\n cursor: inherit;\n\n display: inline-flex;\n align-items: center;\n justify-content: var(--uui-button-content-align, center);\n\n / for anchor tag: /\n text-decoration: none;\n color: currentColor;\n line-height: inherit;\n\n border-width: var(--uui-button-border-width, 1px);\n border-style: solid;\n border-radius: var(\n --uui-button-border-radius,\n var(--uui-border-radius-3)\n );\n cursor: pointer;\n\n padding: calc(var(--uui-size-2) var(--uui-button-padding-top-factor))\n calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))\n calc(var(--uui-size-2) * var(--uui-button-padding-bottom-factor))\n calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));\n\n box-shadow: none;\n\n transition: var(--uui-button-transition, none);\n }\n\n #button:focus-visible {\n outline: 2px solid\n var(\n --uui-focus-outline-color,\n var(--color-emphasis, var(--uui-color-focus))\n );\n }\n\n button[disabled]:active,\n a:not([href]):active {\n animation: ${UUIHorizontalShakeAnimationValue};\n }\n\n /* ANIMATIONS /\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n #icon-check,\n #icon-wrong {\n display: grid;\n place-items: center;\n width: 1.5em;\n }\n\n #loader {\n font-size: 1.5em;\n }\n :host([look]:not([look=''])) #loader {\n color: inherit;\n }\n\n / edge case for default color /\n :host(:not([color]):not([look='primary'])),\n :host([color='']:not([look='primary'])),\n :host([color='default']:not([look='primary'])) {\n --uui-button-contrast-hover: var(--uui-color-default-emphasis);\n }\n\n :host([color='warning'][look='outline']) #button,\n :host([color='warning'][look='placeholder']) #button {\n --uui-button-contrast-hover: var(--color-standalone);\n }\n\n /* Button color attribute: /\n #button {\n --color: var(--uui-color-default);\n --color-standalone: var(--uui-color-default-standalone);\n --color-emphasis: var(--uui-color-default-emphasis);\n --color-contrast: var(--uui-color-default-contrast);\n }\n :host([color='positive']) #button {\n --color: var(--uui-color-positive);\n --color-standalone: var(--uui-color-positive-standalone);\n --color-emphasis: var(--uui-color-positive-emphasis);\n --color-contrast: var(--uui-color-positive-contrast);\n }\n :host([color='warning']) #button {\n --color: var(--uui-color-warning);\n --color-standalone: var(--uui-color-warning-standalone);\n --color-emphasis: var(--uui-color-warning-emphasis);\n --color-contrast: var(--uui-color-warning-contrast);\n }\n :host([color='danger']) #button {\n --color: var(--uui-color-danger);\n --color-standalone: var(--uui-color-danger-standalone);\n --color-emphasis: var(--uui-color-danger-emphasis);\n --color-contrast: var(--uui-color-danger-contrast);\n }\n :host([color='invalid']) #button {\n --color: var(--uui-color-invalid);\n --color-standalone: var(--uui-color-invalid-standalone);\n --color-emphasis: var(--uui-color-invalid-emphasis);\n --color-contrast: var(--uui-color-invalid-contrast);\n }\n :host([disabled]) #button {\n --color: var(--uui-color-disabled);\n --color-standalone: var(--uui-color-disabled-contrast);\n --color-emphasis: var(--uui-color-disabled);\n --color-contrast: var(--uui-color-disabled-contrast);\n\n cursor: default;\n }\n\n /* Button look attribute: /\n / DEFAULT /\n #button {\n background-color: var(--uui-button-background-color, transparent);\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(--uui-button-border-color, transparent);\n }\n :host(:not([disabled]):hover) #button {\n background-color: var(\n --uui-button-background-color-hover,\n var(--uui-color-surface-emphasis)\n );\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover, transparent);\n }\n :host([disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n transparent\n );\n color: var(--uui-button-contrast-disabled, var(--color-contrast));\n border-color: var(--uui-button-border-color-disabled, transparent);\n }\n\n / PRIMARY /\n :host([look='primary']) #button {\n background-color: var(--uui-button-background-color, var(--color));\n color: var(--uui-button-contrast, var(--color-contrast));\n border-color: var(--uui-button-border-color, transparent);\n\n / special for primary: /\n font-weight: var(--uui-button-font-weight, 400);\n }\n\n :host([look='primary']:hover) #button {\n background-color: var(\n --uui-button-background-color-hover,\n var(--color-emphasis)\n );\n color: var(--uui-button-contrast-hover, var(--color-contrast));\n border-color: var(--uui-button-border-color-hover, transparent);\n }\n\n / special outline offset tof primary style so you can see the outline /\n :host([look='primary']) #button:focus-visible {\n outline-offset: 2px;\n }\n\n :host([look='primary'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n var(--color)\n );\n color: var(--uui-button-contrast-disabled, var(--color-contrast));\n border-color: var(--uui-button-border-color-disabled, var(--color));\n }\n / SECONDARY /\n :host([look='secondary']) #button {\n background-color: var(\n --uui-button-background-color,\n var(--uui-color-surface-alt)\n );\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(--uui-button-border-color, transparent);\n\n / special for secondary: /\n font-weight: var(--uui-button-font-weight, 400);\n }\n :host([look='secondary']:hover) #button {\n background-color: var(\n --uui-button-background-color-hover,\n var(--uui-color-surface-emphasis)\n );\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover, transparent);\n }\n :host([look='secondary'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n var(--color)\n );\n color: var(--uui-button-contrast-disabled, var(--color-contrast));\n border-color: var(--uui-button-border-color-disabled, var(--color));\n }\n\n / OUTLINE /\n :host([look='outline']) #button {\n background-color: var(--uui-button-background-color, transparent);\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(\n --uui-button-border-color,\n var(--uui-color-border-standalone)\n );\n\n / special for outline: /\n font-weight: var(--uui-button-font-weight, 400);\n }\n :host([look='outline']:not([disabled]):hover) #button {\n background-color: var(--uui-button-background-color-hover, transparent);\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover);\n }\n :host([look='outline'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n transparent\n );\n color: var(--uui-button-contrast-disabled, var(--color-standalone));\n border-color: var(\n --uui-button-border-color-disabled,\n var(--color-standalone)\n );\n }\n\n / PLACEHOLDER */\n :host([look='placeholder']) #button {\n border-style: dashed;\n background-color: var(--uui-button-background-color, transparent);\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(\n --uui-button-border-color,\n var(--uui-color-border-standalone)\n );\n }\n :host([look='placeholder']:not([disabled]):hover) #button {\n background-color: var(--uui-button-background-color-hover, transparent);\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover);\n }\n :host([look='placeholder'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n var(--color)\n );\n color: var(--uui-button-contrast-disabled, var(--color-standalone));\n border-color: var(\n --uui-button-border-color-disabled,\n var(--color-standalone)\n );\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAyGiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9T9C,IAAM,mBAAN;AAUL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,iBAUX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,iBAmBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA3BhB,iBA4BX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GApChB,iBAqCX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7C/B,iBA8CX,WAAA,SAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtD9B,iBAuDX,WAAA,OAAA;AASO,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Df,iBAgEJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxEf,iBAyEJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFf,iBAkFJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Ff,iBA2FJ,WAAA,OAAA;AAGY,gBAAA;AAAA,EADlB,MAAM,SAAS;AAAA,GA7FL,iBA8FQ,WAAA,SAAA;"}
1	+ {"version":3,"file":"button.element.js","sources":["../../../src/components/button/button.element.ts"],"sourcesContent":["import {\n UUIHorizontalShakeAnimationValue,\n UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport {\n LabelMixin,\n PopoverTargetMixin,\n UUIFormControlWithBasicsMixin,\n} from '../../internal/mixins/index.js';\nimport { iconCheck, iconWrong } from '../icon-registry-essential/svgs/index.js';\nimport type {\n UUIInterfaceColor,\n UUIInterfaceLook,\n} from '../../internal/types/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\nimport '../loader-circle/loader-circle.js';\n\nexport type UUIButtonState = undefined \| 'waiting' \| 'success' \| 'failed';\n\nexport type UUIButtonType = 'submit' \| 'button' \| 'reset';\n\n/*\n @element uui-button\n * @fires {UUIButtonEvent} click - fires when the element is clicked\n * @slot - for default content\n * @slot label - for label content\n * @slot extra - for extra\n * @property {string} label - label to be used for aria-label and potentially as visual label for some components\n * @attribute label - label to be used for aria-label and potentially as visual label for some components\n * @description - All-around button\n * @cssprop --uui-button-height - overwrite the button height\n * @cssprop --uui-button-border-width - overwrite the border width\n * @cssprop --uui-button-border-radius - overwrite the border radius\n * @cssprop --uui-button-font-weight - overwrite the font weight\n * @cssprop --uui-button-font-size - overwrite the font size\n * @cssprop --uui-button-background-color - overwrite the background color\n * @cssprop --uui-button-background-color-hover - overwrite the background color for hover state\n * @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state\n * @cssprop --uui-button-border-color - overwrite the border color\n * @cssprop --uui-button-border-color-hover - overwrite the border color for hover state\n * @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state\n * @cssprop --uui-button-contrast - overwrite the text color\n * @cssprop --uui-button-contrast-hover - overwrite the text color for hover state\n * @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state\n * @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.\n * @cssprop --uui-focus-outline-color - overwrite the focus outline color\n /\nexport class UUIButtonElement extends UUIFormControlWithBasicsMixin(\n LabelMixin('', PopoverTargetMixin(LitElement)),\n) {\n /\n Specifies the type of button\n * @type {\"submit\" \| \"button\" \| \"reset\"}\n * @attr\n * @default \"button\"\n /\n @property({ type: String, reflect: true })\n type: UUIButtonType = 'button';\n\n /\n Disables the button, changes the looks of it and prevents if from emitting the click event\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\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 = '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\" \| \"positive\" \| \"warning\" \| \"danger\"}\n * @attr\n * @default \"default\"\n /\n @property({ reflect: true })\n color: UUIInterfaceColor = 'default';\n\n /\n Makes the left and right padding of the button narrower.\n * @type {boolean}\n * @attr\n * @default false\n /\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n /\n Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.\n * @type {undefined \|'waiting' \| 'success' \| 'failed'}\n * @attr\n * @default undefined\n /\n @property({ type: String, reflect: true })\n state: UUIButtonState = undefined;\n\n /\n Set an href, this will turns the 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 Sets the title attribute, which provides a tooltip for both button and anchor elements.\n * @type {string}\n * @attr\n * @default ''\n /\n @property({ type: String })\n public title: string = '';\n\n @query('#button')\n protected readonly _button!: HTMLInputElement;\n\n constructor() {\n super();\n this.addEventListener('click', this._onHostClick);\n }\n\n protected getFormElement(): HTMLElement {\n return this._button;\n }\n\n async focus() {\n await this.updateComplete;\n this._button.focus();\n }\n async blur() {\n await this.updateComplete;\n this._button.blur();\n }\n async click() {\n await this.updateComplete;\n this._button.click();\n }\n\n private _onHostClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n e.stopImmediatePropagation();\n return;\n }\n\n if (this._internals?.form) {\n switch (this.type) {\n case 'reset':\n this._internals.form.reset();\n break;\n case 'button':\n break;\n default:\n this.submit();\n break;\n }\n }\n\n this._togglePopover();\n }\n\n #resetStateTimeout?: number;\n\n // Reset the state after 2sec if it is 'success' or 'failed'.\n updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('state')) {\n clearTimeout(this.#resetStateTimeout);\n if (this.state === 'success' \|\| this.state === 'failed') {\n this.#resetStateTimeout = setTimeout(\n () => (this.state = undefined),\n 2000,\n ) as any;\n }\n }\n }\n\n protected renderState(): TemplateResult \| typeof nothing {\n let element: TemplateResult;\n switch (this.state) {\n case 'waiting':\n element = html`<uui-loader-circle id=\"loader\"></uui-loader-circle>`;\n break;\n case 'success':\n element = html`<uui-icon\n name=\"check\"\n .fallback=${iconCheck.strings[0]}></uui-icon>`;\n break;\n case 'failed':\n element = html`<uui-icon\n name=\"wrong\"\n .fallback=${iconWrong.strings[0]}></uui-icon>`;\n break;\n default:\n return nothing;\n }\n\n return html`<div id=\"state\">${element}</div>`;\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 aria-label=${ifDefined(\n this.getAttribute('aria-label') \|\| this.label \|\| undefined,\n )}\n aria-labelledby=${ifDefined(\n this.getAttribute('aria-labelledby') \|\| undefined,\n )}\n title=${ifDefined(this.title === '' ? undefined : this.title)}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n target=${ifDefined(this.target \|\| undefined)}\n rel=${ifDefined(rel)}>\n ${this.renderState()} ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </a>\n `;\n }\n return html`\n <button\n id=\"button\"\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(\n this.getAttribute('aria-label') \|\| this.label \|\| undefined,\n )}\n aria-labelledby=${ifDefined(\n this.getAttribute('aria-labelledby') \|\| undefined,\n )}\n title=${ifDefined(this.title === '' ? undefined : this.title)}>\n ${this.renderState()} ${this.renderLabel()}\n <slot name=\"extra\"></slot>\n </button>\n `;\n }\n\n static override readonly styles = [\n UUIHorizontalShakeKeyframes,\n css`\n :host {\n position: relative;\n display: inline-flex;\n margin-left: calc(var(--uui-button-merge-border-left, 0) -1px);\n --uui-button-padding-left-factor: 3;\n --uui-button-padding-right-factor: 3;\n --uui-button-padding-top-factor: 1;\n --uui-button-padding-bottom-factor: 1;\n\n min-height: var(--uui-button-height, var(--uui-size-11));\n max-height: 100%;\n cursor: pointer;\n\n text-align: center;\n font-size: var(--uui-button-font-size, inherit);\n font-weight: var(--uui-button-font-weight, 400);\n transition:\n background-color 80ms,\n border-color 80ms,\n color 80ms;\n }\n\n :host([compact]) {\n --uui-button-padding-left-factor: 1;\n --uui-button-padding-right-factor: 1;\n --uui-button-padding-top-factor: 0;\n --uui-button-padding-bottom-factor: 0;\n }\n\n .label {\n line-height: 1; /** needed to reset 'a > span' /\n transition: opacity 120ms;\n display: flex;\n gap: var(--uui-size-1);\n align-items: center;\n }\n\n :host([state]:not([state=''])) .label {\n opacity: 0;\n }\n\n #state {\n position: absolute;\n opacity: 0;\n animation-name: fadeIn;\n animation-delay: 40ms;\n animation-duration: 360ms;\n animation-fill-mode: forwards;\n display: flex;\n justify-content: center;\n width: 100%;\n height: 100%;\n align-items: center;\n }\n\n #button {\n width: 100%;\n background-color: transparent;\n color: inherit;\n font-size: inherit;\n border-radius: inherit;\n font-family: inherit;\n font-weight: inherit;\n text-align: inherit;\n border: none;\n cursor: inherit;\n\n display: inline-flex;\n align-items: center;\n justify-content: var(--uui-button-content-align, center);\n\n / for anchor tag: /\n text-decoration: none;\n color: currentColor;\n line-height: inherit;\n\n border-width: var(--uui-button-border-width, 1px);\n border-style: solid;\n border-radius: var(\n --uui-button-border-radius,\n var(--uui-border-radius-3)\n );\n cursor: pointer;\n\n padding: calc(var(--uui-size-2) var(--uui-button-padding-top-factor))\n calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))\n calc(var(--uui-size-2) * var(--uui-button-padding-bottom-factor))\n calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));\n\n box-shadow: none;\n\n transition:\n background-color 60ms,\n color 60ms,\n border-color 60ms;\n }\n\n #button:focus-visible {\n outline: 2px solid\n var(\n --uui-focus-outline-color,\n var(--color-emphasis, var(--uui-color-focus))\n );\n }\n\n button[disabled]:active,\n a:not([href]):active {\n animation: ${UUIHorizontalShakeAnimationValue};\n }\n\n /* ANIMATIONS /\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n #icon-check,\n #icon-wrong {\n display: grid;\n place-items: center;\n width: 1.5em;\n }\n\n #loader {\n font-size: 1.5em;\n }\n :host([look]:not([look=''])) #loader {\n color: inherit;\n }\n\n / edge case for default color /\n :host(:not([color]):not([look='primary'])),\n :host([color='']:not([look='primary'])),\n :host([color='default']:not([look='primary'])) {\n --uui-button-contrast-hover: var(--uui-color-default-emphasis);\n }\n\n :host([color='warning'][look='outline']) #button,\n :host([color='warning'][look='placeholder']) #button {\n --uui-button-contrast-hover: var(--color-standalone);\n }\n\n /* Button color attribute: /\n #button {\n --color: var(--uui-color-interactive);\n --color-standalone: var(--uui-color-interactive);\n --color-emphasis: var(--uui-color-interactive-emphasis);\n --color-contrast: var(--uui-color-interactive-contrast);\n }\n / PRIMARY — DEFAULT /\n :host([look='primary']:not([color])) #button,\n :host([look='primary'][color='']) #button,\n :host([look='primary'][color='default']) #button {\n --color: var(--uui-color-default);\n --color-standalone: var(--uui-color-default-standalone);\n --color-emphasis: var(--uui-color-default-emphasis);\n --color-contrast: var(--uui-color-default-contrast);\n }\n :host([color='positive']) #button {\n --color: var(--uui-color-positive);\n --color-standalone: var(--uui-color-positive-standalone);\n --color-emphasis: var(--uui-color-positive-emphasis);\n --color-contrast: var(--uui-color-positive-contrast);\n }\n :host([color='warning']) #button {\n --color: var(--uui-color-warning);\n --color-standalone: var(--uui-color-warning-standalone);\n --color-emphasis: var(--uui-color-warning-emphasis);\n --color-contrast: var(--uui-color-warning-contrast);\n }\n :host([color='danger']) #button {\n --color: var(--uui-color-danger);\n --color-standalone: var(--uui-color-danger-standalone);\n --color-emphasis: var(--uui-color-danger-emphasis);\n --color-contrast: var(--uui-color-danger-contrast);\n }\n :host([color='invalid']) #button {\n --color: var(--uui-color-invalid);\n --color-standalone: var(--uui-color-invalid-standalone);\n --color-emphasis: var(--uui-color-invalid-emphasis);\n --color-contrast: var(--uui-color-invalid-contrast);\n }\n :host([disabled]) #button {\n --color: var(--uui-color-disabled);\n --color-standalone: var(--uui-color-disabled-contrast);\n --color-emphasis: var(--uui-color-disabled);\n --color-contrast: var(--uui-color-disabled-contrast);\n\n cursor: default;\n }\n\n /* Button look attribute: /\n / DEFAULT /\n #button {\n background-color: var(--uui-button-background-color, transparent);\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(--uui-button-border-color, transparent);\n }\n :host(:not([disabled]):hover) #button {\n background-color: var(--uui-button-background-color-hover, transparent);\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover, transparent);\n }\n :host([disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n transparent\n );\n color: var(--uui-button-contrast-disabled, var(--color-contrast));\n border-color: var(--uui-button-border-color-disabled, transparent);\n }\n\n / PRIMARY /\n :host([look='primary']) #button {\n background-color: var(--uui-button-background-color, var(--color));\n color: var(--uui-button-contrast, var(--color-contrast));\n border-color: var(--uui-button-border-color, transparent);\n /* makes font slightly bolder /\n text-shadow: 0 0 currentColor;\n }\n\n :host([look='primary']:hover) #button {\n background-color: var(\n --uui-button-background-color-hover,\n var(--color-emphasis)\n );\n color: var(--uui-button-contrast-hover, var(--color-contrast));\n border-color: var(--uui-button-border-color-hover, transparent);\n }\n\n / special outline offset tof primary style so you can see the outline /\n :host([look='primary']) #button:focus-visible {\n outline-offset: 2px;\n }\n\n :host([look='primary'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n var(--color)\n );\n color: var(--uui-button-contrast-disabled, var(--color-contrast));\n border-color: var(--uui-button-border-color-disabled, var(--color));\n }\n\n / SECONDARY /\n :host([look='secondary']) #button {\n background-color: var(\n --uui-button-background-color,\n var(--uui-color-surface-alt)\n );\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(--uui-button-border-color, transparent);\n /* makes font slightly bolder /\n text-shadow: 0 0 currentColor;\n }\n :host([look='secondary']:hover) #button {\n background-color: var(\n --uui-button-background-color-hover,\n var(--uui-color-surface-emphasis)\n );\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover, transparent);\n }\n :host([look='secondary'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n var(--color)\n );\n color: var(--uui-button-contrast-disabled, var(--color-contrast));\n border-color: var(--uui-button-border-color-disabled, var(--color));\n }\n\n / OUTLINE /\n :host([look='outline']) #button {\n background-color: var(--uui-button-background-color, transparent);\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(\n --uui-button-border-color,\n var(--uui-color-border-standalone)\n );\n }\n :host([look='outline']:not([disabled]):hover) #button {\n background-color: var(--uui-button-background-color-hover, transparent);\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover);\n }\n :host([look='outline'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n transparent\n );\n color: var(--uui-button-contrast-disabled, var(--color-standalone));\n border-color: var(\n --uui-button-border-color-disabled,\n var(--color-standalone)\n );\n }\n\n / PLACEHOLDER */\n :host([look='placeholder']) #button {\n border-style: dashed;\n background-color: var(--uui-button-background-color, transparent);\n color: var(--uui-button-contrast, var(--color-standalone));\n border-color: var(\n --uui-button-border-color,\n var(--uui-color-border-standalone)\n );\n }\n :host([look='placeholder']:not([disabled]):hover) #button {\n background-color: var(--uui-button-background-color-hover, transparent);\n color: var(--uui-button-contrast-hover, var(--color-standalone));\n border-color: var(--uui-button-border-color-hover);\n }\n :host([look='placeholder'][disabled]) #button {\n background-color: var(\n --uui-button-background-color-disabled,\n var(--color)\n );\n color: var(--uui-button-contrast-disabled, var(--color-standalone));\n border-color: var(\n --uui-button-border-color-disabled,\n var(--color-standalone)\n );\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA4GiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA3U9C,IAAM,mBAAN;AAUL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,iBAUX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,iBAmBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA3BhB,iBA4BX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GApChB,iBAqCX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7C/B,iBA8CX,WAAA,SAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtD9B,iBAuDX,WAAA,OAAA;AASO,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Df,iBAgEJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxEf,iBAyEJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFf,iBAkFJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Ff,iBA2FJ,WAAA,OAAA;AAGY,gBAAA;AAAA,EADlB,MAAM,SAAS;AAAA,GA7FL,iBA8FQ,WAAA,SAAA;"}

package/dist/components/card-block-type/card-block-type.element.js CHANGED Viewed

@@ -93,6 +93,15 @@ _UUICardBlockTypeElement.styles = [
         background-color: var(--uui-color-surface-alt);
       }
+      slot:not([name]) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        overflow: clip;
+        border-radius: calc(var(--uui-border-radius-2) - 1px);
+      }
       slot[name='tag'] {
         position: absolute;
         bottom: var(--uui-size-4);
@@ -104,8 +113,8 @@ _UUICardBlockTypeElement.styles = [
       slot[name='actions'] {
         position: absolute;
-        top: var(--uui-size-4);
-        right: var(--uui-size-4);
+        top: var(--uui-size-space-3);
+        right: var(--uui-size-space-3);
         display: flex;
         justify-content: right;
         z-index: 2;
@@ -129,7 +138,6 @@ _UUICardBlockTypeElement.styles = [
       slot:not([name])::slotted(*) {
         align-self: center;
-        border-radius: var(--uui-border-radius-2);
         object-fit: cover;
         max-width: 100%;
         max-height: 100%;
@@ -195,7 +203,8 @@ _UUICardBlockTypeElement.styles = [
         inset: 0;
         z-index: -1;
         border-top: 1px solid var(--uui-color-divider);
-        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);
+        border-radius: 0 0 calc(var(--uui-border-radius-2) - 1px)
+          calc(var(--uui-border-radius-2) - 1px);
         background-color: var(--uui-color-surface);
         pointer-events: none;
         opacity: 0.96;

package/dist/components/card-block-type/card-block-type.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-block-type.element.js","sources":["../../../src/components/card-block-type/card-block-type.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type BlockTypeIcon = {\n name?: string;\n color?: string;\n};\n\n/*\n @element uui-card-block-type\n * @slot - slot for the default content area\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n /\nexport class UUICardBlockTypeElement extends UUICardElement {\n /\n Block type name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n /\n Block type description\n * @type {string}\n * @attr description\n * @default undefined\n /\n @property({ type: String })\n description?: string;\n\n @property({ type: String, attribute: 'background' })\n public get background(): string \| undefined {\n return undefined;\n }\n public set background(value: string \| undefined) {\n this.style.backgroundColor = value ?? '';\n }\n\n render() {\n return html`\n ${this.#renderMedia()}\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 #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <button\n id=\"open-part\"\n class=\"uui-text\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </button>\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 class=\"uui-text\"\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 #renderMedia() {\n return html`<div id=\"portrait\">\n <slot></slot>\n </div> `;\n }\n\n #renderContent() {\n return html`\n <div id=\"content\">\n <span title=\"${this.name}\" id=\"name\">${this.name}</span>\n <small title=\"${ifDefined(this.description)}\">${this.description}<slot name=\"description\"></slot></small>\n </div></div>\n `;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n :host {\n background-color: var(--uui-color-surface-alt);\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-4);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n z-index: 2;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-4);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n z-index: 2;\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 #portrait {\n display: flex;\n justify-content: center;\n min-height: 150px;\n max-height: 150px;\n width: 100%;\n margin-bottom: var(--uui-size-layout-2);\n }\n\n slot:not([name])::slotted() {\n align-self: center;\n ~~border-radius: var(--uui-border-radius-2);\n~~ object-fit: cover;\n max-width: 100%;\n max-height: 100%;\n font-size: var(--uui-size-8);\n }\n\n #open-part {\n position: absolute;\n z-index: 1;\n inset: 0;\n margin-bottom: 0;\n color: var(--uui-color-interactive);\n border: none;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n :host([disabled]) #open-part {\n pointer-events: none;\n background: var(--uui-color-disabled);\n color: var(--uui-color-contrast-disabled);\n }\n\n #open-part:hover {\n color: var(--uui-color-interactive-emphasis);\n }\n #open-part:hover #name {\n text-decoration: underline;\n }\n #open-part #name,\n #open-part small {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: anywhere;\n }\n\n :host([image]:not([image=''])) #open-part {\n transition: opacity 0.5s 0.5s;\n opacity: 0;\n }\n\n #content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n font-family: inherit;\n font-size: var(--uui-type-small-size);\n box-sizing: border-box;\n text-align: left;\n word-break: break-word;\n padding-top: var(--uui-size-space-3);\n }\n\n #content::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-top: 1px solid var(--uui-color-divider);\n border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);\n background-color: var(--uui-color-surface);\n pointer-events: none;\n opacity: 0.96;\n }\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 :host(\n [image]:not([image='']):hover,\n [image]:not([image='']):focus,\n [image]:not([image='']):focus-within,\n [selected][image]:not([image='']),\n [error][image]:not([image=''])\n )\n #open-part {\n opacity: 1;\n transition-duration: 120ms;\n transition-delay: 0s;\n }\n\n :host([selectable]) #open-part {\n inset: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host(:not([selectable])) #content {\n padding: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host([selectable]) #content::before {\n inset: calc(var(--uui-size-space-3) * -1)\n calc(var(--uui-size-space-4) * -1);\n top: 0;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,2BAAN,MAAM,iCAAgC,eAAe;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,OAAO;AAAA,EAAA;AAAA,EAYP,IAAW,aAAiC;AAC1C,WAAO;AAAA,EACT;AAAA,EACA,IAAW,WAAW,OAA2B;AAC/C,SAAK,MAAM,kBAAkB,SAAS;AAAA,EACxC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,sBAAK,oDAAL,UAAmB;AAAA,QACnB,KAAK,OAAO,sBAAK,mDAAL,aAAqB,sBAAK,qDAAL,UAAoB;AAAA;AAAA;AAAA,QAGrD,KAAK,aAAa,KAAK,eAAA,IAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,EAIvD;~~AAkMF~~;~~AAvOO~~;AAuCL,kBAAA,WAAgB;AACd,QAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK;AAC/D,SAAO;AAAA;AAAA;AAAA;AAAA,mBAIQ,UAAU,QAAQ,CAAC;AAAA,iBACrB,KAAK,eAAe;AAAA,mBAClB,KAAK,iBAAiB;AAAA,UAC/B,sBAAK,sDAAL,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;AAAA,mBAIQ,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,sDAAL,UAAqB;AAAA;AAAA;AAG7B;AAEA,iBAAA,WAAe;AACb,SAAO;AAAA;AAAA;AAGT;AAEA,mBAAA,WAAiB;AACf,SAAO;AAAA;AAAA,uBAEY,KAAK,IAAI,eAAe,KAAK,IAAI;AAAA,wBAChC,UAAU,KAAK,WAAW,CAAC,KAAK,KAAK,WAAW;AAAA;AAAA;AAGtE;AAEA,yBAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,0BAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,wBAQX,WAAA,QAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,wBAiBX,WAAA,eAAA,CAAA;AAGW,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAnBxC,wBAoBA,WAAA,cAAA,CAAA;"}
1	+ {"version":3,"file":"card-block-type.element.js","sources":["../../../src/components/card-block-type/card-block-type.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type BlockTypeIcon = {\n name?: string;\n color?: string;\n};\n\n/*\n @element uui-card-block-type\n * @slot - slot for the default content area\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n /\nexport class UUICardBlockTypeElement extends UUICardElement {\n /\n Block type name\n * @type {string}\n * @attr name\n * @default ''\n /\n @property({ type: String })\n name = '';\n\n /\n Block type description\n * @type {string}\n * @attr description\n * @default undefined\n /\n @property({ type: String })\n description?: string;\n\n @property({ type: String, attribute: 'background' })\n public get background(): string \| undefined {\n return undefined;\n }\n public set background(value: string \| undefined) {\n this.style.backgroundColor = value ?? '';\n }\n\n render() {\n return html`\n ${this.#renderMedia()}\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 #renderButton() {\n const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n return html`\n <button\n id=\"open-part\"\n class=\"uui-text\"\n tabindex=${ifDefined(tabIndex)}\n @click=${this.handleOpenClick}\n @keydown=${this.handleOpenKeydown}>\n ${this.#renderContent()}\n </button>\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 class=\"uui-text\"\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 #renderMedia() {\n return html`<div id=\"portrait\">\n <slot></slot>\n </div> `;\n }\n\n #renderContent() {\n return html`\n <div id=\"content\">\n <span title=\"${this.name}\" id=\"name\">${this.name}</span>\n <small title=\"${ifDefined(this.description)}\">${this.description}<slot name=\"description\"></slot></small>\n </div></div>\n `;\n }\n\n static override readonly styles = [\n ...UUICardElement.styles,\n css`\n :host {\n background-color: var(--uui-color-surface-alt);\n }\n\n slot:not([name]) {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n overflow: clip;\n border-radius: calc(var(--uui-border-radius-2) - 1px);\n }\n\n slot[name='tag'] {\n position: absolute;\n bottom: var(--uui-size-4);\n right: var(--uui-size-4);\n display: flex;\n justify-content: right;\n z-index: 2;\n }\n\n slot[name='actions'] {\n position: absolute;\n top: var(--uui-size-space-3);\n right: var(--uui-size-space-3);\n display: flex;\n justify-content: right;\n z-index: 2;\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 #portrait {\n display: flex;\n justify-content: center;\n min-height: 150px;\n max-height: 150px;\n width: 100%;\n margin-bottom: var(--uui-size-layout-2);\n }\n\n slot:not([name])::slotted() {\n align-self: center;\n object-fit: cover;\n max-width: 100%;\n max-height: 100%;\n font-size: var(--uui-size-8);\n }\n\n #open-part {\n position: absolute;\n z-index: 1;\n inset: 0;\n margin-bottom: 0;\n color: var(--uui-color-interactive);\n border: none;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n :host([disabled]) #open-part {\n pointer-events: none;\n background: var(--uui-color-disabled);\n color: var(--uui-color-contrast-disabled);\n }\n\n #open-part:hover {\n color: var(--uui-color-interactive-emphasis);\n }\n #open-part:hover #name {\n text-decoration: underline;\n }\n #open-part #name,\n #open-part small {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n overflow-wrap: anywhere;\n }\n\n :host([image]:not([image=''])) #open-part {\n transition: opacity 0.5s 0.5s;\n opacity: 0;\n }\n\n #content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n font-family: inherit;\n font-size: var(--uui-type-small-size);\n box-sizing: border-box;\n text-align: left;\n word-break: break-word;\n padding-top: var(--uui-size-space-3);\n }\n\n #content::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n border-top: 1px solid var(--uui-color-divider);\n border-radius: 0 0 calc(var(--uui-border-radius-2) - 1px)\n calc(var(--uui-border-radius-2) - 1px);\n background-color: var(--uui-color-surface);\n pointer-events: none;\n opacity: 0.96;\n }\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 :host(\n [image]:not([image='']):hover,\n [image]:not([image='']):focus,\n [image]:not([image='']):focus-within,\n [selected][image]:not([image='']),\n [error][image]:not([image=''])\n )\n #open-part {\n opacity: 1;\n transition-duration: 120ms;\n transition-delay: 0s;\n }\n\n :host([selectable]) #open-part {\n inset: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host(:not([selectable])) #content {\n padding: var(--uui-size-space-3) var(--uui-size-space-4);\n }\n :host([selectable]) #content::before {\n inset: calc(var(--uui-size-space-3) * -1)\n calc(var(--uui-size-space-4) * -1);\n top: 0;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/card-content-node/card-content-node.element.js CHANGED Viewed

@@ -124,8 +124,8 @@ _UUICardContentNodeElement.styles = [
       slot[name='actions'] {
         position: absolute;
-        top: var(--uui-size-4);
-        right: var(--uui-size-4);
+        top: var(--uui-size-space-3);
+        right: var(--uui-size-space-3);
         display: flex;
         justify-content: right;