@lumx/core 4.6.0 → 4.6.1-alpha.0
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/components-and-utils.css +12362 -0
- package/js/components/Chip/ChipGroup.d.ts +35 -0
- package/js/components/Chip/ChipGroupTests.d.ts +11 -0
- package/js/components/List/ListItemActionTests.d.ts +10 -0
- package/js/components/List/ListSectionTests.d.ts +13 -0
- package/js/components/TextField/RawInputTextTests.d.ts +11 -0
- package/js/components/TextField/RawInputTextarea.d.ts +21 -0
- package/js/components/TextField/RawInputTextareaTests.d.ts +11 -0
- package/js/components/TextField/constants.d.ts +13 -0
- package/js/utils/classNames/action-area/index.d.ts +15 -0
- package/js/utils/classNames/action-area/index.js +21 -0
- package/js/utils/classNames/index.d.ts +1 -0
- package/js/utils/classNames/index.js +1 -0
- package/lumx.css +118 -5
- package/package.json +6 -3
- package/scss/_components_classes.scss +52 -0
- package/scss/_core_classes.scss +7 -0
- package/scss/components/list/_index.scss +47 -2
- package/scss/components/list/_mixins.scss +24 -0
- package/scss/components/popover/_index.scss +4 -0
- package/scss/components-and-utils.scss +8 -0
- package/scss/core/_normalize.scss +0 -0
- package/scss/core/action-area/_index.scss +75 -0
- package/scss/lumx.scss +2 -58
- package/stories/types.d.ts +3 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { HorizontalAlignment } from '../../constants';
|
|
2
|
+
import type { JSXElement, LumxClassName, HasClassName, CommonRef } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Defines the props of the component.
|
|
5
|
+
*/
|
|
6
|
+
export interface ChipGroupProps extends HasClassName {
|
|
7
|
+
/**
|
|
8
|
+
* Chip horizontal alignment.
|
|
9
|
+
* @deprecated
|
|
10
|
+
*/
|
|
11
|
+
align?: HorizontalAlignment;
|
|
12
|
+
/** Children */
|
|
13
|
+
children?: JSXElement;
|
|
14
|
+
/** reference to the root element */
|
|
15
|
+
ref?: CommonRef;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Component display name.
|
|
19
|
+
*/
|
|
20
|
+
export declare const COMPONENT_NAME = "ChipGroup";
|
|
21
|
+
/**
|
|
22
|
+
* Component default class name and class prefix.
|
|
23
|
+
*/
|
|
24
|
+
export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
|
|
25
|
+
/**
|
|
26
|
+
* Component default props.
|
|
27
|
+
*/
|
|
28
|
+
export declare const DEFAULT_PROPS: Partial<ChipGroupProps>;
|
|
29
|
+
/**
|
|
30
|
+
* ChipGroup component.
|
|
31
|
+
*
|
|
32
|
+
* @param props Component props.
|
|
33
|
+
* @return JSX element.
|
|
34
|
+
*/
|
|
35
|
+
export declare const ChipGroup: (props: ChipGroupProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SetupOptions } from '../../../testing';
|
|
2
|
+
/**
|
|
3
|
+
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
|
|
4
|
+
*/
|
|
5
|
+
export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
|
|
6
|
+
props: any;
|
|
7
|
+
chipGroup: HTMLElement;
|
|
8
|
+
wrapper: Partial<import("../../../testing").SetupResult>;
|
|
9
|
+
};
|
|
10
|
+
declare const _default: (renderOptions: SetupOptions<any>) => void;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SetupOptions } from '../../../testing';
|
|
2
|
+
/**
|
|
3
|
+
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
|
|
4
|
+
*/
|
|
5
|
+
export declare const setup: (propsOverride: any | undefined, { render, screen, ...options }: SetupOptions<any>) => {
|
|
6
|
+
props: any;
|
|
7
|
+
screen: import("@testing-library/dom").Screen;
|
|
8
|
+
};
|
|
9
|
+
declare const _default: (renderOptions: SetupOptions<any>) => void;
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { SetupOptions } from '../../../testing';
|
|
2
|
+
/**
|
|
3
|
+
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
|
|
4
|
+
*/
|
|
5
|
+
export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
|
|
6
|
+
props: any;
|
|
7
|
+
listSection: HTMLElement;
|
|
8
|
+
title: HTMLElement | null;
|
|
9
|
+
items: HTMLElement | null;
|
|
10
|
+
wrapper: Partial<import("../../../testing").SetupResult>;
|
|
11
|
+
};
|
|
12
|
+
declare const _default: (renderOptions: SetupOptions<any>) => void;
|
|
13
|
+
export default _default;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SetupOptions } from '../../../testing';
|
|
2
|
+
/**
|
|
3
|
+
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
|
|
4
|
+
*/
|
|
5
|
+
export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
|
|
6
|
+
props: any;
|
|
7
|
+
input: HTMLElement;
|
|
8
|
+
wrapper: Partial<import("../../../testing").SetupResult>;
|
|
9
|
+
};
|
|
10
|
+
declare const _default: (renderOptions: SetupOptions<any>) => void;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
import { HasClassName, HasTheme } from '../../types';
|
|
3
|
+
type NativeTextareaProps = Omit<ComponentProps<'textarea'>, 'value' | 'onChange'>;
|
|
4
|
+
/**
|
|
5
|
+
* Defines the props of the component.
|
|
6
|
+
*/
|
|
7
|
+
export interface RawInputTextareaProps extends NativeTextareaProps, HasTheme, HasClassName {
|
|
8
|
+
value?: string;
|
|
9
|
+
rows?: number;
|
|
10
|
+
handleChange?: (value: string, name?: string, event?: any) => void;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Component default props.
|
|
14
|
+
*/
|
|
15
|
+
export declare const DEFAULT_PROPS: Partial<RawInputTextareaProps>;
|
|
16
|
+
/**
|
|
17
|
+
* Raw input textarea component
|
|
18
|
+
* (textarea element without any decoration)
|
|
19
|
+
*/
|
|
20
|
+
export declare const RawInputTextarea: (props: RawInputTextareaProps) => import("react").JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SetupOptions } from '../../../testing';
|
|
2
|
+
/**
|
|
3
|
+
* Mounts the component and returns common DOM elements / data needed in multiple tests further down.
|
|
4
|
+
*/
|
|
5
|
+
export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
|
|
6
|
+
props: any;
|
|
7
|
+
textarea: HTMLElement;
|
|
8
|
+
wrapper: Partial<import("../../../testing").SetupResult>;
|
|
9
|
+
};
|
|
10
|
+
declare const _default: (renderOptions: SetupOptions<any>) => void;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { LumxClassName } from '@lumx/core/js/types';
|
|
2
|
+
/**
|
|
3
|
+
* Component display name.
|
|
4
|
+
*/
|
|
5
|
+
export declare const COMPONENT_NAME = "TextField";
|
|
6
|
+
/**
|
|
7
|
+
* Component default class name and class prefix.
|
|
8
|
+
*/
|
|
9
|
+
export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
|
|
10
|
+
/**
|
|
11
|
+
* Input native element class name.
|
|
12
|
+
*/
|
|
13
|
+
export declare const INPUT_NATIVE_CLASSNAME: string;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
type ActionModifiers = Partial<Record<'has-overlay' | 'focus-outset' | 'focus-inset' | 'theme-dark' | 'theme-light', boolean>>;
|
|
2
|
+
/**
|
|
3
|
+
* Action area CSS utility.
|
|
4
|
+
*
|
|
5
|
+
* Apply `actionArea()` to the container element to make it a positioning context
|
|
6
|
+
* for the action's expanded click area.
|
|
7
|
+
*
|
|
8
|
+
* Apply `actionArea.action()` to the primary interactive element (link or button)
|
|
9
|
+
* whose click area should expand to fill the entire container.
|
|
10
|
+
*/
|
|
11
|
+
export declare const actionArea: (() => "lumx-action-area") & {
|
|
12
|
+
/** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
|
|
13
|
+
action: (modifiers?: ActionModifiers) => string;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { block } from '../bem/block.js';
|
|
2
|
+
|
|
3
|
+
const PREFIX = 'lumx-action-area';
|
|
4
|
+
const ACTION_ELEMENT = `${PREFIX}__action`;
|
|
5
|
+
/**
|
|
6
|
+
* Action area CSS utility.
|
|
7
|
+
*
|
|
8
|
+
* Apply `actionArea()` to the container element to make it a positioning context
|
|
9
|
+
* for the action's expanded click area.
|
|
10
|
+
*
|
|
11
|
+
* Apply `actionArea.action()` to the primary interactive element (link or button)
|
|
12
|
+
* whose click area should expand to fill the entire container.
|
|
13
|
+
*/
|
|
14
|
+
const actionArea = Object.assign(
|
|
15
|
+
/** Action area container class. Sets `position: relative`. */
|
|
16
|
+
() => PREFIX, {
|
|
17
|
+
/** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
|
|
18
|
+
action: (modifiers) => block(ACTION_ELEMENT, modifiers),
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export { actionArea };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as join } from 'classnames';
|
|
2
|
+
export { actionArea } from './action-area/index.js';
|
|
2
3
|
export { background, color, font } from './color/index.js';
|
|
3
4
|
export { typography } from './typography/index.js';
|
|
4
5
|
export { margin, margins, padding, paddings, spacing, spacings } from './spacing/index.js';
|
package/lumx.css
CHANGED
|
@@ -1093,6 +1093,66 @@ table {
|
|
|
1093
1093
|
margin: revert !important;
|
|
1094
1094
|
}
|
|
1095
1095
|
|
|
1096
|
+
/* ==========================================================================
|
|
1097
|
+
Action area
|
|
1098
|
+
========================================================================== */
|
|
1099
|
+
.lumx-action-area {
|
|
1100
|
+
position: relative;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
/* Action element
|
|
1104
|
+
========================================================================== */
|
|
1105
|
+
.lumx-action-area__action {
|
|
1106
|
+
all: unset;
|
|
1107
|
+
/* ==================================================================
|
|
1108
|
+
Overlay (hover / active)
|
|
1109
|
+
================================================================== */
|
|
1110
|
+
/* ==================================================================
|
|
1111
|
+
Focus outline
|
|
1112
|
+
================================================================== */
|
|
1113
|
+
}
|
|
1114
|
+
.lumx-action-area__action::before {
|
|
1115
|
+
transition-duration: 150ms;
|
|
1116
|
+
transition-property: background-color, box-shadow, color;
|
|
1117
|
+
position: absolute;
|
|
1118
|
+
inset: 0;
|
|
1119
|
+
z-index: 0;
|
|
1120
|
+
cursor: pointer;
|
|
1121
|
+
content: "";
|
|
1122
|
+
outline: 2px none var(--lumx-color-dark-N);
|
|
1123
|
+
}
|
|
1124
|
+
.lumx-action-area__action--has-overlay[data-focus-visible-added]::before, .lumx-action-area__action--has-overlay[data-lumx-hover]::before {
|
|
1125
|
+
background-color: var(--lumx-color-dark-L5);
|
|
1126
|
+
}
|
|
1127
|
+
@media (hover: hover) {
|
|
1128
|
+
.lumx-action-area__action--has-overlay:hover::before {
|
|
1129
|
+
background-color: var(--lumx-color-dark-L5);
|
|
1130
|
+
}}
|
|
1131
|
+
.lumx-action-area__action--has-overlay:active::before, .lumx-action-area__action--has-overlay[data-lumx-active]::before {
|
|
1132
|
+
background-color: var(--lumx-color-dark-L4);
|
|
1133
|
+
}
|
|
1134
|
+
.lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay[data-focus-visible-added]::before, .lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay[data-lumx-hover]::before {
|
|
1135
|
+
background-color: var(--lumx-color-light-L5);
|
|
1136
|
+
}
|
|
1137
|
+
@media (hover: hover) {
|
|
1138
|
+
.lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay:hover::before {
|
|
1139
|
+
background-color: var(--lumx-color-light-L5);
|
|
1140
|
+
}}
|
|
1141
|
+
.lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay:active::before, .lumx-action-area__action--theme-dark.lumx-action-area__action--has-overlay[data-lumx-active]::before {
|
|
1142
|
+
background-color: var(--lumx-color-light-L4);
|
|
1143
|
+
}
|
|
1144
|
+
.lumx-action-area__action--focus-outset[data-focus-visible-added]::before {
|
|
1145
|
+
outline-style: solid;
|
|
1146
|
+
outline-offset: 2px;
|
|
1147
|
+
}
|
|
1148
|
+
.lumx-action-area__action--focus-inset[data-focus-visible-added]::before {
|
|
1149
|
+
outline-style: solid;
|
|
1150
|
+
outline-offset: -2px;
|
|
1151
|
+
}
|
|
1152
|
+
.lumx-action-area__action--theme-dark[data-focus-visible-added]::before {
|
|
1153
|
+
outline-color: var(--lumx-color-light-N);
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1096
1156
|
/* ==========================================================================
|
|
1097
1157
|
Spacing
|
|
1098
1158
|
========================================================================== */
|
|
@@ -8711,6 +8771,9 @@ table {
|
|
|
8711
8771
|
|
|
8712
8772
|
/* Item link
|
|
8713
8773
|
========================================================================== */
|
|
8774
|
+
.lumx-list-item {
|
|
8775
|
+
position: relative;
|
|
8776
|
+
}
|
|
8714
8777
|
.lumx-list-item__link {
|
|
8715
8778
|
-webkit-appearance: none;
|
|
8716
8779
|
-moz-appearance: none;
|
|
@@ -8743,24 +8806,28 @@ table {
|
|
|
8743
8806
|
.lumx-list-item__link--is-highlighted:active {
|
|
8744
8807
|
background-color: var(--lumx-color-dark-L4);
|
|
8745
8808
|
}
|
|
8746
|
-
.lumx-list-item__link--is-selected {
|
|
8809
|
+
.lumx-list-item__link--is-selected, .lumx-list-item .lumx-action-area__action[aria-selected=true]::before {
|
|
8747
8810
|
color: var(--lumx-color-primary-D2);
|
|
8748
8811
|
background-color: var(--lumx-color-primary-L5);
|
|
8749
8812
|
}
|
|
8750
|
-
.lumx-list-item__link--is-selected[data-lumx-hover], .lumx-list-item__link--is-selected[data-focus-visible-added] {
|
|
8813
|
+
.lumx-list-item__link--is-selected[data-lumx-hover], .lumx-list-item__link--is-selected[data-focus-visible-added], .lumx-list-item .lumx-action-area__action[aria-selected=true]::before[data-lumx-hover], .lumx-list-item .lumx-action-area__action[aria-selected=true]::before[data-focus-visible-added] {
|
|
8751
8814
|
background-color: var(--lumx-color-primary-L4);
|
|
8752
8815
|
}
|
|
8753
8816
|
@media (hover: hover) {
|
|
8754
|
-
.lumx-list-item__link--is-selected:hover {
|
|
8817
|
+
.lumx-list-item__link--is-selected:hover, .lumx-list-item .lumx-action-area__action[aria-selected=true]::before:hover {
|
|
8755
8818
|
background-color: var(--lumx-color-primary-L4);
|
|
8756
8819
|
}}
|
|
8757
|
-
.lumx-list-item__link--is-selected:active, .lumx-list-item__link--is-selected[data-lumx-active] {
|
|
8820
|
+
.lumx-list-item__link--is-selected:active, .lumx-list-item__link--is-selected[data-lumx-active], .lumx-list-item .lumx-action-area__action[aria-selected=true]::before:active, .lumx-list-item .lumx-action-area__action[aria-selected=true]::before[data-lumx-active] {
|
|
8758
8821
|
background-color: var(--lumx-color-primary-L3);
|
|
8759
8822
|
}
|
|
8760
|
-
.lumx-list-item__link--is-disabled {
|
|
8823
|
+
.lumx-list-item__link--is-disabled, .lumx-list-item__link[aria-disabled=true], .lumx-list-item:has(.lumx-action-area__action[aria-disabled=true]) {
|
|
8761
8824
|
opacity: 0.5;
|
|
8762
8825
|
cursor: default;
|
|
8763
8826
|
}
|
|
8827
|
+
.lumx-list-item__before, .lumx-list-item__after {
|
|
8828
|
+
position: relative;
|
|
8829
|
+
z-index: 1;
|
|
8830
|
+
}
|
|
8764
8831
|
|
|
8765
8832
|
/* Item spacing
|
|
8766
8833
|
========================================================================== */
|
|
@@ -8813,6 +8880,49 @@ table {
|
|
|
8813
8880
|
padding-left: 24px;
|
|
8814
8881
|
}
|
|
8815
8882
|
|
|
8883
|
+
/* Section
|
|
8884
|
+
========================================================================== */
|
|
8885
|
+
.lumx-list-section:not(:first-child):not(.lumx-list-section + .lumx-list-section):not(.lumx-list-divider + .lumx-list-section)::before {
|
|
8886
|
+
content: "";
|
|
8887
|
+
display: block;
|
|
8888
|
+
height: 1px;
|
|
8889
|
+
margin: 8px 0;
|
|
8890
|
+
background-color: var(--lumx-color-dark-L5);
|
|
8891
|
+
}
|
|
8892
|
+
.lumx-list-section:not(:last-child):not(:has(+ .lumx-list-divider))::after {
|
|
8893
|
+
content: "";
|
|
8894
|
+
display: block;
|
|
8895
|
+
height: 1px;
|
|
8896
|
+
margin: 8px 0;
|
|
8897
|
+
background-color: var(--lumx-color-dark-L5);
|
|
8898
|
+
}
|
|
8899
|
+
.lumx-list-section__title {
|
|
8900
|
+
font-size: 10px;
|
|
8901
|
+
font-weight: var(--lumx-typography-interface-overline-font-weight);
|
|
8902
|
+
line-height: 12px;
|
|
8903
|
+
text-transform: uppercase;
|
|
8904
|
+
display: flex;
|
|
8905
|
+
align-items: center;
|
|
8906
|
+
height: 36px;
|
|
8907
|
+
color: var(--lumx-color-dark-L2);
|
|
8908
|
+
}
|
|
8909
|
+
.lumx-list-section__title i {
|
|
8910
|
+
margin-right: 4px;
|
|
8911
|
+
}
|
|
8912
|
+
.lumx-list:has(.lumx-list-item__link) .lumx-list-section__title, .lumx-list.lumx-list--item-padding-big .lumx-list-section__title {
|
|
8913
|
+
padding-right: 16px;
|
|
8914
|
+
padding-left: 16px;
|
|
8915
|
+
}
|
|
8916
|
+
.lumx-list.lumx-list--item-padding-huge .lumx-list-section__title {
|
|
8917
|
+
padding-right: 24px;
|
|
8918
|
+
padding-left: 24px;
|
|
8919
|
+
}
|
|
8920
|
+
.lumx-list-section__items {
|
|
8921
|
+
list-style: none;
|
|
8922
|
+
margin: 0;
|
|
8923
|
+
padding: 0;
|
|
8924
|
+
}
|
|
8925
|
+
|
|
8816
8926
|
/* Divider
|
|
8817
8927
|
========================================================================== */
|
|
8818
8928
|
.lumx-list-divider {
|
|
@@ -9374,6 +9484,9 @@ table {
|
|
|
9374
9484
|
background-color: var(--lumx-color-light-N);
|
|
9375
9485
|
border-radius: var(--lumx-border-radius);
|
|
9376
9486
|
}
|
|
9487
|
+
.lumx-popover--is-hidden {
|
|
9488
|
+
display: none;
|
|
9489
|
+
}
|
|
9377
9490
|
.lumx-popover--is-initializing {
|
|
9378
9491
|
opacity: 0;
|
|
9379
9492
|
}
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@floating-ui/dom": "^1.7.5",
|
|
10
|
-
"@lumx/icons": "^4.6.0",
|
|
10
|
+
"@lumx/icons": "^4.6.1-alpha.0",
|
|
11
11
|
"classnames": "^2.3.2",
|
|
12
12
|
"focus-visible": "^5.0.2",
|
|
13
13
|
"lodash": "4.17.23",
|
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
"default": "./js/utils/index.js"
|
|
50
50
|
},
|
|
51
51
|
"./lumx.css": "./lumx.css",
|
|
52
|
+
"./components-and-utils.css": "./components-and-utils.css",
|
|
52
53
|
"./css/*": "./css/*",
|
|
53
54
|
"./scss/*": "./scss/*"
|
|
54
55
|
},
|
|
@@ -61,13 +62,14 @@
|
|
|
61
62
|
},
|
|
62
63
|
"scripts": {
|
|
63
64
|
"generate:design-tokens": "yarn node style-dictionary/index.cjs",
|
|
65
|
+
"lint": "cd ../.. && eslint packages/lumx-core/src/",
|
|
64
66
|
"build": "rollup -c",
|
|
65
67
|
"test": "vitest run --run",
|
|
66
68
|
"type-check": "yarn tsc -p tsconfig.json",
|
|
67
69
|
"update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
|
|
68
70
|
},
|
|
69
71
|
"sideEffects": false,
|
|
70
|
-
"version": "4.6.0",
|
|
72
|
+
"version": "4.6.1-alpha.0",
|
|
71
73
|
"devDependencies": {
|
|
72
74
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
73
75
|
"@testing-library/dom": "^10.4.1",
|
|
@@ -90,5 +92,6 @@
|
|
|
90
92
|
"vite": "^7.3.1",
|
|
91
93
|
"vite-tsconfig-paths": "^5.1.4",
|
|
92
94
|
"vitest": "^4.0.18"
|
|
93
|
-
}
|
|
95
|
+
},
|
|
96
|
+
"stableVersion": "4.6.0"
|
|
94
97
|
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@import "./components/avatar/index";
|
|
2
|
+
@import "./components/badge/index";
|
|
3
|
+
@import "./components/button/index";
|
|
4
|
+
@import "./components/checkbox/index";
|
|
5
|
+
@import "./components/chip/index";
|
|
6
|
+
@import "./components/comment-block/index";
|
|
7
|
+
@import "./components/date-picker/index";
|
|
8
|
+
@import "./components/dialog/index";
|
|
9
|
+
@import "./components/divider/index";
|
|
10
|
+
@import "./components/drag-handle/index";
|
|
11
|
+
@import "./components/dropdown/index";
|
|
12
|
+
@import "./components/expansion-panel/index";
|
|
13
|
+
@import "./components/flag/index";
|
|
14
|
+
@import "./components/flex-box/index";
|
|
15
|
+
@import "./components/generic-block/index";
|
|
16
|
+
@import "./components/grid/index";
|
|
17
|
+
@import "./components/grid-column/index";
|
|
18
|
+
@import "./components/icon/index";
|
|
19
|
+
@import "./components/image-block/index";
|
|
20
|
+
@import "./components/image-lightbox/index";
|
|
21
|
+
@import "./components/inline-list/index";
|
|
22
|
+
@import "./components/input-helper/index";
|
|
23
|
+
@import "./components/input-label/index";
|
|
24
|
+
@import "./components/lightbox/index";
|
|
25
|
+
@import "./components/link/index";
|
|
26
|
+
@import "./components/link-preview/index";
|
|
27
|
+
@import "./components/list/index";
|
|
28
|
+
@import "./components/message/index";
|
|
29
|
+
@import "./components/mosaic/index";
|
|
30
|
+
@import "./components/navigation/index";
|
|
31
|
+
@import "./components/notification/index";
|
|
32
|
+
@import "./components/notification-block/index";
|
|
33
|
+
@import "./components/popover/index";
|
|
34
|
+
@import "./components/post-block/index";
|
|
35
|
+
@import "./components/progress/index";
|
|
36
|
+
@import "./components/progress-tracker/index";
|
|
37
|
+
@import "./components/radio-button/index";
|
|
38
|
+
@import "./components/select/index";
|
|
39
|
+
@import "./components/side-navigation/index";
|
|
40
|
+
@import "./components/skeleton/index";
|
|
41
|
+
@import "./components/slideshow/index";
|
|
42
|
+
@import "./components/slider/index";
|
|
43
|
+
@import "./components/switch/index";
|
|
44
|
+
@import "./components/table/index";
|
|
45
|
+
@import "./components/tabs/index";
|
|
46
|
+
@import "./components/text/index";
|
|
47
|
+
@import "./components/text-field/index";
|
|
48
|
+
@import "./components/thumbnail/index";
|
|
49
|
+
@import "./components/toolbar/index";
|
|
50
|
+
@import "./components/tooltip/index";
|
|
51
|
+
@import "./components/uploader/index";
|
|
52
|
+
@import "./components/user-block/index";
|
|
@@ -30,6 +30,9 @@
|
|
|
30
30
|
========================================================================== */
|
|
31
31
|
|
|
32
32
|
.#{$lumx-base-prefix}-list-item {
|
|
33
|
+
// Positioning context for action area overlay (harmless no-op when no action area child).
|
|
34
|
+
position: relative;
|
|
35
|
+
|
|
33
36
|
&__link {
|
|
34
37
|
@include lumx-list-item-clickable;
|
|
35
38
|
}
|
|
@@ -38,13 +41,23 @@
|
|
|
38
41
|
@include lumx-list-item-highlighted;
|
|
39
42
|
}
|
|
40
43
|
|
|
41
|
-
&__link--is-selected
|
|
44
|
+
&__link--is-selected,
|
|
45
|
+
& .lumx-action-area__action[aria-selected="true"]::before {
|
|
42
46
|
@include lumx-list-item-selected;
|
|
43
47
|
}
|
|
44
48
|
|
|
45
|
-
&__link--is-disabled
|
|
49
|
+
&__link--is-disabled,
|
|
50
|
+
&__link[aria-disabled="true"],
|
|
51
|
+
&:has(.lumx-action-area__action[aria-disabled="true"]) {
|
|
46
52
|
@include lumx-state-disabled-input;
|
|
47
53
|
}
|
|
54
|
+
|
|
55
|
+
// Elevate before/after slots above the action area overlay.
|
|
56
|
+
&__before,
|
|
57
|
+
&__after {
|
|
58
|
+
position: relative;
|
|
59
|
+
z-index: 1;
|
|
60
|
+
}
|
|
48
61
|
}
|
|
49
62
|
|
|
50
63
|
/* Item spacing
|
|
@@ -93,6 +106,38 @@
|
|
|
93
106
|
}
|
|
94
107
|
}
|
|
95
108
|
|
|
109
|
+
/* Section
|
|
110
|
+
========================================================================== */
|
|
111
|
+
|
|
112
|
+
.#{$lumx-base-prefix}-list-section {
|
|
113
|
+
@include lumx-list-auto-section-divider;
|
|
114
|
+
|
|
115
|
+
&__title {
|
|
116
|
+
@include lumx-list-subheader;
|
|
117
|
+
|
|
118
|
+
i {
|
|
119
|
+
margin-right: $lumx-spacing-unit-tiny;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Padding big (defaults when list contain clickable item)
|
|
123
|
+
.#{$lumx-base-prefix}-list:has(.#{$lumx-base-prefix}-list-item__link) &,
|
|
124
|
+
.#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-big & {
|
|
125
|
+
@include lumx-list-item-padding('big');
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// Padding huge
|
|
129
|
+
.#{$lumx-base-prefix}-list.#{$lumx-base-prefix}-list--item-padding-huge & {
|
|
130
|
+
@include lumx-list-item-padding('huge');
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&__items {
|
|
135
|
+
list-style: none;
|
|
136
|
+
margin: 0;
|
|
137
|
+
padding: 0;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
96
141
|
/* Divider
|
|
97
142
|
========================================================================== */
|
|
98
143
|
|
|
@@ -131,6 +131,30 @@
|
|
|
131
131
|
background-color: lumx-color-variant("dark", $lumx-divider-color-variant);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
+
@mixin lumx-list-auto-section-divider() {
|
|
135
|
+
$divider: '.#{$lumx-base-prefix}-list-divider';
|
|
136
|
+
|
|
137
|
+
// Insert a divider before each section NOT directly following another section or an explicit divider.
|
|
138
|
+
// Avoids double dividers when two sections are adjacent or when a ListDivider separates them.
|
|
139
|
+
&:not(:first-child):not(& + &):not(#{$divider} + &) {
|
|
140
|
+
&::before {
|
|
141
|
+
content: '';
|
|
142
|
+
display: block;
|
|
143
|
+
@include lumx-list-divider;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// Insert a divider after each section that is not the last child
|
|
148
|
+
// and not directly followed by an explicit divider.
|
|
149
|
+
&:not(:last-child):not(:has(+ #{$divider})) {
|
|
150
|
+
&::after {
|
|
151
|
+
content: '';
|
|
152
|
+
display: block;
|
|
153
|
+
@include lumx-list-divider;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
134
158
|
@mixin lumx-list-item-padding($size) {
|
|
135
159
|
@if $size == "big" {
|
|
136
160
|
padding-right: $lumx-spacing-unit * 2;
|
|
File without changes
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Action area
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
.lumx-action-area {
|
|
6
|
+
position: relative;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Action element
|
|
10
|
+
========================================================================== */
|
|
11
|
+
|
|
12
|
+
.lumx-action-area__action {
|
|
13
|
+
all: unset;
|
|
14
|
+
|
|
15
|
+
&::before {
|
|
16
|
+
@include lumx-state-transition;
|
|
17
|
+
|
|
18
|
+
position: absolute;
|
|
19
|
+
inset: 0;
|
|
20
|
+
z-index: 0;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
content: '';
|
|
23
|
+
outline: 2px none lumx-color-variant('dark', 'N');
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* ==================================================================
|
|
27
|
+
Overlay (hover / active)
|
|
28
|
+
================================================================== */
|
|
29
|
+
|
|
30
|
+
// Light theme overlay (default)
|
|
31
|
+
&--has-overlay {
|
|
32
|
+
&:hover::before,
|
|
33
|
+
&[data-focus-visible-added]::before,
|
|
34
|
+
&[data-lumx-hover]::before {
|
|
35
|
+
@include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:active::before,
|
|
39
|
+
&[data-lumx-active]::before {
|
|
40
|
+
@include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'dark');
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Dark theme overlay
|
|
45
|
+
&--theme-dark#{&}--has-overlay {
|
|
46
|
+
&:hover::before,
|
|
47
|
+
&[data-focus-visible-added]::before,
|
|
48
|
+
&[data-lumx-hover]::before {
|
|
49
|
+
@include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'light');
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&:active::before,
|
|
53
|
+
&[data-lumx-active]::before {
|
|
54
|
+
@include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'light');
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* ==================================================================
|
|
59
|
+
Focus outline
|
|
60
|
+
================================================================== */
|
|
61
|
+
|
|
62
|
+
&--focus-outset[data-focus-visible-added]::before {
|
|
63
|
+
outline-style: solid;
|
|
64
|
+
outline-offset: 2px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&--focus-inset[data-focus-visible-added]::before {
|
|
68
|
+
outline-style: solid;
|
|
69
|
+
outline-offset: -2px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&--theme-dark[data-focus-visible-added]::before {
|
|
73
|
+
outline-color: lumx-color-variant('light', 'N');
|
|
74
|
+
}
|
|
75
|
+
}
|