@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -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';\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":";;;;;;;;;;;;;;;;;;;;;;;AAmBO,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;AAAA,MACX,KAAK,aAAa,YAAY,KAAK,KAAK,SAAS;AAAA,IAAA,CAClD;AAAA,4BACiB;AAAA,MAChB,KAAK,aAAa,iBAAiB,KAAK;AAAA,IAAA,CACzC;AAAA,kBACO,KAAK,SAAS;AAAA,UACtB,KAAK,eAAA,CAAgB,IAAI,KAAK,aAAa;AAAA;AAAA;AAAA,EAGnD;AA0DF;AA1NO;AAgGL,wBAAW,GAAwB;AACjC,MAAI,EAAE,OAAO,SAAS;AACpB,SAAK,OAAA;AAAA,EACP;AACF;AA8DA,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;AAnKG,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;"}
+{"version":3,"file":"boolean-input.element.js","names":["#onKeyDown"],"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"],"mappings":";;;;;;;;;;;;;;AAmBA,IAAsB,yBAAtB,cAAqD,8BACnD,WAAW,IAAI,UAAU,GACzB,EACF,CAAC,CAAC;;CAIA,IAAI,QAAQ;EACV,OAAO,KAAK;CACd;CACA,IAAI,MAAM,QAAgB;EACxB,MAAM,WAAW,MAAM;EACvB,KAAK,SAAS;EACd,KAAK,WAAW,aACd,KAAK,YAAY,KAAK,SAAS,KAAK,KAAK,SAAS,IACpD;EAEA,KAAK,cAAc,SAAS,QAAQ;CACtC;;;;;;;;CAoBA,IACI,UAAU;EACZ,OAAO,KAAK;CACd;CACA,IAAI,QAAQ,QAAQ;EAClB,MAAM,WAAW,KAAK;EACtB,KAAK,WAAW;EAChB,KAAK,WAAW,aACd,KAAK,YAAY,KAAK,SAAS,KAAK,KAAK,UAAU,OAAO,IAC5D;EACA,KAAK,cAAc,WAAW,QAAQ;CACxC;CAkCA,YAAY,YAAmC,YAAY;EACzD,MAAM;gBAhFS;uBAuBc;kBAEZ;uBA6BH;kBASL;kBASA;EAST,IAAI,KAAK,WAAW,IAClB,KAAK,SAAS;EAEhB,KAAK,YAAY;EACjB,KAAK,iBAAiB,WAAW,KAAKA,UAAU;CAClD;CAEA,iBAA6C;EAC3C,OAAO,KAAK;CACd;CAEA,WAAW,GAAwB;EACjC,IAAI,EAAE,OAAO,SACX,KAAK,OAAO;CAEhB;CAEA,WAA2B;EACzB,OAAO,KAAK;CACd;CAEA,oBAA2B;EACzB,MAAM,kBAAkB;EACxB,KAAK,UAAU,KAAK,aAAa,SAAS;CAC5C;;;;CAKA,MAAM,QAAQ;EACZ,MAAM,KAAK;EACX,KAAK,OAAO,MAAM;CACpB;CACA,MAAM,QAAQ;EACZ,MAAM,KAAK;EACX,KAAK,OAAO,MAAM;CACpB;CAEA,eAAuB,GAAU;EAC/B,EAAE,gBAAgB;EAClB,KAAK,WAAW;EAChB,KAAK,UAAU,KAAK,OAAO;EAC3B,KAAK,gBAAgB,KAAK,OAAO;EACjC,KAAK,cAAc,IAAI,qBAAqB,qBAAqB,MAAM,CAAC;CAC1E;CAUA,SAAS;EACP,OAAO,IAAI;;;;;qBAKM,KAAK,eAAe;sBACnB,KAAK,YAAY,KAAK,SAAS;qBAChC,KAAK,QAAQ;2BACP,KAAK,cAAc;0BACpB,KAAK,UAAU,SAAS,QAAQ;uBACnC,UACX,KAAK,aAAa,YAAY,KAAK,KAAK,SAAS,KAAA,CACnD,EAAE;4BACgB,UAChB,KAAK,aAAa,iBAAiB,KAAK,KAAA,CAC1C,EAAE;kBACM,KAAK,UAAU;UACvB,KAAK,eAAe,EAAE,GAAG,KAAK,YAAY,EAAE;;;CAGpD;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDL;;AACF;YAhMG,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAkB,SAAS;AAAK,CAAC,CAAA,GAAA,uBAAA,WAAA,iBAAA,KAAA,CAAA;YAYrE,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,uBAAA,WAAA,WAAA,IAAA;YAmB1B,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,uBAAA,WAAA,iBAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,uBAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,uBAAA,WAAA,YAAA,KAAA,CAAA;YAGzC,MAAM,QAAQ,CAAA,GAAA,uBAAA,WAAA,UAAA,KAAA,CAAA"}

package/dist/components/boolean-input/boolean-input.js

@@ -0,0 +1,3 @@
+import { UUIBooleanInputEvent } from "./UUIBooleanInputEvent.js";
+import { UUIBooleanInputElement } from "./boolean-input.element.js";
+export { UUIBooleanInputElement, UUIBooleanInputEvent };

package/dist/components/box/box.d.ts

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

package/dist/components/box/box.element.js

@@ -1,52 +1,63 @@
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUITextStyles } from "../../styles/uui-text.styles.js";
 import { LitElement, css } from "lit";
 import { property, state } from "lit/decorators.js";
-import { unsafeStatic, html } from "lit/static-html.js";
-import { UUITextStyles } from "../../styles/uui-text.styles.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
+import { html as html$1, unsafeStatic } from "lit/static-html.js";
+//#region src/components/box/box.element.ts
 function slotHasContent(target) {
-  return target ? target.assignedNodes({ flatten: true }).length > 0 : false;
+	return target ? target.assignedNodes({ flatten: true }).length > 0 : false;
 }
