@odx/foundation 1.0.0-beta.95 → 1.0.0-beta.96

package/dist/components/accordion/accordion.d.ts

@@ -1,5 +1,6 @@
 import { CustomElement, ValuesOf } from '../../lib/main.js';
-import { OdxAccordionItem } from '../accordion-item/accordion-item.js';
+import { PropertyValues } from 'lit';
+import { AccordionItemSize, OdxAccordionItem } from '../accordion-item/accordion-item.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
@@ -13,9 +14,12 @@ export declare const AccordionIndicatorPosition: {
 export declare class OdxAccordion extends CustomElement {
     /** @internal */
     items: OdxAccordionItem[];
+    compact: boolean;
     indicatorPosition: AccordionIndicatorPosition;
     multiple: boolean;
+    size?: AccordionItemSize;
     constructor();
+    protected updated(props: PropertyValues<this>): void;
     toggleAll(state?: boolean, emitEvent?: boolean): void;
 }
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1,13 +1,23 @@
-import { CanBeExpanded, InteractiveElement } from '../../lib/main.js';
+import { CanBeExpanded, InteractiveElement, ValuesOf } from '../../lib/main.js';
 import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion-item': OdxAccordionItem;
     }
 }
+export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+export declare const AccordionItemSize: Pick<{
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "xxl";
+}, "MD" | "LG">;
 declare const OdxAccordionItem_base: import('../../lib/main.js').Constructor<CanBeExpanded> & typeof InteractiveElement;
 export declare class OdxAccordionItem extends OdxAccordionItem_base {
     #private;
+    size: AccordionItemSize;
     get panel(): HTMLElement | null;
     protected renderContent(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;

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

@@ -25,6 +25,7 @@ export declare const TextVariant: Pick<{
 }, "NEUTRAL" | "ACCENT" | "SUCCESS" | "DANGER">;
 export declare class OdxText extends CustomElement {
     strong: boolean;
+    subtle: boolean;
     inline: boolean;
     size?: TextSize;
     variant: TextVariant;

package/dist/components.js

@@ -2,19 +2,20 @@ import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
 import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, InteractiveLink, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, SharedResizeObserver, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, forwardEvent, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
 import { queryAssignedElements, property, query, state, queryAll } from 'lit/decorators.js';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
-import { when } from 'lit/directives/when.js';
 import { p as pick, e, a as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
+import { when } from 'lit/directives/when.js';
 import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
 import { signal, computed } from '@preact/signals-core';
 import 'lit/html.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-const styles$1g = ":host{display:block}";
+const styles$1g = ":host{display:block}:host(:not([compact])) ::slotted(odx-accordion-item){margin-block:var(--odx-spacing-37)}";
 
 const AccordionIndicatorPosition = { START: "start", END: "end" };
 const _OdxAccordion = class _OdxAccordion extends CustomElement {
   constructor() {
     super();
+    this.compact = false;
     this.indicatorPosition = AccordionIndicatorPosition.END;
     this.multiple = false;
     new ExpandableItemManager(this, { getItems: () => this.items });
@@ -22,6 +23,14 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
   static {
     customElement("odx-accordion", styles$1g)(_OdxAccordion);
   }
+  updated(props) {
+    super.updated(props);
+    if (props.has("size") && this.size !== void 0) {
+      for (const item of this.items) {
+        item.size = this.size;
+      }
+    }
+  }
   toggleAll(state, emitEvent = false) {
     for (const item of this.items) {
       item.toggle(state, emitEvent);
@@ -31,19 +40,30 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
 __decorateClass([
   queryAssignedElements({ selector: "odx-accordion-item", flatten: true })
 ], _OdxAccordion.prototype, "items", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, useDefault: true })
+], _OdxAccordion.prototype, "compact", 2);
 __decorateClass([
   property({ reflect: true, useDefault: true, attribute: "indicator-position" })
 ], _OdxAccordion.prototype, "indicatorPosition", 2);
 __decorateClass([
   property({ type: Boolean })
 ], _OdxAccordion.prototype, "multiple", 2);
+__decorateClass([
+  property()
+], _OdxAccordion.prototype, "size", 2);
 let OdxAccordion = _OdxAccordion;
 
-const styles$1f = ":host{display:block;margin-block:var(--odx-size-37)}:host([expanded])::part(indicator){--rotate: 180deg}";
+const styles$1f = ":host{display:block;block-size:auto;min-block-size:var(--_block-size)}[part~=label]{display:flex;flex-direction:column;row-gap:var(--odx-size-37)}:host([expanded])::part(indicator){--rotate: 180deg}:host([size=\"lg\"]){--_padding-block: var(--odx-spacing-75)}";
 
-class OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
+const AccordionItemSize = pick(Size, ["MD", "LG"]);
+const _OdxAccordionItem = class _OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
+  constructor() {
+    super(...arguments);
+    this.size = AccordionItemSize.MD;
+  }
   static {
-    customElement("odx-accordion-item", styles$1f)(OdxAccordionItem);
+    customElement("odx-accordion-item", styles$1f)(_OdxAccordionItem);
   }
   get panel() {
     if (this.nextElementSibling?.role === "region") {
@@ -73,7 +93,11 @@ class OdxAccordionItem extends CanBeExpanded(InteractiveElement) {
     if (this.expanded) return;
     this.panel.querySelector("odx-accordion")?.toggleAll(false);
   }
-}
+};
+__decorateClass([
+  property({ reflect: true, useDefault: true })
+], _OdxAccordionItem.prototype, "size", 2);
+let OdxAccordionItem = _OdxAccordionItem;
 
 const styles$1e = ":host{display:block;border-block-end:var(--odx-size-px) solid transparent}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12)}:host(:not(:last-of-type)){border-block-end-color:var(--odx-color-stroke-neutral-subtle)}::slotted(odx-accordion){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
 
@@ -4206,7 +4230,7 @@ __decorateClass([
 ], _OdxTableHeaderCell.prototype, "sortable", 2);
 let OdxTableHeaderCell = _OdxTableHeaderCell;
 
-const styles$6 = "@layer base{:host{display:block;text-decoration:inherit;line-height:var(--_line-height, inherit);color:inherit;font-size:var(--_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=\"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:var(--_line-height, inherit);color:inherit;font-size:var(--_font-size, inherit);font-weight:inherit}:host([inline]){display:inline-block}}@layer variant{:host([strong]){font-weight:var(--odx-typography-font-weight-medium)}:host([subtle]){color:var(--odx-color-foreground-rest-subtle)}: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=\"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", "ACCENT", "SUCCESS", "DANGER"]);
@@ -4214,6 +4238,7 @@ const _OdxText = class _OdxText extends CustomElement {
   constructor() {
     super(...arguments);
     this.strong = false;
+    this.subtle = false;
     this.inline = false;
     this.variant = TextVariant.NEUTRAL;
   }
@@ -4224,6 +4249,9 @@ const _OdxText = class _OdxText extends CustomElement {
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxText.prototype, "strong", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, useDefault: true })
+], _OdxText.prototype, "subtle", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], _OdxText.prototype, "inline", 2);
@@ -4459,4 +4487,4 @@ class OdxVisuallyHidden extends CustomElement {
   }
 }
 
-export { AccordionIndicatorPosition, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonBadgeAlign, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressBarVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };
+export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonBadgeAlign, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, CircularProgressBarSize, DropdownPlacement, HeadlineSize, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, OdxAnchorNavigation, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxAvatarGroup, OdxBadge, OdxBreadcrumbs, OdxBreadcrumbsItem, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxCircularProgressBar, OdxContentBox, OdxDropdown, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxHeader, OdxHeaderActions, OdxHeadline, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxKpi, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuLink, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStack, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressBarVariant, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StackAlign, StackGap, StackJustify, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, sliderContext, tableContext };

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.95",
+  "version": "1.0.0-beta.96",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",