@odx/foundation 1.0.0-beta.122 → 1.0.0-beta.123

package/dist/components/empty-state/empty-state.d.ts

@@ -14,9 +14,24 @@ export declare const EmptyStateSize: Pick<{
     readonly LG: "lg";
     readonly XL: "xl";
     readonly XXL: "xxl";
-}, "SM" | "MD">;
+}, "SM" | "MD" | "LG">;
+export type EmptyStateVariant = ValuesOf<typeof EmptyStateVariant>;
+export declare const EmptyStateVariant: Pick<{
+    readonly NEUTRAL: "neutral";
+    readonly NEUTRAL_SUBTLE: "neutral-subtle";
+    readonly PRIMARY: "primary";
+    readonly PRIMARY_SUBTLE: "primary-subtle";
+    readonly ACCENT: "accent";
+    readonly ACCENT_SUBTLE: "accent-subtle";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly DANGER_SUBTLE: "danger-subtle";
+    readonly GHOST: "ghost";
+}, "NEUTRAL" | "NEUTRAL_SUBTLE" | "DANGER">;
 export declare class OdxEmptyState extends CustomElement {
     icon?: OdxIconName;
     size: EmptyStateSize;
+    variant: EmptyStateVariant;
     protected render(): TemplateResult | string;
 }

package/dist/components.js

@@ -1374,27 +1374,29 @@ class OdxContentBox extends CustomElement {
   }
 }
 
-const styles$T = ":host{--max-inline-size: 60ch;--icon-size: var(--odx-size-300);display:flex;flex-direction:column;row-gap:var(--odx-spacing-150);align-items:center;margin-inline:auto;padding:var(--odx-size-150);text-align:center}.actions{flex-direction:row-reverse}.content{max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){--max-inline-size: 60ch;gap:var(--odx-size-150)}:host([size=\"sm\"]){--max-inline-size: 40ch;--icon-size: var(--odx-size-225);gap:var(--odx-size-75);.content{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}.icon{font-size:var(--icon-size)}}";
+const styles$T = ":host{--max-inline-size: 40ch;--icon-size: var(--odx-size-225);--_content-gap: var(--odx-spacing-25);display:flex;flex-direction:column;align-items:center;margin-inline:auto;block-size:100%;text-align:center}.actions{flex-direction:row-reverse}.content{row-gap:var(--_content-gap);max-inline-size:var(--max-inline-size)}.icon{font-size:var(--icon-size)}:host,:host([size=\"md\"]){gap:var(--odx-spacing-75);padding:var(--odx-size-75)}:host([size=\"sm\"]){--max-inline-size: 30ch;--icon-size: var(--odx-size-150);--_content-gap: var(--odx-size-12);gap:var(--odx-spacing-50);padding:var(--odx-size-50);.description{line-height:var(--odx-typography-line-height-1);font-size:var(--odx-typography-font-size-1)}}:host([size=\"md\"]){.description{line-height:var(--odx-typography-line-height-2);font-size:var(--odx-typography-font-size-2)}}:host([size=\"lg\"]){--max-inline-size: 50ch;--icon-size: var(--odx-size-300);--_content-gap: var(--odx-size-37);gap:var(--odx-spacing-100);padding:var(--odx-size-150);.title{line-height:var(--odx-breakpoint-line-height-heading-5);font-size:var(--odx-breakpoint-font-size-heading-5)}}:host([variant=\"neutral-subtle\"]){.icon,.description{color:var(--odx-color-foreground-rest-subtle)}}:host([variant=\"danger\"]){.icon{color:var(--odx-color-foreground-danger-rest)}}";
 
-const EmptyStateSize = pick(Size, ["SM", "MD"]);
+const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
+const EmptyStateVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "DANGER"]);
 const _OdxEmptyState = class _OdxEmptyState extends CustomElement {
   constructor() {
     super(...arguments);
     this.size = EmptyStateSize.MD;
+    this.variant = EmptyStateVariant.NEUTRAL;
   }
   static {
     customElement("odx-empty-state", styles$T)(_OdxEmptyState);
   }
   render() {
     return html`
-      <div class="content odx-stack odx-align-center odx-gap-${this.size === EmptyStateSize.SM ? "50" : "75"}">
-        <slot name="title"></slot>
+      <div class="content odx-stack odx-align-center">
         ${when(this.icon, (icon) => html`<odx-icon class="icon" name=${icon}></odx-icon>`)}
-        <slot></slot>
-      </div>
-      <div class="actions odx-cluster odx-justify-center">
-        <slot name="action"></slot>
+        <odx-title class="title">
+          <slot></slot>
+        </odx-title>
+        ${optionalSlot(this, "description")}
       </div>
+      ${optionalSlot(this, "actions", "odx-cluster odx-justify-center")}
     `;
   }
 };
@@ -1404,6 +1406,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, useDefault: true })
 ], _OdxEmptyState.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true, useDefault: true })
+], _OdxEmptyState.prototype, "variant", 2);
 let OdxEmptyState = _OdxEmptyState;
 
 const styles$S = ":host{display:block}";
@@ -4547,4 +4552,4 @@ class OdxVisuallyHidden extends CustomElement {
   }
 }
 
-export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, 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, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, TooltipSize, sliderContext, tableContext };
+export { AccordionIndicatorPosition, AccordionItemSize, AnchorObserver, AreaHeaderSize, AutoGridMode, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CheckboxGroupLayout, ChipVariant, DropdownPlacement, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HighlightVariant, InlineMessageVariant, KpiSize, KpiVariant, LOADING_OVERLAY_HOST_DIRECTIVE, LogoSize, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, OdxActionButton, 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, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxMenuLabel, OdxModal, OdxNavigationItem, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpacer, OdxSpinbox, OdxStatus, OdxSwitch, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxTooltip, OdxTranslate, OdxVisuallyHidden, PageAlignment, PageLayout, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlign, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TextSize, TextVariant, TitleSize, ToastVariant, TooltipPlacement, TooltipSize, sliderContext, tableContext };

package/dist/lib/utils/lit.d.ts

@@ -1,3 +1,3 @@
 import { nothing, ReactiveElement, TemplateResult } from 'lit';
 export declare const optionalAttr: <T>(value: T) => NonNullable<T>;
-export declare function optionalSlot(host: ReactiveElement, slotName: string): TemplateResult | typeof nothing;
+export declare function optionalSlot(host: ReactiveElement, slotName: string, classNames?: string): TemplateResult | typeof nothing;

package/dist/main.js

@@ -5,7 +5,7 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
 
 const name = "@odx/foundation";
 const displayName = "ODX Design System Foundation";
-const version = "1.0.0-beta.122";
+const version = "1.0.0-beta.123";
 const pkg = {
   name,
   displayName,
@@ -929,10 +929,10 @@ class ExpandableItemManager {
 const optionalAttr = (value) => {
   return value == null || value === "" ? nothing : value;
 };
-function optionalSlot(host, slotName) {
+function optionalSlot(host, slotName, classNames) {
   if (host.querySelector(`[slot="${slotName}"]`)) {
     return html`
-      <div class="${slotName}">
+      <div class="${slotName}${classNames ? ` ${classNames}` : ""}">
         <slot name="${slotName}" @slotchange="${() => host.requestUpdate()}"></slot>
       </div>
     `;

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