@ibis-design/css 1.0.0-alpha.4 → 1.0.0-alpha.5

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.
Files changed (23) hide show
  1. package/README.md +138 -129
  2. package/dist/components/appLayout.css +6 -6
  3. package/dist/components/banner.css +25 -25
  4. package/dist/components/button.css +28 -28
  5. package/dist/components/card.css +13 -13
  6. package/dist/components/cardLayout.css +16 -16
  7. package/dist/components/checkbox.css +24 -24
  8. package/dist/components/chips.css +14 -14
  9. package/dist/components/dropdown.css +21 -21
  10. package/dist/components/dropdownButton.css +13 -13
  11. package/dist/components/formLayout.css +18 -18
  12. package/dist/components/pillTab.css +8 -8
  13. package/dist/components/pillTabWrapper.css +1 -1
  14. package/dist/components/radio.css +22 -22
  15. package/dist/components/switch.css +12 -12
  16. package/dist/components/textInput.css +29 -29
  17. package/dist/components/textarea.css +77 -56
  18. package/dist/components/textlink.css +24 -24
  19. package/dist/components/tipIndicator.css +12 -12
  20. package/dist/components/toaster.css +21 -21
  21. package/dist/components/topBar.css +1 -1
  22. package/package.json +1 -1
  23. package/src/lib/set-theme.ts +35 -6
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @ibis-design/css
2
2
 
3
- Design tokens, ready-made component styles (`.ibis-*` classes), and a Tailwind preset for the IBIS design system. Use it from **any** frontend stack—vanilla HTML, React, Vue, Svelte, etc.—similar to how you would use Materialize, DaisyUI, or a token-based CSS framework.
3
+ Design tokens, ready-made component styles (`.ib-*` classes), and a Tailwind preset for the IBIS design system. Use it from **any** frontend stack—vanilla HTML, React, Vue, Svelte, etc.—similar to how you would use Materialize, DaisyUI, or a token-based CSS framework.
4
4
 
5
5
  ## Installation
6
6
 
@@ -19,8 +19,8 @@ Every page needs **tokens** once, then **component CSS** only for the components
19
19
  <link rel="stylesheet" href="/path/to/your/app.css" />
20
20
  </head>
21
21
  <body>
22
- <button type="button" class="ibis-button ibis-button--primary ibis-button--md">
23
- <span class="ibis-button__content">Pay now</span>
22
+ <button type="button" class="ib-button ib-button--primary ib-button--md">
23
+ <span class="ib-button__content">Pay now</span>
24
24
  </button>
25
25
  </body>
26
26
  </html>
@@ -33,9 +33,12 @@ Every page needs **tokens** once, then **component CSS** only for the components
33
33
  ```
34
34
 
35
35
  ```ts
36
- import { setTheme } from '@ibis-design/css/theme';
36
+ import { setTheme, getTheme, toggleDark } from '@ibis-design/css/theme';
37
37
 
38
38
  setTheme({ brand: 'alc', colorMode: 'dark' });
