@entro314labs/react-arc-tabs 1.0.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/README.md +215 -0
- package/dist/ArcTabs.css +268 -0
- package/dist/index.cjs +1028 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +70 -0
- package/dist/index.d.ts +70 -0
- package/dist/index.js +990 -0
- package/dist/index.js.map +1 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
# react-arc-tabs
|
|
2
|
+
|
|
3
|
+
Production-ready, reusable arc-style tabs for React and Next.js.
|
|
4
|
+
|
|
5
|
+
This component is based on the shared visual mechanics from the demos in this workspace:
|
|
6
|
+
|
|
7
|
+
- active tab merges into the panel
|
|
8
|
+
- inverse curved bottom corners on the active tab seam
|
|
9
|
+
- layered z-index and pseudo-element geometry for seamless arc transitions
|
|
10
|
+
- keyboard and ARIA-compliant tab interactions
|
|
11
|
+
|
|
12
|
+
## Features
|
|
13
|
+
|
|
14
|
+
- Controlled and uncontrolled usage
|
|
15
|
+
- Full keyboard navigation (`ArrowLeft`, `ArrowRight`, `Home`, `End`, `Enter`, `Space`)
|
|
16
|
+
- Disabled tabs support
|
|
17
|
+
- Manual or automatic activation mode
|
|
18
|
+
- Keep mounted or render-only-active panel strategies
|
|
19
|
+
- Themeable with CSS variables and props
|
|
20
|
+
- Two styling engines:
|
|
21
|
+
- `ArcTabs` (CSS file based)
|
|
22
|
+
- `ArcTabsTailwind` (Tailwind CSS v4+ utility based)
|
|
23
|
+
- Built-in tab switch animations adapted from the demos:
|
|
24
|
+
- sliding active backdrop (`rounded-tab` inspired)
|
|
25
|
+
- smooth seam/corner transitions (`inverse rounded corners` inspired)
|
|
26
|
+
- animated panel entry with directional motion
|
|
27
|
+
- Works in React and Next.js (`"use client"` included)
|
|
28
|
+
|
|
29
|
+
## Install (local package / workspace package)
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm install
|
|
33
|
+
npm run build
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Usage in React
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { ArcTabs, type ArcTabItem } from "react-arc-tabs";
|
|
40
|
+
import "react-arc-tabs/styles.css";
|
|
41
|
+
|
|
42
|
+
const items: ArcTabItem[] = [
|
|
43
|
+
{ id: "overview", label: "Overview", content: <div>Overview content</div> },
|
|
44
|
+
{ id: "activity", label: "Activity", content: <div>Activity feed</div>, badge: 8 },
|
|
45
|
+
{ id: "settings", label: "Settings", content: <div>Settings panel</div> }
|
|
46
|
+
];
|
|
47
|
+
|
|
48
|
+
export function Example() {
|
|
49
|
+
return (
|
|
50
|
+
<ArcTabs
|
|
51
|
+
items={items}
|
|
52
|
+
defaultValue="overview"
|
|
53
|
+
size="md"
|
|
54
|
+
fit="content"
|
|
55
|
+
motionPreset="expressive"
|
|
56
|
+
motionDuration={320}
|
|
57
|
+
activationMode="automatic"
|
|
58
|
+
ariaLabel="Project sections"
|
|
59
|
+
accentColor="#5b4ff1"
|
|
60
|
+
/>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Usage with Tailwind CSS 4+
|
|
66
|
+
|
|
67
|
+
`ArcTabsTailwind` renders with Tailwind utility classes (including pseudo-element arc geometry), so you don't need to import `styles.css`.
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { ArcTabsTailwind, type ArcTabItem } from "react-arc-tabs";
|
|
71
|
+
|
|
72
|
+
const items: ArcTabItem[] = [
|
|
73
|
+
{ id: "overview", label: "Overview", content: <div>Overview content</div> },
|
|
74
|
+
{ id: "activity", label: "Activity", content: <div>Activity feed</div>, badge: 8 },
|
|
75
|
+
{ id: "settings", label: "Settings", content: <div>Settings panel</div> }
|
|
76
|
+
];
|
|
77
|
+
|
|
78
|
+
export function ExampleTailwind() {
|
|
79
|
+
return (
|
|
80
|
+
<ArcTabsTailwind
|
|
81
|
+
items={items}
|
|
82
|
+
defaultValue="overview"
|
|
83
|
+
fit="equal"
|
|
84
|
+
motionPreset="expressive"
|
|
85
|
+
motionDuration={320}
|
|
86
|
+
activationMode="automatic"
|
|
87
|
+
ariaLabel="Project sections"
|
|
88
|
+
accentColor="#4f46e5"
|
|
89
|
+
classNames={{
|
|
90
|
+
root: "max-w-3xl",
|
|
91
|
+
panel: "prose prose-sm max-w-none"
|
|
92
|
+
}}
|
|
93
|
+
/>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Tailwind v4 source scanning (important)
|
|
99
|
+
|
|
100
|
+
If Tailwind doesn't generate the component classes from node modules in your setup, add an explicit source path in your global stylesheet:
|
|
101
|
+
|
|
102
|
+
```css
|
|
103
|
+
@import "tailwindcss";
|
|
104
|
+
|
|
105
|
+
/* npm/yarn/pnpm install use-case */
|
|
106
|
+
@source "../node_modules/react-arc-tabs/dist/**/*.{js,cjs}";
|
|
107
|
+
|
|
108
|
+
/* monorepo/local workspace use-case (adjust path) */
|
|
109
|
+
/* @source "../../packages/react-arc-tabs/src/**/*.{ts,tsx}"; */
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Usage in Next.js App Router
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
"use client";
|
|
116
|
+
|
|
117
|
+
import { ArcTabs, type ArcTabItem } from "react-arc-tabs";
|
|
118
|
+
import "react-arc-tabs/styles.css";
|
|
119
|
+
|
|
120
|
+
const tabs: ArcTabItem[] = [
|
|
121
|
+
{ id: "summary", label: "Summary", content: <div>Summary panel</div> },
|
|
122
|
+
{ id: "billing", label: "Billing", content: <div>Billing panel</div> },
|
|
123
|
+
{ id: "usage", label: "Usage", content: <div>Usage panel</div> }
|
|
124
|
+
];
|
|
125
|
+
|
|
126
|
+
export default function Page() {
|
|
127
|
+
return <ArcTabs items={tabs} defaultValue="summary" ariaLabel="Account tabs" />;
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Next.js + Tailwind variant
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
"use client";
|
|
135
|
+
|
|
136
|
+
import { ArcTabsTailwind, type ArcTabItem } from "react-arc-tabs";
|
|
137
|
+
|
|
138
|
+
const tabs: ArcTabItem[] = [
|
|
139
|
+
{ id: "summary", label: "Summary", content: <div>Summary panel</div> },
|
|
140
|
+
{ id: "billing", label: "Billing", content: <div>Billing panel</div> },
|
|
141
|
+
{ id: "usage", label: "Usage", content: <div>Usage panel</div> }
|
|
142
|
+
];
|
|
143
|
+
|
|
144
|
+
export default function Page() {
|
|
145
|
+
return <ArcTabsTailwind items={tabs} defaultValue="summary" ariaLabel="Account tabs" />;
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Styling model
|
|
150
|
+
|
|
151
|
+
You can theme via props or by overriding CSS variables on `.arc-tabs`:
|
|
152
|
+
|
|
153
|
+
- `--arc-radius`
|
|
154
|
+
- `--arc-gap`
|
|
155
|
+
- `--arc-accent`
|
|
156
|
+
- `--arc-tab-bg`
|
|
157
|
+
- `--arc-tab-hover-bg`
|
|
158
|
+
- `--arc-panel-bg`
|
|
159
|
+
- `--arc-panel-border`
|
|
160
|
+
- `--arc-panel-padding`
|
|
161
|
+
|
|
162
|
+
## API
|
|
163
|
+
|
|
164
|
+
`ArcTabs` props:
|
|
165
|
+
|
|
166
|
+
- `items: ArcTabItem[]`
|
|
167
|
+
- `value?: string`
|
|
168
|
+
- `defaultValue?: string`
|
|
169
|
+
- `onValueChange?: (value, item, index) => void`
|
|
170
|
+
- `activationMode?: "automatic" | "manual"`
|
|
171
|
+
- `size?: "sm" | "md" | "lg"`
|
|
172
|
+
- `fit?: "content" | "equal"`
|
|
173
|
+
- `motionPreset?: "none" | "subtle" | "expressive"`
|
|
174
|
+
- `motionDuration?: number`
|
|
175
|
+
- `keepMounted?: boolean`
|
|
176
|
+
- `radius?: number`
|
|
177
|
+
- `gap?: number`
|
|
178
|
+
- `panelPadding?: number | string`
|
|
179
|
+
- `accentColor?: string`
|
|
180
|
+
- `tabBackground?: string`
|
|
181
|
+
- `tabHoverBackground?: string`
|
|
182
|
+
- `panelBackground?: string`
|
|
183
|
+
- `panelBorderColor?: string`
|
|
184
|
+
- `renderTabLabel?: (item, state) => ReactNode`
|
|
185
|
+
- `renderPanel?: (item, state) => ReactNode`
|
|
186
|
+
|
|
187
|
+
`ArcTabsTailwind` props:
|
|
188
|
+
|
|
189
|
+
- all `ArcTabs` props
|
|
190
|
+
- `classNames?: ArcTabsTailwindClassNames`
|
|
191
|
+
|
|
192
|
+
`ArcTabsTailwindClassNames` slots:
|
|
193
|
+
|
|
194
|
+
- `root`
|
|
195
|
+
- `list`
|
|
196
|
+
- `indicator`
|
|
197
|
+
- `item`
|
|
198
|
+
- `tab`
|
|
199
|
+
- `tabSelected`
|
|
200
|
+
- `tabUnselected`
|
|
201
|
+
- `tabDisabled`
|
|
202
|
+
- `icon`
|
|
203
|
+
- `text`
|
|
204
|
+
- `badge`
|
|
205
|
+
- `panels`
|
|
206
|
+
- `panel`
|
|
207
|
+
|
|
208
|
+
`ArcTabItem`:
|
|
209
|
+
|
|
210
|
+
- `id: string`
|
|
211
|
+
- `label: ReactNode`
|
|
212
|
+
- `content: ReactNode`
|
|
213
|
+
- `disabled?: boolean`
|
|
214
|
+
- `icon?: ReactNode`
|
|
215
|
+
- `badge?: ReactNode`
|
package/dist/ArcTabs.css
ADDED
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
.arc-tabs {
|
|
2
|
+
--arc-radius: 14px;
|
|
3
|
+
--arc-gap: 10px;
|
|
4
|
+
--arc-border-width: 1px;
|
|
5
|
+
--arc-motion-duration: 260ms;
|
|
6
|
+
--arc-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
|
|
7
|
+
|
|
8
|
+
--arc-accent: #5b4ff1;
|
|
9
|
+
--arc-text: #171a2c;
|
|
10
|
+
--arc-tab-bg: #e7ebff;
|
|
11
|
+
--arc-tab-hover-bg: #dce3ff;
|
|
12
|
+
--arc-panel-bg: #ffffff;
|
|
13
|
+
--arc-panel-border: #cfd6f5;
|
|
14
|
+
--arc-panel-padding: 1rem;
|
|
15
|
+
|
|
16
|
+
width: 100%;
|
|
17
|
+
color: var(--arc-text);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@media (prefers-color-scheme: dark) {
|
|
21
|
+
.arc-tabs {
|
|
22
|
+
--arc-text: #edf1ff;
|
|
23
|
+
--arc-tab-bg: #2c3555;
|
|
24
|
+
--arc-tab-hover-bg: #374268;
|
|
25
|
+
--arc-panel-bg: #1c243b;
|
|
26
|
+
--arc-panel-border: #46527e;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.arc-tabs__list {
|
|
31
|
+
position: relative;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: end;
|
|
34
|
+
gap: var(--arc-gap);
|
|
35
|
+
list-style: none;
|
|
36
|
+
margin: 0;
|
|
37
|
+
padding: 0 0 var(--arc-gap);
|
|
38
|
+
overflow-x: auto;
|
|
39
|
+
overflow-y: clip;
|
|
40
|
+
scrollbar-width: thin;
|
|
41
|
+
isolation: isolate;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.arc-tabs__item {
|
|
45
|
+
position: relative;
|
|
46
|
+
z-index: 2;
|
|
47
|
+
flex: 0 0 auto;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.arc-tabs__active-indicator {
|
|
51
|
+
position: absolute;
|
|
52
|
+
left: 0;
|
|
53
|
+
top: 0;
|
|
54
|
+
z-index: 1;
|
|
55
|
+
width: var(--arc-indicator-w, 0px);
|
|
56
|
+
height: calc(100% - var(--arc-gap));
|
|
57
|
+
border-top-left-radius: var(--arc-radius);
|
|
58
|
+
border-top-right-radius: var(--arc-radius);
|
|
59
|
+
border-bottom-left-radius: 0;
|
|
60
|
+
border-bottom-right-radius: 0;
|
|
61
|
+
transform: translateX(var(--arc-indicator-x, 0px));
|
|
62
|
+
background: var(--arc-panel-bg);
|
|
63
|
+
box-shadow: 0 calc(var(--arc-gap) + var(--arc-border-width)) 0 var(--arc-panel-bg);
|
|
64
|
+
opacity: 0;
|
|
65
|
+
pointer-events: none;
|
|
66
|
+
transition:
|
|
67
|
+
transform var(--arc-motion-duration) var(--arc-motion-easing),
|
|
68
|
+
width var(--arc-motion-duration) var(--arc-motion-easing),
|
|
69
|
+
opacity calc(var(--arc-motion-duration) * 0.7) ease;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.arc-tabs__active-indicator.is-ready {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.arc-tabs:not(.arc-tabs--motion-expressive) .arc-tabs__active-indicator {
|
|
77
|
+
display: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.arc-tabs--fit-equal .arc-tabs__item {
|
|
81
|
+
flex: 1 1 0;
|
|
82
|
+
min-width: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.arc-tabs--fit-equal .arc-tabs__tab {
|
|
86
|
+
width: 100%;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.arc-tabs__tab {
|
|
91
|
+
position: relative;
|
|
92
|
+
display: inline-flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
gap: 0.5rem;
|
|
96
|
+
border: var(--arc-border-width) solid var(--arc-panel-border);
|
|
97
|
+
border-radius: var(--arc-radius);
|
|
98
|
+
background: var(--arc-tab-bg);
|
|
99
|
+
color: inherit;
|
|
100
|
+
font: inherit;
|
|
101
|
+
font-weight: 650;
|
|
102
|
+
line-height: 1;
|
|
103
|
+
white-space: nowrap;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
user-select: none;
|
|
106
|
+
transition:
|
|
107
|
+
background-color var(--arc-motion-duration) var(--arc-motion-easing),
|
|
108
|
+
color var(--arc-motion-duration) var(--arc-motion-easing),
|
|
109
|
+
transform calc(var(--arc-motion-duration) * 0.65) var(--arc-motion-easing),
|
|
110
|
+
border-color var(--arc-motion-duration) var(--arc-motion-easing),
|
|
111
|
+
box-shadow var(--arc-motion-duration) var(--arc-motion-easing);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.arc-tabs--size-sm .arc-tabs__tab {
|
|
115
|
+
min-height: 2.25rem;
|
|
116
|
+
padding: 0.35rem 0.75rem;
|
|
117
|
+
font-size: 0.875rem;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.arc-tabs--size-md .arc-tabs__tab {
|
|
121
|
+
min-height: 2.6rem;
|
|
122
|
+
padding: 0.55rem 1rem;
|
|
123
|
+
font-size: 0.95rem;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.arc-tabs--size-lg .arc-tabs__tab {
|
|
127
|
+
min-height: 3rem;
|
|
128
|
+
padding: 0.65rem 1.2rem;
|
|
129
|
+
font-size: 1rem;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.arc-tabs__tab:not([aria-selected="true"]):not(:disabled):hover {
|
|
133
|
+
background: var(--arc-tab-hover-bg);
|
|
134
|
+
transform: translateY(1px);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.arc-tabs__tab:not([aria-selected="true"]):not(:disabled):active {
|
|
138
|
+
transform: translateY(2px);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.arc-tabs__tab:focus-visible {
|
|
142
|
+
outline: 2px solid color-mix(in srgb, var(--arc-accent) 75%, white 25%);
|
|
143
|
+
outline-offset: 2px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.arc-tabs__tab:disabled {
|
|
147
|
+
opacity: 0.45;
|
|
148
|
+
cursor: not-allowed;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.arc-tabs__tab::before,
|
|
152
|
+
.arc-tabs__tab::after {
|
|
153
|
+
content: "";
|
|
154
|
+
position: absolute;
|
|
155
|
+
bottom: 0;
|
|
156
|
+
width: calc(var(--arc-radius) + var(--arc-border-width));
|
|
157
|
+
height: calc(var(--arc-radius) * 2);
|
|
158
|
+
opacity: 0;
|
|
159
|
+
pointer-events: none;
|
|
160
|
+
transform: translateY(calc(var(--arc-gap) + var(--arc-border-width)));
|
|
161
|
+
background-color: transparent;
|
|
162
|
+
box-shadow: 0 var(--arc-radius) 0 var(--arc-panel-bg);
|
|
163
|
+
transition:
|
|
164
|
+
opacity var(--arc-motion-duration) var(--arc-motion-easing),
|
|
165
|
+
transform var(--arc-motion-duration) var(--arc-motion-easing);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.arc-tabs__tab[aria-selected="true"]::before,
|
|
169
|
+
.arc-tabs__tab[aria-selected="true"]::after {
|
|
170
|
+
opacity: 1;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.arc-tabs__tab::before {
|
|
174
|
+
left: calc(var(--arc-border-width) * -1);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.arc-tabs__tab:not(:first-child)::before {
|
|
178
|
+
transform: translateX(-100%)
|
|
179
|
+
translateY(calc(var(--arc-gap) + var(--arc-border-width)));
|
|
180
|
+
border-bottom-right-radius: var(--arc-radius);
|
|
181
|
+
box-shadow: var(--arc-border-width) var(--arc-radius) 0 var(--arc-panel-bg);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.arc-tabs__tab::after {
|
|
185
|
+
right: calc(var(--arc-border-width) * -1);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.arc-tabs__tab:not(:last-child)::after {
|
|
189
|
+
transform: translateX(100%)
|
|
190
|
+
translateY(calc(var(--arc-gap) + var(--arc-border-width)));
|
|
191
|
+
border-bottom-left-radius: var(--arc-radius);
|
|
192
|
+
box-shadow: calc(var(--arc-border-width) * -1) var(--arc-radius) 0
|
|
193
|
+
var(--arc-panel-bg);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.arc-tabs__tab[aria-selected="true"] {
|
|
197
|
+
z-index: 3;
|
|
198
|
+
color: color-mix(in srgb, var(--arc-accent) 85%, black 15%);
|
|
199
|
+
border-color: var(--arc-panel-bg);
|
|
200
|
+
background: var(--arc-panel-bg);
|
|
201
|
+
border-bottom-left-radius: 0;
|
|
202
|
+
border-bottom-right-radius: 0;
|
|
203
|
+
box-shadow: 0 calc(var(--arc-gap) + var(--arc-border-width)) 0 var(--arc-panel-bg);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.arc-tabs--motion-expressive .arc-tabs__tab[aria-selected="true"] {
|
|
207
|
+
background: transparent;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.arc-tabs__icon {
|
|
211
|
+
display: inline-flex;
|
|
212
|
+
line-height: 0;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.arc-tabs__text {
|
|
216
|
+
display: inline-block;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.arc-tabs__badge {
|
|
220
|
+
display: inline-flex;
|
|
221
|
+
align-items: center;
|
|
222
|
+
justify-content: center;
|
|
223
|
+
min-width: 1.25rem;
|
|
224
|
+
padding: 0.125rem 0.4rem;
|
|
225
|
+
border-radius: 999px;
|
|
226
|
+
background: color-mix(in srgb, var(--arc-accent) 18%, transparent 82%);
|
|
227
|
+
color: color-mix(in srgb, var(--arc-accent) 82%, black 18%);
|
|
228
|
+
font-size: 0.72em;
|
|
229
|
+
font-weight: 700;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.arc-tabs__panels {
|
|
233
|
+
position: relative;
|
|
234
|
+
z-index: 2;
|
|
235
|
+
margin-top: 0;
|
|
236
|
+
border: var(--arc-border-width) solid var(--arc-panel-border);
|
|
237
|
+
border-radius: var(--arc-radius);
|
|
238
|
+
background: var(--arc-panel-bg);
|
|
239
|
+
padding: var(--arc-panel-padding);
|
|
240
|
+
box-shadow: 0 12px 32px color-mix(in srgb, var(--arc-accent) 12%, transparent);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.arc-tabs__panel[hidden] {
|
|
244
|
+
display: none;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.arc-tabs__panel {
|
|
248
|
+
outline: none;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.arc-tabs--motion-none .arc-tabs__tab,
|
|
252
|
+
.arc-tabs--motion-none .arc-tabs__tab::before,
|
|
253
|
+
.arc-tabs--motion-none .arc-tabs__tab::after,
|
|
254
|
+
.arc-tabs--motion-none .arc-tabs__active-indicator {
|
|
255
|
+
transition: none;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@media (prefers-reduced-motion: reduce) {
|
|
259
|
+
.arc-tabs__tab {
|
|
260
|
+
transition: none;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.arc-tabs__tab::before,
|
|
264
|
+
.arc-tabs__tab::after,
|
|
265
|
+
.arc-tabs__active-indicator {
|
|
266
|
+
transition: none;
|
|
267
|
+
}
|
|
268
|
+
}
|