@revikornmann/muka-ui 0.9.0 → 0.9.2
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/cjs/components/ProgressAccordeon/ProgressAccordeon.js +20 -6
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/cjs/components/SegmentGroup/SegmentGroup.css +4 -4
- package/dist/cjs/components/SegmentGroup/SegmentGroup.js +11 -6
- package/dist/cjs/components/SegmentGroup/SegmentGroup.js.map +1 -1
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js +17 -6
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -1
- package/dist/esm/components/SegmentGroup/SegmentGroup.css +4 -4
- package/dist/esm/components/SegmentGroup/SegmentGroup.js +11 -6
- package/dist/esm/components/SegmentGroup/SegmentGroup.js.map +1 -1
- package/dist/styles/components/SegmentGroup.css +4 -4
- package/dist/styles/index.css +2609 -2607
- package/dist/styles/muka-dark.css +2609 -2607
- package/dist/styles/muka-light.css +2609 -2607
- package/dist/styles/tokens-bouwplan-dark.css +2 -0
- package/dist/styles/tokens-bouwplan-light.css +2 -0
- package/dist/styles/tokens-fscl-dark.css +2 -0
- package/dist/styles/tokens-fscl-light.css +2 -0
- package/dist/styles/tokens-grip-dark.css +2 -0
- package/dist/styles/tokens-grip-light.css +2 -0
- package/dist/styles/tokens-muka-dark.css +2 -0
- package/dist/styles/tokens-muka-light.css +2 -0
- package/dist/styles/tokens-wireframe-dark.css +2 -0
- package/dist/styles/tokens-wireframe-light.css +2 -0
- package/dist/styles/wireframe-dark.css +2609 -2607
- package/dist/styles/wireframe-light.css +2609 -2607
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts.map +1 -1
- package/dist/types/components/SegmentGroup/SegmentGroup.d.ts +4 -0
- package/dist/types/components/SegmentGroup/SegmentGroup.d.ts.map +1 -1
- package/package.json +1 -1
- package/tokens/t4-components/segmentgroup.json +8 -0
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
'use client';
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
3
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
7
|
exports.ProgressAccordeon = void 0;
|
|
5
8
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const react_1 = __importDefault(require("react"));
|
|
6
10
|
const Button_1 = require("../Button");
|
|
7
11
|
const Icon_1 = require("../Icon");
|
|
8
12
|
const Divider_1 = require("../Divider");
|
|
@@ -64,12 +68,22 @@ const ProgressAccordeon = ({ state, stepNumber, heading, description, children,
|
|
|
64
68
|
// Past steps wrap the (always-mounted) slot in a grid animation container that
|
|
65
69
|
// collapses its height to zero. Marked inert + aria-hidden while collapsed so
|
|
66
70
|
// the still-mounted content is skipped by keyboard focus and assistive tech.
|
|
67
|
-
//
|
|
68
|
-
// `inert` prop
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
// `inert` is set imperatively on the DOM node rather than via a React prop:
|
|
72
|
+
// React 18 drops a boolean `inert` prop, while React 19 warns on the string
|
|
73
|
+
// form — toggling the attribute directly works correctly under both.
|
|
74
|
+
const slotWrapperRef = react_1.default.useRef(null);
|
|
75
|
+
react_1.default.useEffect(() => {
|
|
76
|
+
const node = slotWrapperRef.current;
|
|
77
|
+
if (!node)
|
|
78
|
+
return;
|
|
79
|
+
if (collapsed) {
|
|
80
|
+
node.setAttribute('inert', '');
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
node.removeAttribute('inert');
|
|
84
|
+
}
|
|
85
|
+
}, [collapsed]);
|
|
86
|
+
const pastSlot = hasSlot ? ((0, jsx_runtime_1.jsx)("div", { ref: slotWrapperRef, className: `muka-progress-accordeon__slot-wrapper${collapsed ? ' muka-progress-accordeon__slot-wrapper--collapsed' : ''}`, "aria-hidden": collapsed || undefined, children: (0, jsx_runtime_1.jsx)("div", { className: "muka-progress-accordeon__slot-clip", children: slot }) })) : null;
|
|
73
87
|
return ((0, jsx_runtime_1.jsxs)("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isPast ? ((0, jsx_runtime_1.jsxs)("div", { className: "muka-progress-accordeon__body", children: [header, pastSlot] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [header, slot] })), hasActions && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })), divider && (0, jsx_runtime_1.jsx)(Divider_1.Divider, { className: "muka-progress-accordeon__divider" })] }));
|
|
74
88
|
};
|
|
75
89
|
exports.ProgressAccordeon = ProgressAccordeon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC
|
|
1
|
+
{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
background-color: var(--segmentgroup-container-background);
|
|
10
10
|
border-radius: var(--segmentgroup-container-radius);
|
|
11
11
|
position: relative;
|
|
12
|
-
transition:
|
|
12
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
/* Inset shadow on container */
|
|
@@ -50,17 +50,18 @@
|
|
|
50
50
|
display: inline-flex;
|
|
51
51
|
align-items: center;
|
|
52
52
|
justify-content: center;
|
|
53
|
+
gap: var(--segmentgroup-segment-gap);
|
|
53
54
|
border: none;
|
|
54
55
|
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
55
56
|
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
56
57
|
border-radius: var(--segmentgroup-segment-radius);
|
|
57
58
|
cursor: pointer;
|
|
58
|
-
transition:
|
|
59
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
59
60
|
position: relative;
|
|
60
61
|
outline: none;
|
|
61
62
|
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
62
63
|
font-family: var(--alias-font-plain-family);
|
|
63
|
-
font-weight: var(--
|
|
64
|
+
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
64
65
|
z-index: 1; /* Keep above pill */
|
|
65
66
|
}
|
|
66
67
|
|
|
@@ -153,7 +154,6 @@
|
|
|
153
154
|
background-color: transparent;
|
|
154
155
|
box-shadow: none;
|
|
155
156
|
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
156
|
-
font-weight: var(--alias-font-plain-weight-semibold);
|
|
157
157
|
z-index: 2; /* Highlight pill when focused is tested below */
|
|
158
158
|
}
|
|
159
159
|
|
|
@@ -30,10 +30,11 @@ require("./SegmentGroup.css");
|
|
|
30
30
|
* />
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
|
-
const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, }) => {
|
|
33
|
+
const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
|
|
34
34
|
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue ?? options[0]?.value ?? '');
|
|
35
35
|
const selectedValue = value !== undefined ? value : internalValue;
|
|
36
36
|
const containerRef = (0, react_1.useRef)(null);
|
|
37
|
+
const segmentRefs = (0, react_1.useRef)({});
|
|
37
38
|
const [pillStyle, setPillStyle] = (0, react_1.useState)({ left: 0, width: 0, opacity: 0 });
|
|
38
39
|
(0, react_1.useEffect)(() => {
|
|
39
40
|
const updatePill = () => {
|
|
@@ -63,7 +64,7 @@ const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', cla
|
|
|
63
64
|
}
|
|
64
65
|
onChange?.(newValue);
|
|
65
66
|
}, [value, onChange, disabled]);
|
|
66
|
-
const handleKeyDown = (e, optionValue
|
|
67
|
+
const handleKeyDown = (e, optionValue) => {
|
|
67
68
|
const enabledOptions = options.filter((opt) => !opt.disabled);
|
|
68
69
|
const currentIndex = enabledOptions.findIndex((opt) => opt.value === optionValue);
|
|
69
70
|
let nextIndex = null;
|
|
@@ -95,17 +96,21 @@ const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', cla
|
|
|
95
96
|
return;
|
|
96
97
|
}
|
|
97
98
|
if (nextIndex !== null) {
|
|
98
|
-
|
|
99
|
+
const nextValue = enabledOptions[nextIndex].value;
|
|
100
|
+
handleChange(nextValue);
|
|
101
|
+
segmentRefs.current[nextValue]?.focus();
|
|
99
102
|
}
|
|
100
103
|
};
|
|
101
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-segmentgroup__pill", style: {
|
|
104
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-segmentgroup__pill", style: {
|
|
102
105
|
transform: `translateX(${pillStyle.left}px)`,
|
|
103
106
|
width: `${pillStyle.width}px`,
|
|
104
107
|
opacity: pillStyle.opacity,
|
|
105
|
-
} }), options.map((option
|
|
108
|
+
} }), options.map((option) => {
|
|
106
109
|
const isSelected = selectedValue === option.value;
|
|
107
110
|
const isDisabled = disabled || option.disabled;
|
|
108
|
-
return ((0, jsx_runtime_1.
|
|
111
|
+
return ((0, jsx_runtime_1.jsxs)("button", { ref: (element) => {
|
|
112
|
+
segmentRefs.current[option.value] = element;
|
|
113
|
+
}, type: "button", role: "radio", "aria-checked": isSelected, "aria-label": option.label, disabled: isDisabled, tabIndex: isSelected ? 0 : -1, className: `muka-segmentgroup__segment ${isSelected ? 'muka-segmentgroup__segment--selected' : ''} ${isDisabled ? 'muka-segmentgroup__segment--disabled' : ''}`.trim(), onClick: () => !isDisabled && handleChange(option.value), onKeyDown: (e) => !isDisabled && handleKeyDown(e, option.value), children: [option.icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-segmentgroup__icon", "aria-hidden": "true", children: option.icon })), !iconOnly && (0, jsx_runtime_1.jsx)("span", { className: "muka-segmentgroup__label", children: option.label })] }, option.value));
|
|
109
114
|
})] }));
|
|
110
115
|
};
|
|
111
116
|
exports.SegmentGroup = SegmentGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAAwE;AACxE,8BAA4B;
|
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import React from 'react';
|
|
3
4
|
import { Button } from '../Button';
|
|
4
5
|
import { Icon } from '../Icon';
|
|
5
6
|
import { Divider } from '../Divider';
|
|
@@ -61,12 +62,22 @@ export const ProgressAccordeon = ({ state, stepNumber, heading, description, chi
|
|
|
61
62
|
// Past steps wrap the (always-mounted) slot in a grid animation container that
|
|
62
63
|
// collapses its height to zero. Marked inert + aria-hidden while collapsed so
|
|
63
64
|
// the still-mounted content is skipped by keyboard focus and assistive tech.
|
|
64
|
-
//
|
|
65
|
-
// `inert` prop
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
65
|
+
// `inert` is set imperatively on the DOM node rather than via a React prop:
|
|
66
|
+
// React 18 drops a boolean `inert` prop, while React 19 warns on the string
|
|
67
|
+
// form — toggling the attribute directly works correctly under both.
|
|
68
|
+
const slotWrapperRef = React.useRef(null);
|
|
69
|
+
React.useEffect(() => {
|
|
70
|
+
const node = slotWrapperRef.current;
|
|
71
|
+
if (!node)
|
|
72
|
+
return;
|
|
73
|
+
if (collapsed) {
|
|
74
|
+
node.setAttribute('inert', '');
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
node.removeAttribute('inert');
|
|
78
|
+
}
|
|
79
|
+
}, [collapsed]);
|
|
80
|
+
const pastSlot = hasSlot ? (_jsx("div", { ref: slotWrapperRef, className: `muka-progress-accordeon__slot-wrapper${collapsed ? ' muka-progress-accordeon__slot-wrapper--collapsed' : ''}`, "aria-hidden": collapsed || undefined, children: _jsx("div", { className: "muka-progress-accordeon__slot-clip", children: slot }) })) : null;
|
|
70
81
|
return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isPast ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, pastSlot] })) : (_jsxs(_Fragment, { children: [header, slot] })), hasActions && (_jsxs("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && (_jsx(Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && (_jsx(Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })), divider && _jsx(Divider, { className: "muka-progress-accordeon__divider" })] }));
|
|
71
82
|
};
|
|
72
83
|
export default ProgressAccordeon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
background-color: var(--segmentgroup-container-background);
|
|
10
10
|
border-radius: var(--segmentgroup-container-radius);
|
|
11
11
|
position: relative;
|
|
12
|
-
transition:
|
|
12
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
/* Inset shadow on container */
|
|
@@ -50,17 +50,18 @@
|
|
|
50
50
|
display: inline-flex;
|
|
51
51
|
align-items: center;
|
|
52
52
|
justify-content: center;
|
|
53
|
+
gap: var(--segmentgroup-segment-gap);
|
|
53
54
|
border: none;
|
|
54
55
|
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
55
56
|
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
56
57
|
border-radius: var(--segmentgroup-segment-radius);
|
|
57
58
|
cursor: pointer;
|
|
58
|
-
transition:
|
|
59
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
59
60
|
position: relative;
|
|
60
61
|
outline: none;
|
|
61
62
|
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
62
63
|
font-family: var(--alias-font-plain-family);
|
|
63
|
-
font-weight: var(--
|
|
64
|
+
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
64
65
|
z-index: 1; /* Keep above pill */
|
|
65
66
|
}
|
|
66
67
|
|
|
@@ -153,7 +154,6 @@
|
|
|
153
154
|
background-color: transparent;
|
|
154
155
|
box-shadow: none;
|
|
155
156
|
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
156
|
-
font-weight: var(--alias-font-plain-weight-semibold);
|
|
157
157
|
z-index: 2; /* Highlight pill when focused is tested below */
|
|
158
158
|
}
|
|
159
159
|
|
|
@@ -27,10 +27,11 @@ import './SegmentGroup.css';
|
|
|
27
27
|
* />
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, }) => {
|
|
30
|
+
export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
|
|
31
31
|
const [internalValue, setInternalValue] = useState(defaultValue ?? options[0]?.value ?? '');
|
|
32
32
|
const selectedValue = value !== undefined ? value : internalValue;
|
|
33
33
|
const containerRef = useRef(null);
|
|
34
|
+
const segmentRefs = useRef({});
|
|
34
35
|
const [pillStyle, setPillStyle] = useState({ left: 0, width: 0, opacity: 0 });
|
|
35
36
|
useEffect(() => {
|
|
36
37
|
const updatePill = () => {
|
|
@@ -60,7 +61,7 @@ export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 's
|
|
|
60
61
|
}
|
|
61
62
|
onChange?.(newValue);
|
|
62
63
|
}, [value, onChange, disabled]);
|
|
63
|
-
const handleKeyDown = (e, optionValue
|
|
64
|
+
const handleKeyDown = (e, optionValue) => {
|
|
64
65
|
const enabledOptions = options.filter((opt) => !opt.disabled);
|
|
65
66
|
const currentIndex = enabledOptions.findIndex((opt) => opt.value === optionValue);
|
|
66
67
|
let nextIndex = null;
|
|
@@ -92,17 +93,21 @@ export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 's
|
|
|
92
93
|
return;
|
|
93
94
|
}
|
|
94
95
|
if (nextIndex !== null) {
|
|
95
|
-
|
|
96
|
+
const nextValue = enabledOptions[nextIndex].value;
|
|
97
|
+
handleChange(nextValue);
|
|
98
|
+
segmentRefs.current[nextValue]?.focus();
|
|
96
99
|
}
|
|
97
100
|
};
|
|
98
|
-
return (_jsxs("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", children: [_jsx("div", { className: "muka-segmentgroup__pill", style: {
|
|
101
|
+
return (_jsxs("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [_jsx("div", { className: "muka-segmentgroup__pill", style: {
|
|
99
102
|
transform: `translateX(${pillStyle.left}px)`,
|
|
100
103
|
width: `${pillStyle.width}px`,
|
|
101
104
|
opacity: pillStyle.opacity,
|
|
102
|
-
} }), options.map((option
|
|
105
|
+
} }), options.map((option) => {
|
|
103
106
|
const isSelected = selectedValue === option.value;
|
|
104
107
|
const isDisabled = disabled || option.disabled;
|
|
105
|
-
return (
|
|
108
|
+
return (_jsxs("button", { ref: (element) => {
|
|
109
|
+
segmentRefs.current[option.value] = element;
|
|
110
|
+
}, type: "button", role: "radio", "aria-checked": isSelected, "aria-label": option.label, disabled: isDisabled, tabIndex: isSelected ? 0 : -1, className: `muka-segmentgroup__segment ${isSelected ? 'muka-segmentgroup__segment--selected' : ''} ${isDisabled ? 'muka-segmentgroup__segment--disabled' : ''}`.trim(), onClick: () => !isDisabled && handleChange(option.value), onKeyDown: (e) => !isDisabled && handleKeyDown(e, option.value), children: [option.icon && (_jsx("span", { className: "muka-segmentgroup__icon", "aria-hidden": "true", children: option.icon })), !iconOnly && _jsx("span", { className: "muka-segmentgroup__label", children: option.label })] }, option.value));
|
|
106
111
|
})] }));
|
|
107
112
|
};
|
|
108
113
|
export default SegmentGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
background-color: var(--segmentgroup-container-background);
|
|
10
10
|
border-radius: var(--segmentgroup-container-radius);
|
|
11
11
|
position: relative;
|
|
12
|
-
transition:
|
|
12
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
/* Inset shadow on container */
|
|
@@ -50,17 +50,18 @@
|
|
|
50
50
|
display: inline-flex;
|
|
51
51
|
align-items: center;
|
|
52
52
|
justify-content: center;
|
|
53
|
+
gap: var(--segmentgroup-segment-gap);
|
|
53
54
|
border: none;
|
|
54
55
|
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
55
56
|
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
56
57
|
border-radius: var(--segmentgroup-segment-radius);
|
|
57
58
|
cursor: pointer;
|
|
58
|
-
transition:
|
|
59
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
59
60
|
position: relative;
|
|
60
61
|
outline: none;
|
|
61
62
|
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
62
63
|
font-family: var(--alias-font-plain-family);
|
|
63
|
-
font-weight: var(--
|
|
64
|
+
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
64
65
|
z-index: 1; /* Keep above pill */
|
|
65
66
|
}
|
|
66
67
|
|
|
@@ -153,7 +154,6 @@
|
|
|
153
154
|
background-color: transparent;
|
|
154
155
|
box-shadow: none;
|
|
155
156
|
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
156
|
-
font-weight: var(--alias-font-plain-weight-semibold);
|
|
157
157
|
z-index: 2; /* Highlight pill when focused is tested below */
|
|
158
158
|
}
|
|
159
159
|
|