@odx/foundation 1.0.0-beta.122 → 1.0.0-beta.124
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/empty-state/empty-state.d.ts +16 -1
- package/dist/components.js +16 -11
- package/dist/lib/utils/lit.d.ts +1 -1
- package/dist/main.js +4 -4
- package/dist/vendor.js +4 -3
- package/package.json +2 -2
|
@@ -14,9 +14,24 @@ export declare const EmptyStateSize: Pick<{
|
|
|
14
14
|
readonly LG: "lg";
|
|
15
15
|
readonly XL: "xl";
|
|
16
16
|
readonly XXL: "xxl";
|
|
17
|
-
}, "SM" | "MD">;
|
|
17
|
+
}, "SM" | "MD" | "LG">;
|
|
18
|
+
export type EmptyStateVariant = ValuesOf<typeof EmptyStateVariant>;
|
|
19
|
+
export declare const EmptyStateVariant: Pick<{
|
|
20
|
+
readonly NEUTRAL: "neutral";
|
|
21
|
+
readonly NEUTRAL_SUBTLE: "neutral-subtle";
|
|
22
|
+
readonly PRIMARY: "primary";
|
|
23
|
+
readonly PRIMARY_SUBTLE: "primary-subtle";
|
|
24
|
+
readonly ACCENT: "accent";
|
|
25
|
+
readonly ACCENT_SUBTLE: "accent-subtle";
|
|
26
|
+
readonly SUCCESS: "success";
|
|
27
|
+
readonly WARNING: "warning";
|
|
28
|
+
readonly DANGER: "danger";
|
|
29
|
+
readonly DANGER_SUBTLE: "danger-subtle";
|
|
30
|
+
readonly GHOST: "ghost";
|
|
31
|
+
}, "NEUTRAL" | "NEUTRAL_SUBTLE" | "DANGER">;
|
|
18
32
|
export declare class OdxEmptyState extends CustomElement {
|
|
19
33
|
icon?: OdxIconName;
|
|
20
34
|
size: EmptyStateSize;
|
|
35
|
+
variant: EmptyStateVariant;
|
|
21
36
|
protected render(): TemplateResult | string;
|
|
22
37
|
}
|
package/dist/components.js
CHANGED
|
@@ -715,7 +715,7 @@ __decorateClass([
|
|
|
715
715
|
], _OdxCard.prototype, "interactive", 2);
|
|
716
716
|
let OdxCard = _OdxCard;
|
|
717
717
|
|
|
718
|
-
const styles$$ = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin
|
|
718
|
+
const styles$$ = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-50);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled],[invalid])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([invalid]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-stroke: var(--odx-color-stroke-danger-rest)}:host([invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-rest);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]:not([invalid])){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}:host([readonly][invalid][checked]){--_indicator-color-background: var(--odx-color-background-danger-subtle);--_indicator-color-foreground: var(--odx-color-foreground-danger-rest)}";
|
|
719
719
|
|
|
720
720
|
const _OdxCheckbox = class _OdxCheckbox extends CheckboxFormControl {
|
|
721
721
|
constructor() {
|
|
@@ -1374,27 +1374,29 @@ class OdxContentBox extends CustomElement {
|
|
|
1374
1374
|
}
|
|
1375
1375
|
}
|
|
1376
1376
|
|
|
1377
|
-
const styles$T = ":host{--max-inline-size:
|
|
1377
|
+
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)}}";
|
|
1378
1378
|
|
|
1379
|
-
const EmptyStateSize = pick(Size, ["SM", "MD"]);
|
|
1379
|
+
const EmptyStateSize = pick(Size, ["SM", "MD", "LG"]);
|
|
1380
|
+
const EmptyStateVariant = pick(Variant, ["NEUTRAL", "NEUTRAL_SUBTLE", "DANGER"]);
|
|
1380
1381
|
const _OdxEmptyState = class _OdxEmptyState extends CustomElement {
|
|
1381
1382
|
constructor() {
|
|
1382
1383
|
super(...arguments);
|
|
1383
1384
|
this.size = EmptyStateSize.MD;
|
|
1385
|
+
this.variant = EmptyStateVariant.NEUTRAL;
|
|
1384
1386
|
}
|
|
1385
1387
|
static {
|
|
1386
1388
|
customElement("odx-empty-state", styles$T)(_OdxEmptyState);
|
|
1387
1389
|
}
|
|
1388
1390
|
render() {
|
|
1389
1391
|
return html`
|
|
1390
|
-
<div class="content odx-stack odx-align-center
|
|
1391
|
-
<slot name="title"></slot>
|
|
1392
|
+
<div class="content odx-stack odx-align-center">
|
|
1392
1393
|
${when(this.icon, (icon) => html`<odx-icon class="icon" name=${icon}></odx-icon>`)}
|
|
1393
|
-
<
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1394
|
+
<odx-title class="title">
|
|
1395
|
+
<slot></slot>
|
|
1396
|
+
</odx-title>
|
|
1397
|
+
${optionalSlot(this, "description")}
|
|
1397
1398
|
</div>
|
|
1399
|
+
${optionalSlot(this, "actions", "odx-cluster odx-justify-center")}
|
|
1398
1400
|
`;
|
|
1399
1401
|
}
|
|
1400
1402
|
};
|
|
@@ -1404,6 +1406,9 @@ __decorateClass([
|
|
|
1404
1406
|
__decorateClass([
|
|
1405
1407
|
property({ reflect: true, useDefault: true })
|
|
1406
1408
|
], _OdxEmptyState.prototype, "size", 2);
|
|
1409
|
+
__decorateClass([
|
|
1410
|
+
property({ reflect: true, useDefault: true })
|
|
1411
|
+
], _OdxEmptyState.prototype, "variant", 2);
|
|
1407
1412
|
let OdxEmptyState = _OdxEmptyState;
|
|
1408
1413
|
|
|
1409
1414
|
const styles$S = ":host{display:block}";
|
|
@@ -3970,7 +3975,7 @@ __decorateClass([
|
|
|
3970
3975
|
], _OdxStatus.prototype, "variant", 2);
|
|
3971
3976
|
let OdxStatus = _OdxStatus;
|
|
3972
3977
|
|
|
3973
|
-
const styles$e = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-
|
|
3978
|
+
const styles$e = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-stroke: var(--odx-color-stroke-control-subtle);--_color-foreground: var(--odx-color-foreground-rest-subtle);--_label-color-foreground: var(--odx-color-foreground-rest);--_thumb-size: var(--odx-size-125);--_thumb-position: 0;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-50);cursor:pointer;user-select:none}.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition-property:background-color,border-color,translate;block-size:var(--odx-size-150);color:var(--_color-foreground)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_color-background);block-size:var(--odx-size-50);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;backface-visibility:hidden;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);background-color:var(--_color-background);block-size:var(--odx-size-125);inline-size:var(--odx-size-125);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly],[invalid])):hover){--_color-stroke: var(--odx-color-stroke-control-hover);--_color-background: var(--odx-color-background-control-hover);--_color-foreground: var(--odx-color-foreground-rest)}:host(:focus-visible) .thumb{outline-color:var(--odx-color-stroke-focus-outer);&:after{position:absolute;inset:-3px;border:var(--odx-focus-ring-offset) solid var(--odx-color-stroke-focus-inner);border-radius:inherit;content:\"\"}}:host([checked]){--_color-background: var(--odx-color-background-control-selected);--_color-stroke: var(--_color-background);--_color-foreground: var(--odx-color-foreground-inverse);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([readonly],[disabled],[invalid])):hover){--_color-background: var(--odx-color-background-control-selected-hover)}:host([invalid]:not([checked])){--_color-background: var(--odx-color-background-danger-subtle);--_color-stroke: var(--odx-color-stroke-danger-rest);--_color-foreground: var(--odx-color-foreground-danger-rest)}:host([disabled]:not([readonly])){--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-disabled-stroke);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled][checked]:not([readonly])){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([readonly]){--_color-stroke: var(--odx-color-stroke-control-readonly);--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);cursor:default}:host([invalid][checked]){--_color-background: var(--odx-color-background-danger-rest);--_color-foreground: var(--odx-color-foreground-inverse-static)}:host([readonly][invalid][checked]){--_color-background: var(--odx-color-background-danger-subtle);--_color-foreground: var(--odx-color-foreground-danger-rest);--_color-stroke: var(--odx-color-stroke-danger-rest)}}";
|
|
3974
3979
|
|
|
3975
3980
|
class OdxSwitch extends CheckboxFormControl {
|
|
3976
3981
|
static {
|
|
@@ -4547,4 +4552,4 @@ class OdxVisuallyHidden extends CustomElement {
|
|
|
4547
4552
|
}
|
|
4548
4553
|
}
|
|
4549
4554
|
|
|
4550
|
-
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 };
|
|
4555
|
+
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
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { nothing, ReactiveElement, TemplateResult } from 'lit';
|
|
2
2
|
export declare const optionalAttr: <T>(value: T) => NonNullable<T>;
|
|
3
|
-
export declare function optionalSlot(host: ReactiveElement, slotName: string): TemplateResult | typeof nothing;
|
|
3
|
+
export declare function optionalSlot(host: ReactiveElement, slotName: string, classNames?: string): TemplateResult | typeof nothing;
|
package/dist/main.js
CHANGED
|
@@ -5,7 +5,7 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
|
|
|
5
5
|
|
|
6
6
|
const name = "@odx/foundation";
|
|
7
7
|
const displayName = "ODX Design System Foundation";
|
|
8
|
-
const version = "1.0.0-beta.
|
|
8
|
+
const version = "1.0.0-beta.124";
|
|
9
9
|
const pkg = {
|
|
10
10
|
name,
|
|
11
11
|
displayName,
|
|
@@ -929,10 +929,10 @@ class ExpandableItemManager {
|
|
|
929
929
|
const optionalAttr = (value) => {
|
|
930
930
|
return value == null || value === "" ? nothing : value;
|
|
931
931
|
};
|
|
932
|
-
function optionalSlot(host, slotName) {
|
|
932
|
+
function optionalSlot(host, slotName, classNames) {
|
|
933
933
|
if (host.querySelector(`[slot="${slotName}"]`)) {
|
|
934
934
|
return html`
|
|
935
|
-
<div class="${slotName}">
|
|
935
|
+
<div class="${slotName}${classNames ? ` ${classNames}` : ""}">
|
|
936
936
|
<slot name="${slotName}" @slotchange="${() => host.requestUpdate()}"></slot>
|
|
937
937
|
</div>
|
|
938
938
|
`;
|
|
@@ -940,7 +940,7 @@ function optionalSlot(host, slotName) {
|
|
|
940
940
|
return nothing;
|
|
941
941
|
}
|
|
942
942
|
|
|
943
|
-
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:0;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:left;pointer-events:none}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}slot:not([name])::slotted(*){line-height:inherit}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));background-color:var(--odx-color-background-transparent-pressed);font-size:var(--odx-typography-font-size-2)}}@layer state{:host([badge-align=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-size-37) 50%}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
943
|
+
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_color-background-hover: var(--odx-color-background-transparent-hover);--_color-background-pressed: var(--odx-color-background-transparent-pressed);--_color-foreground: inherit;--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-6);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);--_icon-margin: 0;position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;outline:var(--odx-focus-ring-outline);outline-offset:0;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);block-size:100%;inline-size:100%;overflow:hidden;text-decoration:none;line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--_size: calc(var(--_icon-size) - var(--odx-size-25));margin-inline:calc(var(--_icon-margin) + var(--odx-size-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:left;pointer-events:none}:is(odx-icon),::slotted(:is(odx-avatar,odx-icon)){--size: var(--_icon-size);margin-inline:var(--_icon-margin)}slot:not([name])::slotted(*){line-height:inherit}::slotted([slot=\"badge\"]){--_badge-margin: var(--odx-size-12);position:absolute;inset-block-start:var(--_badge-margin);inset-inline-end:var(--_badge-margin);pointer-events:none;translate:var(--odx-size-37) -50%}::slotted(odx-avatar){--_size: var(--odx-size-200);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing));background-color:var(--odx-color-background-transparent-pressed);font-size:var(--odx-typography-font-size-2)}}@layer state{:host([badge-align=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--odx-size-37) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-background-hover: var(--odx-color-background-disabled-rest);--_color-background-pressed: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
944
944
|
|
|
945
945
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
946
946
|
constructor() {
|
package/dist/vendor.js
CHANGED
|
@@ -592,10 +592,11 @@ const flip$1 = function (options) {
|
|
|
592
592
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
593
593
|
const nextPlacement = placements[nextIndex];
|
|
594
594
|
if (nextPlacement) {
|
|
595
|
-
var _overflowsData$;
|
|
596
595
|
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
597
|
-
|
|
598
|
-
if
|
|
596
|
+
if (!ignoreCrossAxisOverflow ||
|
|
597
|
+
// We leave the current main axis only if every placement on that axis
|
|
598
|
+
// overflows the main axis.
|
|
599
|
+
overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
|
|
599
600
|
// Try next placement and re-run the lifecycle.
|
|
600
601
|
return {
|
|
601
602
|
data: {
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"displayName": "ODX Design System Foundation",
|
|
4
4
|
"description": "A library of Web Component building blocks for ODX",
|
|
5
|
-
"version": "1.0.0-beta.
|
|
5
|
+
"version": "1.0.0-beta.124",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@custom-elements-manifest/analyzer": "0.10.4",
|
|
29
|
-
"@floating-ui/dom": "1.7.
|
|
29
|
+
"@floating-ui/dom": "1.7.1",
|
|
30
30
|
"@lit-labs/preact-signals": "1.0.3",
|
|
31
31
|
"@lit/context": "1.1.5",
|
|
32
32
|
"@odx/icons": "4.0.0-rc.33",
|