-const _UUIBoxElement = class _UUIBoxElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.headline = null;
-    this._headlineVariantTag = "h5";
-    this._headlineSlotHasContent = false;
-    this._headlineSlotChanged = (e) => {
-      this._headlineSlotHasContent = slotHasContent(e.target);
-    };
-    this._headerSlotHasContent = false;
-    this._headerSlotChanged = (e) => {
-      this._headerSlotHasContent = slotHasContent(e.target);
-    };
-    this._headerActionsSlotHasContent = false;
-    this._headerActionsSlotChanged = (e) => {
-      this._headerActionsSlotHasContent = slotHasContent(e.target);
-    };
-  }
-  set headlineVariant(value) {
-    this._headlineVariantTag = value;
-  }
-  get headlineVariant() {
-    return this._headlineVariantTag;
-  }
-  /**
-   * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within
-   * @returns {TemplateResult}
-   * @protected
-   * @method
-   */
-  renderHeader() {
-    return html`<div
+/**
+*  A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.
+*  @element uui-box
+*  @slot headline - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.
+*  @slot header - header area, use this for things that are not the headline but are located in the header.
+*  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.
+*  @slot - area for the content of the box
+*  @cssprop --uui-box-header-padding - overwrite the header padding
+*  @cssprop --uui-box-default-padding - overwrite the box padding
+*  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius-3)
+*  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)
+*/
+var UUIBoxElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.headline = null;
+		this._headlineVariantTag = "h5";
+		this._headlineSlotHasContent = false;
+		this._headlineSlotChanged = (e) => {
+			this._headlineSlotHasContent = slotHasContent(e.target);
+		};
+		this._headerSlotHasContent = false;
+		this._headerSlotChanged = (e) => {
+			this._headerSlotHasContent = slotHasContent(e.target);
+		};
+		this._headerActionsSlotHasContent = false;
+		this._headerActionsSlotChanged = (e) => {
+			this._headerActionsSlotHasContent = slotHasContent(e.target);
+		};
+	}
+	/**
+	* Changes the headline variant for accessibility for this box.
+	* Notice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)
+	* @type {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"}
+	* @attr
+	* @default "h5"
+	*/
+	set headlineVariant(value) {
+		this._headlineVariantTag = value;
+	}
+	get headlineVariant() {
+		return this._headlineVariantTag;
+	}
+	/**
+	* Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within
+	* @returns {TemplateResult}
+	* @protected
+	* @method
+	*/
+	renderHeader() {
+		return html$1`<div
       id="header"
       class="uui-text"
       style=${this._headerSlotHasContent || this._headlineSlotHasContent || this._headerActionsSlotHasContent || this.headline !== null ? "" : "display: none"}>
@@ -60,17 +71,15 @@ const _UUIBoxElement = class _UUIBoxElement extends LitElement {
       <slot name="header" @slotchange=${this._headerSlotChanged}></slot>
       <slot name="header-actions" @slotchange=${this._headerActionsSlotChanged}></slot>
     </div>`;
-  }
-  render() {
-    return html`
+	}
+	render() {
+		return html$1`
       ${this.renderHeader()}
       <slot></slot>
     `;
-  }
-};
-_UUIBoxElement.styles = [
-  UUITextStyles,
-  css`
+	}
+	static {
+		this.styles = [UUITextStyles, css`
       :host {
         display: block;
         border-width: var(--uui-box-border-width, 1px);
@@ -103,28 +112,16 @@ _UUIBoxElement.styles = [
         display: block;
         margin-left: auto;
       }
-    `
-];
-let UUIBoxElement = _UUIBoxElement;
-__decorateClass([
-  property({ type: String })
-], UUIBoxElement.prototype, "headline", 2);
-__decorateClass([
-  property({ attribute: "headline-variant" })
-], UUIBoxElement.prototype, "headlineVariant", 1);
-__decorateClass([
-  state()
-], UUIBoxElement.prototype, "_headlineVariantTag", 2);
-__decorateClass([
-  state()
-], UUIBoxElement.prototype, "_headlineSlotHasContent", 2);
-__decorateClass([
-  state()
-], UUIBoxElement.prototype, "_headerSlotHasContent", 2);
-__decorateClass([
-  state()
-], UUIBoxElement.prototype, "_headerActionsSlotHasContent", 2);
-export {
-  UUIBoxElement
+    `];
+	}
 };
