@odx/foundation 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/list/list-item.d.ts

@@ -9,6 +9,7 @@ declare global {
 declare const OdxListItem_base: import('../../lib/main.js').Constructor<CanBeSelected> & import('../../lib/main.js').Constructor<CanBeExpanded> & typeof BaseButton;
 export declare class OdxListItem extends OdxListItem_base {
     #private;
+    expandControl: HTMLElement;
     compact: boolean;
     muted: boolean;
     withControl: boolean;

package/dist/components.js

@@ -12,7 +12,7 @@ import { g as clamp, R as RovingTabindexController, r as round, i as debounce, m
 import { styleMap } from 'lit/directives/style-map.js';
 import { createContext, consume, provide } from '@lit/context';
 
-const styles$1b = ":host{display:block}";
+const styles$1b = ":host{display:block;padding-block:var(--odx-size-37)}";
 
 var __defProp$1m = Object.defineProperty;
 var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
@@ -79,7 +79,7 @@ OdxAccordionHeader = __decorateClass$1m([
   customElement("odx-accordion-header", [styles$1b])
 ], OdxAccordionHeader);
 
-const styles$1a = "@layer base{:host{display:block}odx-separator{margin:0}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:last-of-type) odx-separator{display:none}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}}";
+const styles$1a = "@layer base{:host{display:block}odx-separator{--block-space: 0}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:last-of-type) odx-separator{display:none}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}}";
 
 var __defProp$1l = Object.defineProperty;
 var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
@@ -2345,7 +2345,7 @@ OdxLineClamp = __decorateClass$M([
   customElement("odx-line-clamp", [styles$I])
 ], OdxLineClamp);
 
-const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}.base,.spinner{padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200))}.spinner{padding-inline-end:var(--odx-size-100)}.base{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;line-height:var(--odx-typography-line-height-2)}.base:after{display:block;block-size:var(--odx-size-px);background-color:var(--odx-color-separator);position:absolute;inset:auto var(--odx-size-37) -1px;transition:var(--odx-transition-reduced);transition-property:opacity;z-index:0}:host(:is(:not(:last-of-type),[expanded]):not(:is([aria-current],[aria-disabled=\"true\"]))) .base:after{content:\"\"}.content{margin-inline-end:auto}.base>*{--odx-focus-ring-offset: 0}[part=control]::part(icon){transition:var(--odx-transition-reduced);transition-property:transform}}@layer variant{:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([aria-expanded=\"true\"]){[part=control]::part(icon){transform:rotate(180deg)}}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}}";
+const styles$H = "@layer base{:host{--indent-level: 0;--_block-size: var(--odx-size-300);--_padding-block: var(--odx-size-75);--_padding-inline: var(--odx-size-50);--_margin-icon: 0;display:flex;flex-direction:column;max-inline-size:100%;block-size:auto;place-items:initial}.base,.spinner{padding-inline-start:calc(var(--odx-size-50) + var(--indent-level) * var(--odx-size-200))}.spinner{padding-inline-end:var(--odx-size-100)}.base{block-size:var(--_block-size);text-align:start;place-content:flex-start;outline-offset:calc(-1 * var(--odx-focus-ring-offset));z-index:1;line-height:var(--odx-typography-line-height-2)}.base:after{display:block;block-size:var(--odx-size-px);background-color:var(--odx-color-separator);position:absolute;inset:auto var(--odx-size-37) -1px;transition:var(--odx-transition-reduced);transition-property:opacity;z-index:0}:host(:is(:not(:last-of-type),[expanded]):not(:is([aria-current],[aria-disabled=\"true\"]))) .base:after{content:\"\"}.content{margin-inline-end:auto}.base>*{--odx-focus-ring-offset: 0}[part=expand-control]::part(icon){transition:var(--odx-transition-reduced)}}@layer variant{.base:has([part=expand-control]:active){--_color-background-pressed: var(--_color-background-hover)}:host(:not([compact])){::slotted(odx-icon){margin-inline:var(--odx-size-37)}}:host([compact]){--_block-size: var(--odx-size-225);[part=expand-control]{--_icon-size: var(--odx-size-150)}}}@layer state{:host(:not([muted]):hover):after{opacity:0}:host([muted]:not([aria-disabled=\"true\"])){--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);cursor:default}:host([aria-current]){--_color-background: var(--odx-color-selected);--_color-background-hover: var(--odx-color-selected-hover)}:host([aria-current][aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill-selected);--_color-background-hover: var(--_color-background);--_color-background-pressed: var(--_color-background);--_color-foreground: var(--odx-color-disabled-foreground-selected);cursor:not-allowed}:host([aria-expanded=\"true\"]) [part=expand-control]::part(icon){--rotate: 180deg}::slotted(odx-list){--item-indent-level: calc(var(--indent-level) + 1)}}";
 
 var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
@@ -2372,7 +2372,7 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
     this.withControl = false;
     this.withExpandedIndicator = false;
     __privateAdd$h(this, _handleClick$4, (event) => {
-      const expandControl = this.shadowRoot?.querySelector(this.withControl ? ".expand-control" : ".base");
+      const expandControl = this.withControl ? this.expandControl : this.shadowRoot?.querySelector(".base");
       if (!getElementFromEvent(event, (node) => node === expandControl)) return;
       this.toggle();
       if (!this.expanded) return;
@@ -2404,12 +2404,13 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
     `;
   }
   renderContent() {
+    const controlSize = this.compact ? ButtonSize.SM : void 0;
     return html`
       ${super.renderContent(false)}
       ${when(
       this.withExpandedIndicator || this.isExpandable(),
       () => html`
-          <odx-icon-button part="control" icon="core::chevron-down" size=${this.compact ? "sm" : "md"} variant="ghost" ?disabled=${this.disabled} ?inert=${!this.withControl}>
+          <odx-icon-button class="expand-control" part="expand-control" icon="core::chevron-down" size=${optionalAttr(controlSize)} variant="ghost" ?disabled=${this.disabled} ?inert=${!this.withControl}>
           </odx-icon-button>
         `
     )}
@@ -2426,6 +2427,9 @@ let OdxListItem = class extends CanBeSelected(CanBeExpanded(BaseButton)) {
   }
 };
 _handleClick$4 = new WeakMap();
+__decorateClass$L([
+  query(".expand-control")
+], OdxListItem.prototype, "expandControl", 2);
 __decorateClass$L([
   property({ type: Boolean, reflect: true })
 ], OdxListItem.prototype, "compact", 2);
@@ -4981,7 +4985,7 @@ OdxToggleButton = __decorateClass$4([
   customElement("odx-toggle-button", [styles$3])
 ], OdxToggleButton);
 
-const styles$2 = "@layer base{:host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow)}.base{overflow:hidden}.content{transition:var(--odx-transition-slow);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}::slotted(*){background-color:transparent}}@layer state{:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--odx-size-25));visibility:hidden}}}";
+const styles$2 = "@layer base{:host{--offset-y: calc(-1 * var(--odx-size-25));--transition: var(--odx-transition-default);display:grid;grid-template-rows:1fr;transition:var(--transition)}.base{overflow:hidden}.content{transition:var(--transition);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}::slotted(*){background-color:transparent}}@layer state{:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--offset-y));visibility:hidden}}}";
 
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;

package/dist/main.js

@@ -155,7 +155,7 @@ class SlotFallbackDirective extends Directive {
 }
 const emptySlotFallbackFix = directive(SlotFallbackDirective);
 
-const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
+const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}odx-icon{transition:var(--odx-transition-default);transition-property:transform;transform:rotate(var(--rotate),0deg)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}odx-list-item:has(:is(odx-button,odx-icon-button,odx-list-item::part(control)):not([aria-disabled=true]):active){--_color-background-pressed: var(--_color-background-hover)}}@layer reset{:host{border:none;border-color:transparent;outline:none}}";
 
 function mergeStyleSheets(...stylesheets) {
   const mergedStyles = [];

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-primary-rest) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--odx-color-foreground-base);background-color:var(--odx-color-background-cool);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-typography-font-size-base);line-height:var(--odx-typography-line-height-base)}}
+@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}odx-icon{transition:var(--odx-transition-default);transition-property:transform;transform:rotate(var(--rotate),0deg)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}odx-list-item:has(:is(odx-button,odx-icon-button,odx-list-item::part(control)):not([aria-disabled=true]):active){--_color-background-pressed: var(--_color-background-hover)}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-primary-rest) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--odx-color-foreground-base);background-color:var(--odx-color-background-cool);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-typography-font-size-base);line-height:var(--odx-typography-line-height-base)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",