@odx/foundation 1.0.0-beta.170 → 1.0.0-beta.171

package/dist/components/header/header.d.ts

@@ -1,12 +1,22 @@
-import { CustomElement } from '../../lib/main.js';
+import { CustomElement, ValuesOf } from '../../lib/main.js';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-header': OdxHeader;
     }
 }
+export type HeaderSize = ValuesOf<typeof HeaderSize>;
+export declare const HeaderSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "MD" | "LG">;
 export declare class OdxHeader extends CustomElement {
     #private;
+    size: HeaderSize;
     connectedCallback(): void;
     protected render(): TemplateResult;
 }

package/dist/components/text/text.d.ts

@@ -31,5 +31,5 @@ export declare class OdxText extends CustomElement {
     strong: boolean;
     inline: boolean;
     size?: TextSize;
-    variant: TextVariant;
+    variant?: TextVariant;
 }

package/dist/components.js

@@ -1648,28 +1648,38 @@ __decorateClass([
 ], _OdxGradientOverlay.prototype, "size", 2);
 let OdxGradientOverlay = _OdxGradientOverlay;
 
-const styles$U = ":host{display:block;position:relative}.base{display:flex;position:relative;gap:var(--odx-spacing-75);place-items:center;z-index:1;background-color:var(--odx-color-background-level-1);padding-inline:var(--odx-spacing-150);block-size:var(--odx-size-300)}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){margin-right:auto}::slotted(odx-separator){--size: var(--odx-size-150);--inner-spacing: 0px}::slotted(odx-search-bar){flex:1 1 auto}@media screen and (width <= 600px){odx-logo{display:none}}";
+const styles$U = ":host{display:block;position:relative;block-size:var(--odx-size-300)}.base{display:flex;position:relative;gap:var(--odx-spacing-75);place-items:center;z-index:1;padding-inline:var(--odx-spacing-150);block-size:100%}.background{position:absolute;inset:0;z-index:0;box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-search-bar){flex:1 1 auto;max-inline-size:25ch}::slotted(odx-separator){--size: var(--odx-size-150);--inner-spacing: 0px}.actions{flex:1 1 auto;flex-wrap:nowrap;justify-content:flex-end;margin-inline-start:auto}:host([size=\"lg\"]){block-size:var(--odx-size-500)}@media screen and (width <= 600px){odx-logo{display:none}}";
 
-class OdxHeader extends CustomElement {
+const HeaderSize = pick(Size, ["MD", "LG"]);
+const _OdxHeader = class _OdxHeader extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.size = HeaderSize.MD;
+    this.#handleSlotChange = () => {
+      const titleElement = getAssignedElement(this.renderRoot, { selector: OdxTitle.tagName });
+      if (!titleElement) return;
+      titleElement.ariaLevel = "1";
+      titleElement.role = "heading";
+      titleElement.size = TitleSize.XS;
+      titleElement.classList.add("odx-no-overflow");
+    };
+  }
   static {
-    customElement("odx-header", styles$U)(OdxHeader);
+    customElement("odx-header", styles$U)(_OdxHeader);
   }
   connectedCallback() {
     super.connectedCallback();
     this.role = "banner";
   }
   render() {
-    return html`<div class="base"><slot name="prefix"></slot><odx-logo size="sm"></odx-logo><slot @slotchange="${this.#handleSlotChange}"></slot><slot name="actions"></slot></div><div class="background"></div>`;
-  }
-  #handleSlotChange = () => {
-    const titleElement = getAssignedElement(this.renderRoot, { selector: OdxTitle.tagName });
-    if (!titleElement) return;
-    titleElement.ariaLevel = "1";
-    titleElement.role = "heading";
-    titleElement.size = TitleSize.XS;
-    titleElement.classList.add("odx-no-overflow");
-  };
-}
+    return html`<div class="base"><slot name="prefix"></slot><odx-logo size="sm"></odx-logo><slot @slotchange="${this.#handleSlotChange}"></slot>${optionalSlot(this, "actions", "odx-cluster")}</div><div class="background"></div>`;
+  }
+  #handleSlotChange;
+};
+__decorateClass([
+  property({ reflect: true, useDefault: true })
+], _OdxHeader.prototype, "size", 2);
+let OdxHeader = _OdxHeader;
 
 const styles$T = ":host{display:flex;gap:var(--odx-spacing-75);align-items:center;block-size:100%}::slotted(odx-separator){--size: var(--odx-size-150);--spacing: 0px}";
 
@@ -2178,7 +2188,7 @@ __decorateClass([
 ], _OdxInput.prototype, "value", 2);
 let OdxInput = _OdxInput;
 