-//# sourceMappingURL=box.element.js.map
+__decorate([property({ type: String })], UUIBoxElement.prototype, "headline", void 0);
+__decorate([property({ attribute: "headline-variant" })], UUIBoxElement.prototype, "headlineVariant", null);
+__decorate([state()], UUIBoxElement.prototype, "_headlineVariantTag", void 0);
+__decorate([state()], UUIBoxElement.prototype, "_headlineSlotHasContent", void 0);
+__decorate([state()], UUIBoxElement.prototype, "_headerSlotHasContent", void 0);
+__decorate([state()], UUIBoxElement.prototype, "_headerActionsSlotHasContent", void 0);
+//#endregion
+export { UUIBoxElement };
+
+//# sourceMappingURL=box.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"box.element.js","sources":["../../../src/components/box/box.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport type { UUIInterfaceHeading } from '../../internal/index.js';\nimport { html, unsafeStatic } from 'lit/static-html.js';\n\nfunction slotHasContent(target: EventTarget | null): boolean {\n  return target\n    ? (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0\n    : false;\n}\n\n/**\n *  A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.\n *  @element uui-box\n *  @slot headline - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.\n *  @slot header - header area, use this for things that are not the headline but are located in the header.\n *  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.\n *  @slot - area for the content of the box\n *  @cssprop --uui-box-header-padding - overwrite the header padding\n *  @cssprop --uui-box-default-padding - overwrite the box padding\n *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius-3)\n *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)\n */\nexport class UUIBoxElement extends LitElement {\n  /**\n   * Headline for this box, can also be set via the `headline` slot.\n   * @type string\n   * @attr\n   * @default null\n   */\n  @property({ type: String })\n  headline: string | null = null;\n\n  /**\n   * Changes the headline variant for accessibility for this box.\n   * Notice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)\n   * @type {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"}\n   * @attr\n   * @default \"h5\"\n   */\n  @property({ attribute: 'headline-variant' })\n  set headlineVariant(value: UUIInterfaceHeading) {\n    this._headlineVariantTag = value;\n  }\n  get headlineVariant() {\n    return this._headlineVariantTag;\n  }\n\n  @state()\n  private _headlineVariantTag: UUIInterfaceHeading = 'h5';\n\n  @state()\n  private _headlineSlotHasContent = false;\n  private readonly _headlineSlotChanged = (e: Event) => {\n    this._headlineSlotHasContent = slotHasContent(e.target);\n  };\n\n  @state()\n  private _headerSlotHasContent = false;\n  private readonly _headerSlotChanged = (e: Event) => {\n    this._headerSlotHasContent = slotHasContent(e.target);\n  };\n\n  @state()\n  private _headerActionsSlotHasContent = false;\n  private readonly _headerActionsSlotChanged = (e: Event) => {\n    this._headerActionsSlotHasContent = slotHasContent(e.target);\n  };\n\n  /**\n   * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within\n   * @returns {TemplateResult}\n   * @protected\n   * @method\n   */\n  protected renderHeader() {\n    /* eslint-disable lit/no-invalid-html, lit/binding-positions */\n    return html`<div\n      id=\"header\"\n      class=\"uui-text\"\n      style=${\n        this._headerSlotHasContent ||\n        this._headlineSlotHasContent ||\n        this._headerActionsSlotHasContent ||\n        this.headline !== null\n          ? ''\n          : 'display: none'\n      }>\n      <${unsafeStatic(this._headlineVariantTag)}\n        id=\"headline\"\n        class=\"uui-h5\"\n        style=${\n          this._headlineSlotHasContent || this.headline !== null\n            ? ''\n            : 'display: none'\n        }>\n        ${this.headline}\n        <slot name=\"headline\" @slotchange=${this._headlineSlotChanged}></slot>\n      </${unsafeStatic(this._headlineVariantTag)}>\n      <slot name=\"header\" @slotchange=${this._headerSlotChanged}></slot>\n      <slot name=\"header-actions\" @slotchange=${\n        this._headerActionsSlotChanged\n      }></slot>\n    </div>`;\n    /* eslint-enable lit/no-invalid-html, lit/binding-positions */\n  }\n\n  render() {\n    return html`\n      ${this.renderHeader()}\n      <slot></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        display: block;\n        border-width: var(--uui-box-border-width, 1px);\n        border-style: solid;\n        border-color: var(\n          --uui-box-border-color,\n          var(--uui-color-divider-standalone)\n        );\n        border-radius: var(--uui-box-border-radius, var(--uui-border-radius-3));\n        background-color: var(--uui-color-surface);\n      }\n\n      #header {\n        display: flex;\n        align-items: center;\n        column-gap: var(--uui-size-space-5);\n        border-bottom: 1px solid var(--uui-color-divider-standalone);\n        padding: var(\n          --uui-box-header-padding,\n          var(--uui-size-space-4) var(--uui-size-space-5)\n        );\n      }\n\n      slot:not([name]) {\n        display: block;\n        padding: var(--uui-box-default-padding, var(--uui-size-space-5));\n      }\n\n      slot[name='header-actions'] {\n        display: block;\n        margin-left: auto;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,SAAS,eAAe,QAAqC;AAC3D,SAAO,SACF,OAA2B,cAAc,EAAE,SAAS,MAAM,EAAE,SAAS,IACtE;AACN;AAcO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,WAA0B;AAkB1B,SAAQ,sBAA2C;AAGnD,SAAQ,0BAA0B;AAClC,SAAiB,uBAAuB,CAAC,MAAa;AACpD,WAAK,0BAA0B,eAAe,EAAE,MAAM;AAAA,IACxD;AAGA,SAAQ,wBAAwB;AAChC,SAAiB,qBAAqB,CAAC,MAAa;AAClD,WAAK,wBAAwB,eAAe,EAAE,MAAM;AAAA,IACtD;AAGA,SAAQ,+BAA+B;AACvC,SAAiB,4BAA4B,CAAC,MAAa;AACzD,WAAK,+BAA+B,eAAe,EAAE,MAAM;AAAA,IAC7D;AAAA,EAAA;AAAA,EA1BA,IAAI,gBAAgB,OAA4B;AAC9C,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EACA,IAAI,kBAAkB;AACpB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BU,eAAe;AAEvB,WAAO;AAAA;AAAA;AAAA,cAIH,KAAK,yBACL,KAAK,2BACL,KAAK,gCACL,KAAK,aAAa,OACd,KACA,eACN;AAAA,SACG,aAAa,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA,gBAIrC,KAAK,2BAA2B,KAAK,aAAa,OAC9C,KACA,eACN;AAAA,UACE,KAAK,QAAQ;AAAA,4CACqB,KAAK,oBAAoB;AAAA,UAC3D,aAAa,KAAK,mBAAmB,CAAC;AAAA,wCACR,KAAK,kBAAkB;AAAA,gDAEvD,KAAK,yBACP;AAAA;AAAA,EAGJ;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,cAAc;AAAA;AAAA;AAAA,EAGzB;AAuCF;AArCE,eAAyB,SAAS;AAAA,EAChC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7FG,IAAM,gBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,cAQX,WAAA,YAAA,CAAA;AAUI,gBAAA;AAAA,EADH,SAAS,EAAE,WAAW,mBAAA,CAAoB;AAAA,GAjBhC,cAkBP,WAAA,mBAAA,CAAA;AAQI,gBAAA;AAAA,EADP,MAAA;AAAM,GAzBI,cA0BH,WAAA,uBAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GA5BI,cA6BH,WAAA,2BAAA,CAAA;AAMA,gBAAA;AAAA,EADP,MAAA;AAAM,GAlCI,cAmCH,WAAA,yBAAA,CAAA;AAMA,gBAAA;AAAA,EADP,MAAA;AAAM,GAxCI,cAyCH,WAAA,gCAAA,CAAA;"}
+{"version":3,"file":"box.element.js","names":[],"sources":["../../../src/components/box/box.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport type { UUIInterfaceHeading } from '../../internal/index.js';\nimport { html, unsafeStatic } from 'lit/static-html.js';\n\nfunction slotHasContent(target: EventTarget | null): boolean {\n  return target\n    ? (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0\n    : false;\n}\n\n/**\n *  A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.\n *  @element uui-box\n *  @slot headline - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.\n *  @slot header - header area, use this for things that are not the headline but are located in the header.\n *  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.\n *  @slot - area for the content of the box\n *  @cssprop --uui-box-header-padding - overwrite the header padding\n *  @cssprop --uui-box-default-padding - overwrite the box padding\n *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius-3)\n *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)\n */\nexport class UUIBoxElement extends LitElement {\n  /**\n   * Headline for this box, can also be set via the `headline` slot.\n   * @type string\n   * @attr\n   * @default null\n   */\n  @property({ type: String })\n  headline: string | null = null;\n\n  /**\n   * Changes the headline variant for accessibility for this box.\n   * Notice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)\n   * @type {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"}\n   * @attr\n   * @default \"h5\"\n   */\n  @property({ attribute: 'headline-variant' })\n  set headlineVariant(value: UUIInterfaceHeading) {\n    this._headlineVariantTag = value;\n  }\n  get headlineVariant() {\n    return this._headlineVariantTag;\n  }\n\n  @state()\n  private _headlineVariantTag: UUIInterfaceHeading = 'h5';\n\n  @state()\n  private _headlineSlotHasContent = false;\n  private readonly _headlineSlotChanged = (e: Event) => {\n    this._headlineSlotHasContent = slotHasContent(e.target);\n  };\n\n  @state()\n  private _headerSlotHasContent = false;\n  private readonly _headerSlotChanged = (e: Event) => {\n    this._headerSlotHasContent = slotHasContent(e.target);\n  };\n\n  @state()\n  private _headerActionsSlotHasContent = false;\n  private readonly _headerActionsSlotChanged = (e: Event) => {\n    this._headerActionsSlotHasContent = slotHasContent(e.target);\n  };\n\n  /**\n   * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within\n   * @returns {TemplateResult}\n   * @protected\n   * @method\n   */\n  protected renderHeader() {\n    /* eslint-disable lit/no-invalid-html, lit/binding-positions */\n    return html`<div\n      id=\"header\"\n      class=\"uui-text\"\n      style=${\n        this._headerSlotHasContent ||\n        this._headlineSlotHasContent ||\n        this._headerActionsSlotHasContent ||\n        this.headline !== null\n          ? ''\n          : 'display: none'\n      }>\n      <${unsafeStatic(this._headlineVariantTag)}\n        id=\"headline\"\n        class=\"uui-h5\"\n        style=${\n          this._headlineSlotHasContent || this.headline !== null\n            ? ''\n            : 'display: none'\n        }>\n        ${this.headline}\n        <slot name=\"headline\" @slotchange=${this._headlineSlotChanged}></slot>\n      </${unsafeStatic(this._headlineVariantTag)}>\n      <slot name=\"header\" @slotchange=${this._headerSlotChanged}></slot>\n      <slot name=\"header-actions\" @slotchange=${\n        this._headerActionsSlotChanged\n      }></slot>\n    </div>`;\n    /* eslint-enable lit/no-invalid-html, lit/binding-positions */\n  }\n\n  render() {\n    return html`\n      ${this.renderHeader()}\n      <slot></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        display: block;\n        border-width: var(--uui-box-border-width, 1px);\n        border-style: solid;\n        border-color: var(\n          --uui-box-border-color,\n          var(--uui-color-divider-standalone)\n        );\n        border-radius: var(--uui-box-border-radius, var(--uui-border-radius-3));\n        background-color: var(--uui-color-surface);\n      }\n\n      #header {\n        display: flex;\n        align-items: center;\n        column-gap: var(--uui-size-space-5);\n        border-bottom: 1px solid var(--uui-color-divider-standalone);\n        padding: var(\n          --uui-box-header-padding,\n          var(--uui-size-space-4) var(--uui-size-space-5)\n        );\n      }\n\n      slot:not([name]) {\n        display: block;\n        padding: var(--uui-box-default-padding, var(--uui-size-space-5));\n      }\n\n      slot[name='header-actions'] {\n        display: block;\n        margin-left: auto;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;AAMA,SAAS,eAAe,QAAqC;CAC3D,OAAO,SACF,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,SAAS,IACtE;AACN;;;;;;;;;;;;;AAcA,IAAa,gBAAb,cAAmC,WAAW;;;kBAQlB;6BAkByB;iCAGjB;+BACO,MAAa;GACpD,KAAK,0BAA0B,eAAe,EAAE,MAAM;EACxD;+BAGgC;6BACO,MAAa;GAClD,KAAK,wBAAwB,eAAe,EAAE,MAAM;EACtD;sCAGuC;oCACO,MAAa;GACzD,KAAK,+BAA+B,eAAe,EAAE,MAAM;EAC7D;;;;;;;;;CA3BA,IACI,gBAAgB,OAA4B;EAC9C,KAAK,sBAAsB;CAC7B;CACA,IAAI,kBAAkB;EACpB,OAAO,KAAK;CACd;;;;;;;CA6BA,eAAyB;EAEvB,OAAO,MAAI;;;cAIP,KAAK,yBACL,KAAK,2BACL,KAAK,gCACL,KAAK,aAAa,OACd,KACA,gBACL;SACE,aAAa,KAAK,mBAAmB,EAAE;;;gBAItC,KAAK,2BAA2B,KAAK,aAAa,OAC9C,KACA,gBACL;UACC,KAAK,SAAS;4CACoB,KAAK,qBAAqB;UAC5D,aAAa,KAAK,mBAAmB,EAAE;wCACT,KAAK,mBAAmB;gDAExD,KAAK,0BACN;;CAGL;CAEA,SAAS;EACP,OAAO,MAAI;QACP,KAAK,aAAa,EAAE;;;CAG1B;;gBAEkC,CAChC,eACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCL;;AACF;YAzHG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YAUzB,SAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,GAAA,cAAA,WAAA,mBAAA,IAAA;YAQ1C,MAAM,CAAA,GAAA,cAAA,WAAA,uBAAA,KAAA,CAAA;YAGN,MAAM,CAAA,GAAA,cAAA,WAAA,2BAAA,KAAA,CAAA;YAMN,MAAM,CAAA,GAAA,cAAA,WAAA,yBAAA,KAAA,CAAA;YAMN,MAAM,CAAA,GAAA,cAAA,WAAA,gCAAA,KAAA,CAAA"}