39
+
40
+ // Toggle light ↔ dark (preserves brand)
41
+ const { colorMode } = toggleDark();
39
42
  ```
40
43
 
41
44
  | `data-brand` | Brand |
@@ -80,21 +83,21 @@ Import the stylesheet for each component you render. Class names are stable acro
80
83
 
81
84
  | Stylesheet | Root class |
82
85
  |------------|------------|
83
- | `@ibis-design/css/components/button.css` | `.ibis-button` |
84
- | `@ibis-design/css/components/checkbox.css` | `.ibis-checkbox` |
85
- | `@ibis-design/css/components/radio.css` | `.ibis-radio` |
86
- | `@ibis-design/css/components/switch.css` | `.ibis-switch` |
87
- | `@ibis-design/css/components/textInput.css` | `.ibis-input` |
88
- | `@ibis-design/css/components/textarea.css` | `.ibis-input` (textarea) |
89
- | `@ibis-design/css/components/textlink.css` | `.ibis-link` |
90
- | `@ibis-design/css/components/chips.css` | `.ibis-chips` |
91
- | `@ibis-design/css/components/banner.css` | `.ibis-banner` |
92
- | `@ibis-design/css/components/toaster.css` | `.ibis-toaster` |
93
- | `@ibis-design/css/components/dropdown.css` | `.ibis-dropdown` |
94
- | `@ibis-design/css/components/dropdownButton.css` | `.ibis-dropdown-button` |
95
- | `@ibis-design/css/components/pillTab.css` | `.ibis-pill-tab` |
96
- | `@ibis-design/css/components/tipIndicator.css` | `.ibis-tip-indicator` |
97
- | `@ibis-design/css/components/tooltip.css` | `.ibis-tooltip` |
86
+ | `@ibis-design/css/components/button.css` | `.ib-button` |
87
+ | `@ibis-design/css/components/checkbox.css` | `.ib-checkbox` |
88
+ | `@ibis-design/css/components/radio.css` | `.ib-radio` |
89
+ | `@ibis-design/css/components/switch.css` | `.ib-switch` |
90
+ | `@ibis-design/css/components/textInput.css` | `.ib-input` |
91
+ | `@ibis-design/css/components/textarea.css` | `.ib-textarea` |
92
+ | `@ibis-design/css/components/textlink.css` | `.ib-link` |
93
+ | `@ibis-design/css/components/chips.css` | `.ib-chips` |
94
+ | `@ibis-design/css/components/banner.css` | `.ib-banner` |
95
+ | `@ibis-design/css/components/toaster.css` | `.ib-toaster` |
96
+ | `@ibis-design/css/components/dropdown.css` | `.ib-dropdown` |
97
+ | `@ibis-design/css/components/dropdownButton.css` | `.ib-dropdown-button` |
98
+ | `@ibis-design/css/components/pillTab.css` | `.ib-pill-tab` |
99
+ | `@ibis-design/css/components/tipIndicator.css` | `.ib-tip-indicator` |
100
+ | `@ibis-design/css/components/tooltip.css` | `.ib-tooltip` |
98
101
 
99
102
  For ready-made components, use [@ibis-design/svelte](https://www.npmjs.com/package/@ibis-design/svelte) or [@ibis-design/react](https://www.npmjs.com/package/@ibis-design/react) instead of copying markup by hand.
100
103
 
@@ -106,25 +109,25 @@ For ready-made components, use [@ibis-design/svelte](https://www.npmjs.com/packa
106
109
  @import "@ibis-design/css/components/button.css";
107
110
  ```
108
111
 
109
- **Variants:** `ibis-button--primary`, `ibis-button--secondary`
110
- **Sizes:** `ibis-button--sm`, `ibis-button--md`, `ibis-button--lg`
111
- **States:** `ibis-button--loading`, `ibis-button--skeleton`, `ibis-button--icon-only`, `disabled` attribute
112
+ **Variants:** `ib-button--primary`, `ib-button--secondary`
113
+ **Sizes:** `ib-button--sm`, `ib-button--md`, `ib-button--lg`
114
+ **States:** `ib-button--loading`, `ib-button--skeleton`, `ib-button--icon-only`, `disabled` attribute
112
115
 