-const styles$N = ":host{--_label-color: inherit;--_value-color: var(--odx-color-foreground-rest);display:grid;grid-template:\"prefix .\" \"prefix .\" auto / auto 1fr;block-size:var(--odx-size-300)}.label{align-self:flex-end;line-height:var(--odx-breakpoint-line-height-p-base);font-size:var(--odx-breakpoint-font-size-p-base)}.value{color:var(--odx-color-foreground-rest);font-size:var(--odx-breakpoint-font-size-heading-4)}:host([size=\"sm\"]){block-size:var(--odx-size-225);.label{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-2)}.value{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}}:host([size=\"lg\"]){column-gap:var(--odx-spacing-25);block-size:var(--odx-size-400);.value{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}}.prefix{display:flex;grid-area:prefix;align-items:center;justify-content:center;block-size:100%;aspect-ratio:1}";
+const styles$N = ":host{--_label-color: inherit;--_value-color: var(--odx-color-foreground-rest);display:grid;grid-template:\"prefix .\" \"prefix .\" auto / auto 1fr;column-gap:var(--odx-spacing-50);align-items:center;block-size:var(--odx-size-300)}.label{align-self:flex-end;line-height:var(--odx-breakpoint-line-height-p-base);font-size:var(--odx-breakpoint-font-size-p-base)}.value{color:var(--odx-color-foreground-rest);font-size:var(--odx-breakpoint-font-size-heading-4)}:host([size=\"sm\"]){column-gap:var(--odx-spacing-25);block-size:var(--odx-size-225);.label{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-2)}.value{line-height:var(--odx-breakpoint-line-height-heading-6);font-size:var(--odx-breakpoint-font-size-heading-6)}}:host([size=\"lg\"]){column-gap:var(--odx-spacing-75);block-size:var(--odx-size-400);.value{line-height:var(--odx-breakpoint-line-height-heading-3);font-size:var(--odx-breakpoint-font-size-heading-3)}}::slotted([slot=\"prefix\"]){grid-area:prefix}";
 
 const KpiSize = pick(Size, ["SM", "MD", "LG"]);
 const KpiVariant = pick(Variant, ["NEUTRAL", "ACCENT", "DANGER", "SUCCESS"]);