package/dist/components/box/box.js

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

package/dist/components/box/box.js.map

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

package/dist/components/breadcrumbs/breadcrumb-item.element.js

@@ -1,46 +1,41 @@
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUIBreadcrumbItemElement = class _UUIBreadcrumbItemElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.lastItem = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  _onKeydown(e) {
-    if (e.key === "Enter") {
-      e.currentTarget.click();
-    }
-  }
-  renderLinkAndSeparator() {
-    const item = this.href ? html`<a id="link" href=${this.href}><slot></slot></a>` : html`<span
+//#region src/components/breadcrumbs/breadcrumb-item.element.ts
+/**
+* A breadcrumb-item to be used with the breadcrumbs component.
+*  @element uui-breadcrumb-item
+*  @slot - This slot displays elements inside the breadcrumb
+*  @csspart separator - change the content of the after element of this part to change the separator
+*/
+var UUIBreadcrumbItemElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.lastItem = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	_onKeydown(e) {
+		if (e.key === "Enter") e.currentTarget.click();
+	}
+	renderLinkAndSeparator() {
+		return html`${this.href ? html`<a id="link" href=${this.href}><slot></slot></a>` : html`<span
           id="link"
           tabindex="0"
           role="link"
           @keydown=${this._onKeydown}
           ><slot></slot
-        ></span>`;
-    return html`${item}<span part="separator"></span>`;
-  }
-  renderCurrent() {
-    return html`<span id="last-item"><slot></slot></span>`;
-  }
-  render() {
-    return html`${this.lastItem ? this.renderCurrent() : this.renderLinkAndSeparator()}`;
-  }
-};
-_UUIBreadcrumbItemElement.styles = [
-  css`
+        ></span>`}<span part="separator"></span>`;
+	}
+	renderCurrent() {
+		return html`<span id="last-item"><slot></slot></span>`;
+	}
+	render() {
+		return html`${this.lastItem ? this.renderCurrent() : this.renderLinkAndSeparator()}`;
+	}
+	static {
+		this.styles = [css`
       :host {
         font-size: var(--uui-type-small-size);
         color: currentColor;
@@ -65,7 +60,8 @@ _UUIBreadcrumbItemElement.styles = [
       a:focus-visible,
       span#link:focus-visible {
         border-radius: var(--uui-border-radius);
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       [part='separator']::after {
@@ -85,16 +81,15 @@ _UUIBreadcrumbItemElement.styles = [
         overflow: hidden;
         text-overflow: ellipsis;
       }
-    `
-];
-let UUIBreadcrumbItemElement = _UUIBreadcrumbItemElement;
-__decorateClass([
-  property()
-], UUIBreadcrumbItemElement.prototype, "href");
-__decorateClass([
-  property({ type: Boolean, attribute: "last-item" })
-], UUIBreadcrumbItemElement.prototype, "lastItem");
-export {
-  UUIBreadcrumbItemElement
+    `];
+	}
 };