113
116
  ```html
114
117
  <!-- Primary action -->
115
- <button type="submit" class="ibis-button ibis-button--primary ibis-button--md">
116
- <span class="ibis-button__content">Submit payment</span>
118
+ <button type="submit" class="ib-button ib-button--primary ib-button--md">
119
+ <span class="ib-button__content">Submit payment</span>
117
120
  </button>
118
121
 
119
122
  <!-- Secondary / cancel -->
120
- <button type="button" class="ibis-button ibis-button--secondary ibis-button--sm">
121
- <span class="ibis-button__content">Cancel</span>
123
+ <button type="button" class="ib-button ib-button--secondary ib-button--sm">
124
+ <span class="ib-button__content">Cancel</span>
122
125
  </button>
123
126
 
124
127
  <!-- Loading -->
125
- <button type="button" class="ibis-button ibis-button--primary ibis-button--md ibis-button--loading" disabled aria-busy="true">
126
- <span class="ibis-button__content ibis-button__content--hidden">Processing…</span>
127
- <span class="ibis-button__loader" aria-hidden="true"></span>
128
+ <button type="button" class="ib-button ib-button--primary ib-button--md ib-button--loading" disabled aria-busy="true">
129
+ <span class="ib-button__content ib-button__content--hidden">Processing…</span>
130
+ <span class="ib-button__loader" aria-hidden="true"></span>
128
131
  </button>
129
132
  ```
130
133
 