@@ -2194,7 +2204,7 @@ const _OdxKpi = class _OdxKpi extends CustomElement {
     customElement("odx-kpi", styles$N)(_OdxKpi);
   }
   render() {
-    return html`${optionalSlot(this, "prefix")}<odx-text class="label odx-no-overflow">${this.label}</odx-text><odx-title class="value odx-no-overflow"><odx-text inline variant="${this.variant}">${this.value}</odx-text>${when(this.unit, (unit) => html`<odx-text inline size="md">${unit}</odx-text>`)}</odx-title>`;
+    return html`<slot name="prefix" class="prefix"></slot><odx-text class="label odx-no-overflow">${this.label}</odx-text><odx-title class="value odx-no-overflow"><odx-text inline variant="${this.variant}">${this.value}</odx-text>${when(this.unit, (unit) => html`<odx-text inline size="md">${unit}</odx-text>`)}</odx-title>`;
   }
 };
 __decorateClass([
@@ -2861,7 +2871,7 @@ class OdxOption extends OptionControl {
   }
 }
 
-const styles$z = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-base);padding-inline:var(--odx-spacing-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--header-size, 0);grid-area:subheader}.content{grid-area:content;block-size:100%}.footer{grid-area:footer}::slotted(odx-page-layout){min-block-size:100%}:host([alignment=\"center\"]){.subheader,.content{margin-inline:auto}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
+const styles$z = ":host{--max-inline-size: var(--odx-page-max-inline-size, 100%);--scroll-margin-block-start: calc(var(--header-size, 0px) + var(--subheader-size, 0px));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky;z-index:99}.subheader,.content{background-color:var(--odx-color-background-base);padding-inline:var(--odx-spacing-75);inline-size:100%;max-inline-size:var(--max-inline-size)}.header{inset-block-start:0;grid-area:header}.subheader{inset-block-start:var(--header-size, 0);grid-area:subheader}.content{grid-area:content;block-size:100%}.footer{grid-area:footer}::slotted(odx-page-layout){min-block-size:100%}:host([alignment=\"center\"]){.header,.subheader,.content{margin-inline:auto}.header{inline-size:100%;max-inline-size:var(--max-inline-size)}}:host([layout=\"narrow\"]){--max-inline-size: var(--odx-page-max-inline-size-narrow)}:host([layout=\"wide\"]){--max-inline-size: var(--odx-page-max-inline-size-wide)}";
 
 const PageAlignment = pick(Alignment, ["START", "CENTER"]);
 const PageLayout = { AUTO: "auto", NARROW: "narrow", WIDE: "wide" };
@@ -3292,7 +3302,7 @@ __decorateClass([
 ], _OdxScrollContainer.prototype, "rightOverflow", 2);
 let OdxScrollContainer = _OdxScrollContainer;
 
-const styles$p = ":host{display:block;transition:var(--odx-transition-default);min-inline-size:min(15ch,50dvw);max-inline-size:35ch}.input{inline-size:100%;min-inline-size:0}:host([collapsed]:not(:focus-within)){cursor:pointer;min-inline-size:0;max-inline-size:var(--odx-size-225);.input{gap:0;&::part(input){opacity:0}&:after{background-color:transparent}}}";
+const styles$p = ":host{display:block;transition:var(--odx-transition-default);min-inline-size:min(15ch,50dvw);max-inline-size:40ch}.input{inline-size:100%;min-inline-size:0}:host([collapsed]:not(:focus-within)){cursor:pointer;min-inline-size:0;max-inline-size:var(--odx-size-225);.input{gap:0;&::part(input){opacity:0}&:after{background-color:transparent}}}";
 
 const SearchBarBehavior = { INSTANT: "instant", SUBMIT: "submit" };
 class SearchEvent extends CustomEvent {
@@ -4384,7 +4394,7 @@ __decorateClass([
 ], _OdxTableHeaderCell.prototype, "sortable", 2);
 let OdxTableHeaderCell = _OdxTableHeaderCell;
 
-const styles$6 = "@layer base{:host{display:block;text-decoration:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit}:host([inline]){display:inline-block}}@layer variant{:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}:host([size=\"sm\"]){line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}:host([size=\"md\"]){line-height:var(--odx-typography-line-height-3);font-size:var(--odx-typography-font-size-3)}:host([size=\"lg\"]){line-height:var(--odx-typography-line-height-4);font-size:var(--odx-typography-font-size-4)}:host([variant=\"neutral-subtle\"]){color:var(--odx-color-foreground-rest-subtle)}:host([variant=\"accent\"]){color:var(--odx-color-background-accent-rest)}:host([variant=\"success\"]){color:var(--odx-color-background-success-rest)}:host([variant=\"danger\"]){color:var(--odx-color-foreground-danger-rest)}}";
+const styles$6 = "@layer base{:host{display:block;text-decoration:inherit;line-height:inherit;color:inherit;font-size:inherit;font-weight:inherit}:host([inline]){display:inline-block}}@layer variant{:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([size=\"xs\"]){line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}:host([size=\"sm\"]){line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}:host([size=\"md\"]){line-height:var(--odx-typography-line-height-3);font-size:var(--odx-typography-font-size-3)}:host([size=\"lg\"]){line-height:var(--odx-typography-line-height-4);font-size:var(--odx-typography-font-size-4)}:host([variant=\"neutral\"]){color:var(--odx-color-foreground-rest)}:host([variant=\"neutral-subtle\"]){color:var(--odx-color-foreground-rest-subtle)}:host([variant=\"accent\"]){color:var(--odx-color-background-accent-rest)}:host([variant=\"success\"]){color:var(--odx-color-background-success-rest)}:host([variant=\"danger\"]){color:var(--odx-color-foreground-danger-rest)}}";
 
 const TextSize = pick(Size, ["XS", "SM", "MD", "LG"]);
 const TextVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "ACCENT", "SUCCESS", "DANGER"]);
@@ -4393,7 +4403,6 @@ const _OdxText = class _OdxText extends CustomElement {
     super(...arguments);
     this.strong = false;
     this.inline = false;
-    this.variant = TextVariant.NEUTRAL;
   }
   static {
     customElement("odx-text", styles$6)(_OdxText);
@@ -4409,7 +4418,7 @@ __decorateClass([
   property({ reflect: true })
 ], _OdxText.prototype, "size", 2);
 __decorateClass([
-  property({ reflect: true, useDefault: true })
+  property({ reflect: true })
 ], _OdxText.prototype, "variant", 2);
 let OdxText = _OdxText;
 
@@ -4685,4 +4694,4 @@ __decorateClass([
 ], _OdxTranslate.prototype, "context", 2);
 let OdxTranslate = _OdxTranslate;
 
-export { AccordionIndicatorPosition, AccordionItemSize, AreaHeaderAlignment, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, ListItemSize, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };
+export { AccordionIndicatorPosition, AccordionItemSize, AreaHeaderAlignment, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, ListItemSize, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaHeader, OdxAutoGrid, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxContentBox, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHeaderActions, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, sliderContext, tableContext };

package/dist/main.js

@@ -6,7 +6,7 @@ import { getAssignedElements as getAssignedElements$1 } from '@odx/foundation';
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.170";
+const version = "1.0.0-beta.171";
 const pkg = {
   name,
   displayName,

package/package.json

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