-//# sourceMappingURL=breadcrumb-item.element.js.map
+__decorate([property()], UUIBreadcrumbItemElement.prototype, "href", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "last-item"
+})], UUIBreadcrumbItemElement.prototype, "lastItem", void 0);
+//#endregion
+export { UUIBreadcrumbItemElement };
+
+//# sourceMappingURL=breadcrumb-item.element.js.map

package/dist/components/breadcrumbs/breadcrumb-item.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.element.js","sources":["../../../src/components/breadcrumbs/breadcrumb-item.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * A breadcrumb-item to be used with the breadcrumbs component.\n *  @element uui-breadcrumb-item\n *  @slot - This slot displays elements inside the breadcrumb\n *  @csspart separator - change the content of the after element of this part to change the separator\n */\nexport class UUIBreadcrumbItemElement extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  /**\n   * Specifies the link href.\n   * @type {String}\n   * @default undefined\n   */\n  @property()\n  href?: string;\n\n  /**\n   * Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link\n   * @type {Boolean}\n   * @attr last-item\n   * @default 'false'\n   */\n  @property({ type: Boolean, attribute: 'last-item' })\n  lastItem = false;\n\n  private _onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      (e.currentTarget as HTMLElement).click();\n    }\n  }\n\n  renderLinkAndSeparator() {\n    const item = this.href\n      ? html`<a id=\"link\" href=${this.href}><slot></slot></a>`\n      : html`<span\n          id=\"link\"\n          tabindex=\"0\"\n          role=\"link\"\n          @keydown=${this._onKeydown}\n          ><slot></slot\n        ></span>`;\n\n    return html`${item}<span part=\"separator\"></span>`;\n  }\n\n  renderCurrent() {\n    return html`<span id=\"last-item\"><slot></slot></span>`;\n  }\n\n  render() {\n    return html`${this.lastItem\n      ? this.renderCurrent()\n      : this.renderLinkAndSeparator()}`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        font-size: var(--uui-type-small-size);\n        color: currentColor;\n      }\n\n      a,\n      a:visited,\n      span#link {\n        color: currentColor;\n        cursor: pointer;\n        text-decoration: underline;\n      }\n      a:hover,\n      span#link:hover {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      a:focus,\n      span#link:focus {\n        color: var(--uui-color-focus);\n      }\n\n      a:focus-visible,\n      span#link:focus-visible {\n        border-radius: var(--uui-border-radius);\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      [part='separator']::after {\n        content: '/';\n        speak: never;\n        position: relative;\n        top: 1px;\n        margin: -3px 1px 0;\n        color: var(--uui-color-border);\n      }\n\n      #link,\n      #last-item {\n        padding: 0 4px;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AASO,MAAM,4BAAN,MAAM,kCAAiC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAoBL,SAAA,WAAW;AAAA,EAAA;AAAA,EAnBX,oBAAoB;AAClB,UAAM,kBAAA;AAAA,EACR;AAAA,EAmBQ,WAAW,GAAkB;AACnC,QAAI,EAAE,QAAQ,SAAS;AACpB,QAAE,cAA8B,MAAA;AAAA,IACnC;AAAA,EACF;AAAA,EAEA,yBAAyB;AACvB,UAAM,OAAO,KAAK,OACd,yBAAyB,KAAK,IAAI,uBAClC;AAAA;AAAA;AAAA;AAAA,qBAIa,KAAK,UAAU;AAAA;AAAA;AAIhC,WAAO,OAAO,IAAI;AAAA,EACpB;AAAA,EAEA,gBAAgB;AACd,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,WACf,KAAK,kBACL,KAAK,wBAAwB;AAAA,EACnC;AAkDF;AAhDE,0BAAyB,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;AArDG,IAAM,2BAAN;AAWL,gBAAA;AAAA,EADC,SAAA;AAAS,GAVC,yBAWX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GAnBxC,yBAoBX,WAAA,UAAA;"}
+{"version":3,"file":"breadcrumb-item.element.js","names":[],"sources":["../../../src/components/breadcrumbs/breadcrumb-item.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * A breadcrumb-item to be used with the breadcrumbs component.\n *  @element uui-breadcrumb-item\n *  @slot - This slot displays elements inside the breadcrumb\n *  @csspart separator - change the content of the after element of this part to change the separator\n */\nexport class UUIBreadcrumbItemElement extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  /**\n   * Specifies the link href.\n   * @type {String}\n   * @default undefined\n   */\n  @property()\n  href?: string;\n\n  /**\n   * Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link\n   * @type {Boolean}\n   * @attr last-item\n   * @default 'false'\n   */\n  @property({ type: Boolean, attribute: 'last-item' })\n  lastItem = false;\n\n  private _onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      (e.currentTarget as HTMLElement).click();\n    }\n  }\n\n  renderLinkAndSeparator() {\n    const item = this.href\n      ? html`<a id=\"link\" href=${this.href}><slot></slot></a>`\n      : html`<span\n          id=\"link\"\n          tabindex=\"0\"\n          role=\"link\"\n          @keydown=${this._onKeydown}\n          ><slot></slot\n        ></span>`;\n\n    return html`${item}<span part=\"separator\"></span>`;\n  }\n\n  renderCurrent() {\n    return html`<span id=\"last-item\"><slot></slot></span>`;\n  }\n\n  render() {\n    return html`${this.lastItem\n      ? this.renderCurrent()\n      : this.renderLinkAndSeparator()}`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        font-size: var(--uui-type-small-size);\n        color: currentColor;\n      }\n\n      a,\n      a:visited,\n      span#link {\n        color: currentColor;\n        cursor: pointer;\n        text-decoration: underline;\n      }\n      a:hover,\n      span#link:hover {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      a:focus,\n      span#link:focus {\n        color: var(--uui-color-focus);\n      }\n\n      a:focus-visible,\n      span#link:focus-visible {\n        border-radius: var(--uui-border-radius);\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      [part='separator']::after {\n        content: '/';\n        speak: never;\n        position: relative;\n        top: 1px;\n        margin: -3px 1px 0;\n        color: var(--uui-color-border);\n      }\n\n      #link,\n      #last-item {\n        padding: 0 4px;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;AASA,IAAa,2BAAb,cAA8C,WAAW;;;kBAoB5C;;CAnBX,oBAAoB;EAClB,MAAM,kBAAkB;CAC1B;CAmBA,WAAmB,GAAkB;EACnC,IAAI,EAAE,QAAQ,SACZ,EAAG,cAA8B,MAAM;CAE3C;CAEA,yBAAyB;EAWvB,OAAO,IAAI,GAVE,KAAK,OACd,IAAI,qBAAqB,KAAK,KAAK,sBACnC,IAAI;;;;qBAIS,KAAK,WAAW;;kBAId;CACrB;CAEA,gBAAgB;EACd,OAAO,IAAI;CACb;CAEA,SAAS;EACP,OAAO,IAAI,GAAG,KAAK,WACf,KAAK,cAAc,IACnB,KAAK,uBAAuB;CAClC;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CL;;AACF;YA3FG,SAAS,CAAA,GAAA,yBAAA,WAAA,QAAA,KAAA,CAAA;YAST,SAAS;CAAE,MAAM;CAAS,WAAW;AAAY,CAAC,CAAA,GAAA,yBAAA,WAAA,YAAA,KAAA,CAAA"}

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -8,4 +8,3 @@ declare global {
 }
 export * from './breadcrumb-item.element.js';
 export * from './breadcrumbs.element.js';
-export { UUIBreadcrumbsElement as default } from './breadcrumbs.element.js';

package/dist/components/breadcrumbs/breadcrumbs.element.js

@@ -1,36 +1,32 @@
-import { LitElement, html, css } from "lit";
-import { queryAssignedElements } from "lit/decorators.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UUIBreadcrumbItemElement } from "./breadcrumb-item.element.js";
 import "../responsive-container/responsive-container.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUIBreadcrumbsElement = class _UUIBreadcrumbsElement extends LitElement {
-  elementIsBreadcrumbItem(el) {
-    return el instanceof UUIBreadcrumbItemElement;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("aria-label", "breadcrumb");
-    this.setAttribute("role", "navigation");
-  }
-  handleSlotChange() {
-    if (this.slotNodes.length > 0) {
-      const lastItem = this.slotNodes.at(-1);
-      lastItem.setAttribute("aria-current", "page");
-      if (this.elementIsBreadcrumbItem(lastItem)) {
-        lastItem.lastItem = true;
-      }
-    }
-  }
-  render() {
-    return html`<uui-responsive-container
+import { LitElement, css, html } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+//#region src/components/breadcrumbs/breadcrumbs.element.ts
+/**
+* A breadcrumbs component to be used in combination with the uui-breadcrumb-item.
+*  @element uui-breadcrumbs
+*  @slot - Slot to display nested breadcrumb items. It supports `<uui-breadcrumb-item>` elements or elements containing the `role="listitem"` attribute
+*/
+var UUIBreadcrumbsElement = class extends LitElement {
+	elementIsBreadcrumbItem(el) {
+		return el instanceof UUIBreadcrumbItemElement;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-label", "breadcrumb");
+		this.setAttribute("role", "navigation");
+	}
+	handleSlotChange() {
+		if (this.slotNodes.length > 0) {
+			const lastItem = this.slotNodes.at(-1);
+			lastItem.setAttribute("aria-current", "page");
+			if (this.elementIsBreadcrumbItem(lastItem)) lastItem.lastItem = true;
+		}
+	}
+	render() {
+		return html`<uui-responsive-container
       id="breadcrumbs-list"
       collapse="start">
       <span slot="trigger-content">
@@ -38,10 +34,9 @@ const _UUIBreadcrumbsElement = class _UUIBreadcrumbsElement extends LitElement {
       </span>
       <slot @slotchange=${this.handleSlotChange}></slot>
     </uui-responsive-container>`;
-  }
-};
-_UUIBreadcrumbsElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: flex;
       }
@@ -72,16 +67,14 @@ _UUIBreadcrumbsElement.styles = [
         color: var(--uui-color-border); /* Matches breadcrumb separator */
         margin-left: var(--uui-size-2);
       }
-    `
-];
-let UUIBreadcrumbsElement = _UUIBreadcrumbsElement;
-__decorateClass([
-  queryAssignedElements({
-    flatten: true,
-    selector: "uui-breadcrumb-item, [uui-breadcrumb-item], [role=listitem]"
-  })
-], UUIBreadcrumbsElement.prototype, "slotNodes");
-export {
-  UUIBreadcrumbsElement
+    `];
+	}
 };
-//# sourceMappingURL=breadcrumbs.element.js.map
+__decorate([queryAssignedElements({
+	flatten: true,
+	selector: "uui-breadcrumb-item, [uui-breadcrumb-item], [role=listitem]"
+})], UUIBreadcrumbsElement.prototype, "slotNodes", void 0);
+//#endregion
+export { UUIBreadcrumbsElement };
+
+//# sourceMappingURL=breadcrumbs.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.element.js","sources":["../../../src/components/breadcrumbs/breadcrumbs.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\n\nimport { UUIBreadcrumbItemElement } from './breadcrumb-item.element.js';\nimport '../responsive-container/responsive-container.js';\n\n/**\n * A breadcrumbs component to be used in combination with the uui-breadcrumb-item.\n *  @element uui-breadcrumbs\n *  @slot - Slot to display nested breadcrumb items. It supports `<uui-breadcrumb-item>` elements or elements containing the `role=\"listitem\"` attribute\n */\nexport class UUIBreadcrumbsElement extends LitElement {\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-breadcrumb-item, [uui-breadcrumb-item], [role=listitem]',\n  })\n  private readonly slotNodes!: HTMLElement[];\n\n  private elementIsBreadcrumbItem(el: unknown): el is UUIBreadcrumbItemElement {\n    return el instanceof UUIBreadcrumbItemElement;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('aria-label', 'breadcrumb');\n    this.setAttribute('role', 'navigation');\n  }\n\n  handleSlotChange() {\n    if (this.slotNodes.length > 0) {\n      const lastItem = this.slotNodes.at(-1)!;\n      lastItem.setAttribute('aria-current', 'page');\n\n      if (this.elementIsBreadcrumbItem(lastItem)) {\n        lastItem.lastItem = true;\n      }\n    }\n  }\n\n  render() {\n    return html`<uui-responsive-container\n      id=\"breadcrumbs-list\"\n      collapse=\"start\">\n      <span slot=\"trigger-content\">\n        <span class=\"ellipsis\">…</span> <span class=\"separator\">/</span>\n      </span>\n      <slot @slotchange=${this.handleSlotChange}></slot>\n    </uui-responsive-container>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      #breadcrumbs-list {\n        display: flex;\n        list-style-type: decimal;\n        margin-block-start: 0em;\n        margin-block-end: 0em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding-inline-start: 0px;\n      }\n      uui-responsive-container {\n        --uui-responsive-container-gap: 0;\n      }\n\n      /* Style the trigger content to match breadcrumb items */\n      [slot='trigger-content'] {\n        font-size: var(--uui-type-small-size);\n      }\n\n      [slot='trigger-content'] .ellipsis {\n        color: currentColor; /* Black/default text color */\n      }\n\n      [slot='trigger-content'] .separator {\n        color: var(--uui-color-border); /* Matches breadcrumb separator */\n        margin-left: var(--uui-size-2);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAO5C,wBAAwB,IAA6C;AAC3E,WAAO,cAAc;AAAA,EACvB;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,cAAc,YAAY;AAC5C,SAAK,aAAa,QAAQ,YAAY;AAAA,EACxC;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,UAAU,SAAS,GAAG;AAC7B,YAAM,WAAW,KAAK,UAAU,GAAG,EAAE;AACrC,eAAS,aAAa,gBAAgB,MAAM;AAE5C,UAAI,KAAK,wBAAwB,QAAQ,GAAG;AAC1C,iBAAS,WAAW;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMe,KAAK,gBAAgB;AAAA;AAAA,EAE7C;AAoCF;AAlCE,uBAAyB,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;AAxCG,IAAM,wBAAN;AAKY,gBAAA;AAAA,EAJhB,sBAAsB;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,CACX;AAAA,GAJU,sBAKM,WAAA,WAAA;"}
+{"version":3,"file":"breadcrumbs.element.js","names":[],"sources":["../../../src/components/breadcrumbs/breadcrumbs.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\n\nimport { UUIBreadcrumbItemElement } from './breadcrumb-item.element.js';\nimport '../responsive-container/responsive-container.js';\n\n/**\n * A breadcrumbs component to be used in combination with the uui-breadcrumb-item.\n *  @element uui-breadcrumbs\n *  @slot - Slot to display nested breadcrumb items. It supports `<uui-breadcrumb-item>` elements or elements containing the `role=\"listitem\"` attribute\n */\nexport class UUIBreadcrumbsElement extends LitElement {\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-breadcrumb-item, [uui-breadcrumb-item], [role=listitem]',\n  })\n  private readonly slotNodes!: HTMLElement[];\n\n  private elementIsBreadcrumbItem(el: unknown): el is UUIBreadcrumbItemElement {\n    return el instanceof UUIBreadcrumbItemElement;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('aria-label', 'breadcrumb');\n    this.setAttribute('role', 'navigation');\n  }\n\n  handleSlotChange() {\n    if (this.slotNodes.length > 0) {\n      const lastItem = this.slotNodes.at(-1)!;\n      lastItem.setAttribute('aria-current', 'page');\n\n      if (this.elementIsBreadcrumbItem(lastItem)) {\n        lastItem.lastItem = true;\n      }\n    }\n  }\n\n  render() {\n    return html`<uui-responsive-container\n      id=\"breadcrumbs-list\"\n      collapse=\"start\">\n      <span slot=\"trigger-content\">\n        <span class=\"ellipsis\">…</span> <span class=\"separator\">/</span>\n      </span>\n      <slot @slotchange=${this.handleSlotChange}></slot>\n    </uui-responsive-container>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      #breadcrumbs-list {\n        display: flex;\n        list-style-type: decimal;\n        margin-block-start: 0em;\n        margin-block-end: 0em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding-inline-start: 0px;\n      }\n      uui-responsive-container {\n        --uui-responsive-container-gap: 0;\n      }\n\n      /* Style the trigger content to match breadcrumb items */\n      [slot='trigger-content'] {\n        font-size: var(--uui-type-small-size);\n      }\n\n      [slot='trigger-content'] .ellipsis {\n        color: currentColor; /* Black/default text color */\n      }\n\n      [slot='trigger-content'] .separator {\n        color: var(--uui-color-border); /* Matches breadcrumb separator */\n        margin-left: var(--uui-size-2);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,wBAAb,cAA2C,WAAW;CAOpD,wBAAgC,IAA6C;EAC3E,OAAO,cAAc;CACvB;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,KAAK,aAAa,cAAc,YAAY;EAC5C,KAAK,aAAa,QAAQ,YAAY;CACxC;CAEA,mBAAmB;EACjB,IAAI,KAAK,UAAU,SAAS,GAAG;GAC7B,MAAM,WAAW,KAAK,UAAU,GAAG,EAAE;GACrC,SAAS,aAAa,gBAAgB,MAAM;GAE5C,IAAI,KAAK,wBAAwB,QAAQ,GACvC,SAAS,WAAW;EAExB;CACF;CAEA,SAAS;EACP,OAAO,IAAI;;;;;;0BAMW,KAAK,iBAAiB;;CAE9C;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCL;;AACF;YAxEG,sBAAsB;CACrB,SAAS;CACT,UAAU;AACZ,CAAC,CAAA,GAAA,sBAAA,WAAA,aAAA,KAAA,CAAA"}

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -1,11 +1,10 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUIBreadcrumbItemElement } from "./breadcrumb-item.element.js";
 import { UUIBreadcrumbsElement } from "./breadcrumbs.element.js";
+//#region src/components/breadcrumbs/breadcrumbs.ts
 defineElement("uui-breadcrumb-item", UUIBreadcrumbItemElement);
 defineElement("uui-breadcrumbs", UUIBreadcrumbsElement);
-export {
-  UUIBreadcrumbItemElement,
-  UUIBreadcrumbsElement,
-  UUIBreadcrumbsElement as default
-};
-//# sourceMappingURL=breadcrumbs.js.map
+//#endregion
+export { UUIBreadcrumbItemElement, UUIBreadcrumbsElement };
+
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/components/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../src/components/breadcrumbs/breadcrumbs.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIBreadcrumbItemElement } from './breadcrumb-item.element.js';\nimport { UUIBreadcrumbsElement } from './breadcrumbs.element.js';\n\ndefineElement('uui-breadcrumb-item', UUIBreadcrumbItemElement);\ndefineElement('uui-breadcrumbs', UUIBreadcrumbsElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-breadcrumb-item': UUIBreadcrumbItemElement;\n    'uui-breadcrumbs': UUIBreadcrumbsElement;\n  }\n}\n\nexport * from './breadcrumb-item.element.js';\nexport * from './breadcrumbs.element.js';\nexport { UUIBreadcrumbsElement as default } from './breadcrumbs.element.js';\n"],"names":[],"mappings":";;;AAIA,cAAc,uBAAuB,wBAAwB;AAC7D,cAAc,mBAAmB,qBAAqB;"}
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../../src/components/breadcrumbs/breadcrumbs.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIBreadcrumbItemElement } from './breadcrumb-item.element.js';\nimport { UUIBreadcrumbsElement } from './breadcrumbs.element.js';\n\ndefineElement('uui-breadcrumb-item', UUIBreadcrumbItemElement);\ndefineElement('uui-breadcrumbs', UUIBreadcrumbsElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-breadcrumb-item': UUIBreadcrumbItemElement;\n    'uui-breadcrumbs': UUIBreadcrumbsElement;\n  }\n}\n\nexport * from './breadcrumb-item.element.js';\nexport * from './breadcrumbs.element.js';\n"],"mappings":";;;;AAIA,cAAc,uBAAuB,wBAAwB;AAC7D,cAAc,mBAAmB,qBAAqB"}

package/dist/components/button/button.d.ts

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