@@ -136,24 +139,24 @@ For ready-made components, use [@ibis-design/svelte](https://www.npmjs.com/packa
136
139
  @import "@ibis-design/css/components/checkbox.css";
137
140
  ```
138
141
 
139
- **Sizes:** `ibis-checkbox--sm`, `ibis-checkbox--md`, `ibis-checkbox--lg`
140
- **States:** `ibis-checkbox--disabled`, `ibis-checkbox--invalid`
142
+ **Sizes:** `ib-checkbox--sm`, `ib-checkbox--md`, `ib-checkbox--lg`
143
+ **States:** `ib-checkbox--disabled`, `ib-checkbox--invalid`
141
144
 
142
145
  ```html
143
- <div class="ibis-checkbox ibis-checkbox--md">
144
- <div class="ibis-checkbox__label-wrapper">
145
- <label class="ibis-checkbox__label" for="terms">Accept terms</label>
146
- <div class="ibis-checkbox__description">Required to continue.</div>
146
+ <div class="ib-checkbox ib-checkbox--md">
147
+ <div class="ib-checkbox__label-wrapper">
148
+ <label class="ib-checkbox__label" for="terms">Accept terms</label>
149
+ <div class="ib-checkbox__description">Required to continue.</div>
147
150
  </div>
148
- <div class="ibis-checkbox__wrapper">
149
- <label class="ibis-checkbox__control">
150
- <input id="terms" type="checkbox" class="ibis-checkbox__input" />
151
- <span class="ibis-checkbox__box">
152
- <span class="ibis-checkbox__icon">✓</span>
151
+ <div class="ib-checkbox__wrapper">
152
+ <label class="ib-checkbox__control">
153
+ <input id="terms" type="checkbox" class="ib-checkbox__input" />
154
+ <span class="ib-checkbox__box">
155
+ <span class="ib-checkbox__icon">✓</span>
153
156
  </span>
154
157
  </label>
155
158
  </div>
156
- <div class="ibis-checkbox__help">You can change this later in settings.</div>
159
+ <div class="ib-checkbox__help">You can change this later in settings.</div>
157
160
  </div>
158
161
  ```
159
162
 
@@ -165,22 +168,22 @@ For ready-made components, use [@ibis-design/svelte](https://www.npmjs.com/packa
165
168
  @import "@ibis-design/css/components/radio.css";
166
169
  ```
167
170
 
168
- Group radios with the same `name`. Use `ibis-radio--invalid` for error styling.
171
+ Group radios with the same `name`. Use `ib-radio--invalid` for error styling.
169
172
 
170
173
  ```html
171
- <div class="ibis-radio ibis-radio--md">
172
- <div class="ibis-radio__label-wrapper">
173
- <span class="ibis-radio__label">Account type</span>
174
+ <div class="ib-radio ib-radio--md">
175
+ <div class="ib-radio__label-wrapper">
176
+ <span class="ib-radio__label">Account type</span>
174
177
  </div>
175
- <label class="ibis-radio__control">
176
- <input type="radio" name="account" value="personal" class="ibis-radio__input" />
177
- <span class="ibis-radio__circle"><span class="ibis-radio__dot"></span></span>
178
- <span class="ibis-radio__text">Personal</span>
178
+ <label class="ib-radio__control">
179
+ <input type="radio" name="account" value="personal" class="ib-radio__input" />
180
+ <span class="ib-radio__circle"><span class="ib-radio__dot"></span></span>
181
+ <span class="ib-radio__text">Personal</span>
179
182
  </label>
180
- <label class="ibis-radio__control">
181
- <input type="radio" name="account" value="business" class="ibis-radio__input" checked />
182
- <span class="ibis-radio__circle"><span class="ibis-radio__dot ibis-radio__dot--active"></span></span>
183
- <span class="ibis-radio__text">Business</span>
183
+ <label class="ib-radio__control">
184
+ <input type="radio" name="account" value="business" class="ib-radio__input" checked />
185
+ <span class="ib-radio__circle"><span class="ib-radio__dot ib-radio__dot--active"></span></span>
186
+ <span class="ib-radio__text">Business</span>
184
187
  </label>
185
188
  </div>
186
189
  ```
@@ -194,13 +197,13 @@ Group radios with the same `name`. Use `ibis-radio--invalid` for error styling.
194
197
  ```
195
198
 
196
199
  ```html
197
- <div class="ibis-switch">
198
- <label class="ibis-switch__control" for="notifications">
199
- <input id="notifications" type="checkbox" class="ibis-switch__input" checked />
200
- <span class="ibis-switch__track">
201
- <span class="ibis-switch__thumb"></span>
200
+ <div class="ib-switch">
201
+ <label class="ib-switch__control" for="notifications">
202
+ <input id="notifications" type="checkbox" class="ib-switch__input" checked />
203
+ <span class="ib-switch__track">
204
+ <span class="ib-switch__thumb"></span>
202
205
  </span>
203
- <span class="ibis-switch__label">Email notifications</span>
206
+ <span class="ib-switch__label">Email notifications</span>
204
207
  </label>
205
208
  </div>
206
209
  ```
@@ -213,33 +216,33 @@ Group radios with the same `name`. Use `ibis-radio--invalid` for error styling.
213
216
  @import "@ibis-design/css/components/textInput.css";
214
217
  ```
215
218
 
216
- **Sizes:** `ibis-input--sm`, `ibis-input--md`, `ibis-input--lg`
217
- **States:** `ibis-input--disabled`, `ibis-input--invalid`, `ibis-input--loading`
219
+ **Sizes:** `ib-input--sm`, `ib-input--md`, `ib-input--lg`
220
+ **States:** `ib-input--disabled`, `ib-input--invalid`, `ib-input--loading`
218
221
 
219
222
  ```html
220
- <div class="ibis-input ibis-input--md">
221
- <label class="ibis-input__label" for="email">Email</label>
222
- <div class="ibis-input__wrapper">
223
- <div class="ibis-input__field-wrapper">
224
- <input id="email" type="email" class="ibis-input__field" placeholder="you@example.com" />
223
+ <div class="ib-input ib-input--md">
224
+ <label class="ib-input__label" for="email">Email</label>
225
+ <div class="ib-input__wrapper">
226
+ <div class="ib-input__field-wrapper">
227
+ <input id="email" type="email" class="ib-input__field" placeholder="you@example.com" />
225
228
  </div>
226
229
  </div>
227
- <div class="ibis-input__help">We will never share your email.</div>
230
+ <div class="ib-input__help">We will never share your email.</div>
228
231
  </div>
229
232
 
230
233
  <!-- Invalid -->
231
- <div class="ibis-input ibis-input--md ibis-input--invalid">
232
- <label class="ibis-input__label" for="amount">Amount</label>
233
- <div class="ibis-input__wrapper">
234
- <div class="ibis-input__field-wrapper">
235
- <input id="amount" type="text" class="ibis-input__field" aria-invalid="true" />
234
+ <div class="ib-input ib-input--md ib-input--invalid">
235
+ <label class="ib-input__label" for="amount">Amount</label>
236
+ <div class="ib-input__wrapper">
237
+ <div class="ib-input__field-wrapper">
238
+ <input id="amount" type="text" class="ib-input__field" aria-invalid="true" />
236
239
  </div>
237
240
  </div>
238
- <div class="ibis-input__error" role="alert">Enter a valid amount.</div>
241
+ <div class="ib-input__error" role="alert">Enter a valid amount.</div>
239
242
  </div>
240
243
  ```
241
244
 
242
- Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a `<textarea class="ibis-input__field">` inside `.ibis-input__field-wrapper`.
245
+ Textarea uses the same `.ib-input` structure; import `textarea.css` and use a `<textarea class="ib-input__field">` inside `.ib-input__field-wrapper`.
243
246
 
244
247
  ---
245
248
 
@@ -249,12 +252,12 @@ Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a
249
252
  @import "@ibis-design/css/components/textlink.css";
250
253
  ```
251
254
 
252
- **Sizes:** `ibis-link--sm`, `ibis-link--md`, `ibis-link--lg`
253
- **Underline:** `ibis-link--underline-always`, `ibis-link--underline-hover`, `ibis-link--underline-none`
255
+ **Sizes:** `ib-link--sm`, `ib-link--md`, `ib-link--lg`
256
+ **Underline:** `ib-link--underline-always`, `ib-link--underline-hover`, `ib-link--underline-none`
254
257
 
255
258
  ```html
256
- <a href="/help" class="ibis-link ibis-link--md ibis-link--underline-hover">
257
- <span class="ibis-link__content">Learn more</span>
259
+ <a href="/help" class="ib-link ib-link--md ib-link--underline-hover">
260
+ <span class="ib-link__content">Learn more</span>
258
261
  </a>
259
262
  ```
260
263
 
@@ -266,12 +269,12 @@ Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a
266
269
  @import "@ibis-design/css/components/chips.css";
267
270
  ```
268
271
 
269
- **Sizes:** `ibis-chips--sm`, `ibis-chips--md`, `ibis-chips--lg`
270
- **States:** `ibis-chips--selected`, `ibis-chips--disabled`, `ibis-chips--loading`, `ibis-chips--skeleton`
272
+ **Sizes:** `ib-chips--sm`, `ib-chips--md`, `ib-chips--lg`
273
+ **States:** `ib-chips--selected`, `ib-chips--disabled`, `ib-chips--loading`, `ib-chips--skeleton`
271
274
 
272
275
  ```html
273
- <button type="button" class="ibis-chips ibis-chips--md ibis-chips--selected" aria-pressed="true">
274
- <span class="ibis-chips__content">Selected filter</span>
276
+ <button type="button" class="ib-chips ib-chips--md ib-chips--selected" aria-pressed="true">
277
+ <span class="ib-chips__content">Selected filter</span>
275
278
  </button>
276
279
  ```
277
280
 
@@ -283,16 +286,16 @@ Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a
283
286
  @import "@ibis-design/css/components/banner.css";
284
287
  ```
285
288
 
286
- **Types:** `ibis-banner--success`, `ibis-banner--error`, `ibis-banner--default`
289
+ **Types:** `ib-banner--success`, `ib-banner--error`, `ib-banner--default`
287
290
 
288
291
  ```html
289
- <div class="ibis-banner ibis-banner--success" role="status">
290
- <div class="ibis-banner__icon">✓</div>
291
- <div class="ibis-banner__content">
292
- <div class="ibis-banner__title">Payment received</div>
293
- <div class="ibis-banner__message">Your transfer completed successfully.</div>
292
+ <div class="ib-banner ib-banner--success" role="status">
293
+ <div class="ib-banner__icon">✓</div>
294
+ <div class="ib-banner__content">
295
+ <div class="ib-banner__title">Payment received</div>
296
+ <div class="ib-banner__message">Your transfer completed successfully.</div>
294
297
  </div>
295
- <button type="button" class="ibis-banner__close" aria-label="Close">×</button>
298
+ <button type="button" class="ib-banner__close" aria-label="Close">×</button>
296
299
  </div>
297
300
  ```
298
301
 
@@ -304,14 +307,14 @@ Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a
304
307
  @import "@ibis-design/css/components/toaster.css";
305
308
  ```
306
309
 
307
- **Types:** `ibis-toaster--success`, `ibis-toaster--error`, `ibis-toaster--accent`, `ibis-toaster--default`
310
+ **Types:** `ib-toaster--success`, `ib-toaster--error`, `ib-toaster--accent`, `ib-toaster--default`
308
311
 
309
312
  ```html
310
- <div class="ibis-toaster ibis-toaster--accent" role="status">
311
- <div class="ibis-toaster__icon">!</div>
312
- <div class="ibis-toaster__content">
313
- <div class="ibis-toaster__title">Session expiring</div>
314
- <div class="ibis-toaster__message">Sign in again to continue.</div>
313
+ <div class="ib-toaster ib-toaster--accent" role="status">
314
+ <div class="ib-toaster__icon">!</div>
315
+ <div class="ib-toaster__content">
316
+ <div class="ib-toaster__title">Session expiring</div>
317
+ <div class="ib-toaster__message">Sign in again to continue.</div>
315
318
  </div>
316
319
  </div>
317
320
  ```
@@ -324,32 +327,32 @@ Textarea uses the same `.ibis-input` structure; import `textarea.css` and use a
324
327
  @import "@ibis-design/css/components/dropdown.css";
325
328
  ```
326
329
 
327
- Pair with your own JS for open/close. Example structure (add `ibis-dropdown--open` and toggle `hidden` on the menu):
330
+ Pair with your own JS for open/close. Example structure (add `ib-dropdown--open` and toggle `hidden` on the menu):
328
331
 
329
332
  ```html
330
- <div class="ibis-dropdown ibis-dropdown--open" role="combobox" aria-expanded="true">
331
- <button type="button" class="ibis-dropdown__trigger">
332
- <div class="ibis-input ibis-input--md">
333
- <label class="ibis-input__label">Country</label>
334
- <div class="ibis-input__wrapper">
335
- <div class="ibis-input__field-wrapper">
336
- <input type="text" class="ibis-input__field" value="United States" readonly />
333
+ <div class="ib-dropdown ib-dropdown--open" role="combobox" aria-expanded="true">
334
+ <button type="button" class="ib-dropdown__trigger">
335
+ <div class="ib-input ib-input--md">
336
+ <label class="ib-input__label">Country</label>
337
+ <div class="ib-input__wrapper">
338
+ <div class="ib-input__field-wrapper">
339
+ <input type="text" class="ib-input__field" value="United States" readonly />
337
340
  </div>
338
341
  </div>
339
342
  </div>
340
343
  </button>
341
- <ul role="listbox" class="ibis-dropdown__menu">
344
+ <ul role="listbox" class="ib-dropdown__menu">
342
345
  <li role="option" aria-selected="true">
343
- <button type="button" class="ibis-dropdown__item">United States</button>
346
+ <button type="button" class="ib-dropdown__item">United States</button>
344
347
  </li>
345
348
  <li role="option">
346
- <button type="button" class="ibis-dropdown__item">Canada</button>
349
+ <button type="button" class="ib-dropdown__item">Canada</button>
347
350
  </li>
348
351
  </ul>
349
352
  </div>
350
353
  ```
351
354
 
352
- For a full accessible select experience, prefer **@ibis-design/svelte** `Dropdown`, **@ibis-design/react** `Dropdown`, or build menu behavior on `.ibis-dropdown-button` below.
355
+ For a full accessible select experience, prefer **@ibis-design/svelte** `Dropdown`, **@ibis-design/react** `Dropdown`, or build menu behavior on `.ib-dropdown-button` below.
353
356
 
354
357
  ---
355
358
 
@@ -363,18 +366,18 @@ For a full accessible select experience, prefer **@ibis-design/svelte** `Dropdow
363
366
  Wrap a trigger and menu:
364
367
 
365
368
  ```html
366
- <div class="ibis-dropdown-button">
367
- <button type="button" class="ibis-button ibis-button--secondary ibis-button--md" aria-haspopup="menu" aria-expanded="false">
368
- <span class="ibis-button__content">Actions</span>
369
+ <div class="ib-dropdown-button">
370
+ <button type="button" class="ib-button ib-button--secondary ib-button--md" aria-haspopup="menu" aria-expanded="false">
371
+ <span class="ib-button__content">Actions</span>
369
372
  </button>
370
- <div class="ibis-dropdown-menu" role="menu">
371
- <button type="button" class="ibis-dropdown-menu__item" role="menuitem">Export</button>
372
- <button type="button" class="ibis-dropdown-menu__item" role="menuitem">Print</button>
373
+ <div class="ib-dropdown-menu" role="menu">
374
+ <button type="button" class="ib-dropdown-menu__item" role="menuitem">Export</button>
375
+ <button type="button" class="ib-dropdown-menu__item" role="menuitem">Print</button>
373
376
  </div>
374
377
  </div>
375
378
  ```
376
379
 
377
- Toggle visibility of `.ibis-dropdown-menu` with your framework or vanilla JS.
380
+ Toggle visibility of `.ib-dropdown-menu` with your framework or vanilla JS.
378
381
 
379
382
  ---
380
383
 
@@ -387,19 +390,19 @@ Toggle visibility of `.ibis-dropdown-menu` with your framework or vanilla JS.
387
390
  Radio-based tabs inside a group container:
388
391
 
389
392
  ```html
390
- <div class="ibis-pill-tabs" style="display:inline-flex;gap:4px;padding:4px;border-radius:9999px;background:var(--color-white);">
391
- <label class="ibis-pill-tab ibis-pill-tab--active">
392
- <input type="radio" name="view" value="overview" class="ibis-pill-tab__input" checked />
393
- <span class="ibis-pill-tab__content">Overview</span>
393
+ <div class="ib-pill-tabs" style="display:inline-flex;gap:4px;padding:4px;border-radius:9999px;background:var(--color-white);">
394
+ <label class="ib-pill-tab ib-pill-tab--active">
395
+ <input type="radio" name="view" value="overview" class="ib-pill-tab__input" checked />
396
+ <span class="ib-pill-tab__content">Overview</span>
394
397
  </label>
395
- <label class="ibis-pill-tab">
396
- <input type="radio" name="view" value="activity" class="ibis-pill-tab__input" />
397
- <span class="ibis-pill-tab__content">Activity</span>
398
+ <label class="ib-pill-tab">
399
+ <input type="radio" name="view" value="activity" class="ib-pill-tab__input" />
400
+ <span class="ib-pill-tab__content">Activity</span>
398
401
  </label>
399
402
  </div>
400
403
  ```
401
404
 
402
- Add class `ibis-pill-tab--active` on the selected label (or use Svelte `PillTabs` / `PillTab`).
405
+ Add class `ib-pill-tab--active` on the selected label (or use Svelte `PillTabs` / `PillTab`).
403
406
 
404
407
  ---
405
408
 
@@ -410,17 +413,17 @@ Add class `ibis-pill-tab--active` on the selected label (or use Svelte `PillTabs
410
413
  ```
411
414
 
412
415
  ```html
413
- <span class="ibis-tip-indicator" tabindex="0" role="button" aria-describedby="fee-tip">
416
+ <span class="ib-tip-indicator" tabindex="0" role="button" aria-describedby="fee-tip">
414
417
  <!-- icon SVG optional; see @ibis-design/svelte TipIndicator -->
415
- <span id="fee-tip" class="ibis-tip ibis-tip--top ibis-tip--width-240" role="tooltip">
416
- <span class="ibis-tip__text">Fees may apply for international transfers.</span>
417
- <span class="ibis-tip__arrow"></span>
418
+ <span id="fee-tip" class="ib-tip ib-tip--top ib-tip--width-240" role="tooltip">
419
+ <span class="ib-tip__text">Fees may apply for international transfers.</span>
420
+ <span class="ib-tip__arrow"></span>
418
421
  </span>
419
422
  </span>
420
423
  ```
421
424
 
422
- **Tooltip position:** `ibis-tip--top`, `ibis-tip--bottom`, `ibis-tip--left`, `ibis-tip--right`
423
- **Width:** `ibis-tip--width-auto`, `ibis-tip--width-240`, `ibis-tip--width-360`
425
+ **Tooltip position:** `ib-tip--top`, `ib-tip--bottom`, `ib-tip--left`, `ib-tip--right`
426
+ **Width:** `ib-tip--width-auto`, `ib-tip--width-240`, `ib-tip--width-360`
424
427
 
425
428
  ---
426
429
 
@@ -438,7 +441,13 @@ module.exports = {
438
441
  @import "@ibis-design/css";
439
442
  ```
440
443
 
441
- Dark-mode utilities respond to `[data-color-mode="dark"]`. Set `data-brand` and `data-color-mode` on `<html>` (or use `setTheme`).
444
+ Dark-mode utilities respond to `[data-color-mode="dark"]`. Set `data-brand` and `data-color-mode` on `<html>` (or use `setTheme` / `toggleDark`).
445
+
446
+ | Helper | Use when |
447
+ |--------|----------|
448
+ | `setTheme({ brand, colorMode })` | Set brand and/or mode explicitly |
449
+ | `getTheme()` | Read `{ brand, colorMode, themeId }` from `<html>` |
450
+ | `toggleDark()` | Flip light ↔ dark with no arguments; preserves brand; returns `{ brand, colorMode, themeId }` |
442
451
 
443
452
  ---
444
453
 
package/dist/components/appLayout.css CHANGED
@@ -1,4 +1,4 @@
1
- .ibis-app-layout {
1
+ .ib-app-layout {
2
2
  min-height: 100vh;
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -6,31 +6,31 @@
6
6
  font-family: var(--font-family-sans);
7
7
  }
8
8
 
9
- .ibis-app-layout__header {
9
+ .ib-app-layout__header {
10
10
  flex: 0 0 auto;
11
11
  z-index: var(--z-index-sticky);
12
12
  }
13
13
 
14
- .ibis-app-layout__body {
14
+ .ib-app-layout__body {
15
15
  flex: 1 1 auto;
16
16
  display: flex;
17
17
  min-height: 0;
18
18
  }
19
19
 
20
- .ibis-app-layout__sidebar {
20
+ .ib-app-layout__sidebar {
21
21
  flex: 0 0 auto;
22
22
  width: 16rem;
23
23
  background-color: var(--color-surface-subtle);
24
24
  border-right: var(--border-width-thin) solid var(--border-color-default);
25
25
  }
26
26
 
27
- .ibis-app-layout__main {
27
+ .ib-app-layout__main {
28
28
  flex: 1 1 auto;
29
29
  overflow: auto;
30
30
  padding: var(--spacing-6);
31
31
  }
32
32
 
33
- .ibis-app-layout__footer {
33
+ .ib-app-layout__footer {
34
34
  flex: 0 0 auto;
35
35
  padding: var(--spacing-4);
36
36
  border-top: var(--border-width-thin) solid var(--border-color-default);