@warp-ds/elements 2.10.0-next.17 → 2.10.0-next.19

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 (104) hide show
  1. package/dist/custom-elements.json +285 -159
  2. package/dist/docs/affix/affix.md +117 -0
  3. package/dist/docs/affix/styling.md +107 -0
  4. package/dist/docs/breadcrumb-item/api.md +27 -0
  5. package/dist/docs/breadcrumb-item/breadcrumb-item.md +34 -0
  6. package/dist/docs/breadcrumbs/accessibility.md +8 -18
  7. package/dist/docs/breadcrumbs/breadcrumbs.md +120 -34
  8. package/dist/docs/breadcrumbs/examples.md +8 -8
  9. package/dist/docs/breadcrumbs/styling.md +96 -0
  10. package/dist/docs/breadcrumbs/usage.md +8 -8
  11. package/dist/docs/index.md +2 -1
  12. package/dist/docs/select/select.md +91 -0
  13. package/dist/docs/select/styling.md +91 -0
  14. package/dist/docs/textarea/styling.md +91 -0
  15. package/dist/docs/textarea/textarea.md +91 -0
  16. package/dist/docs/textfield/api.md +8 -0
  17. package/dist/docs/textfield/styling.md +95 -0
  18. package/dist/docs/textfield/textfield.md +103 -0
  19. package/dist/index.d.ts +175 -64
  20. package/dist/packages/affix/affix-styles.d.ts +8 -0
  21. package/dist/packages/affix/affix-styles.js +108 -0
  22. package/dist/packages/affix/affix.d.ts +11 -8
  23. package/dist/packages/affix/affix.js +118 -17
  24. package/dist/packages/affix/affix.js.map +4 -4
  25. package/dist/packages/affix/affix.react.stories.d.ts +1 -1
  26. package/dist/packages/affix/react.d.ts +1 -1
  27. package/dist/packages/alert/alert.js.map +1 -1
  28. package/dist/packages/attention/attention.js.map +1 -1
  29. package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +29 -0
  30. package/dist/packages/breadcrumb-item/breadcrumb-item.js +2529 -0
  31. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
  32. package/dist/packages/breadcrumb-item/react.d.ts +2 -0
  33. package/dist/packages/breadcrumb-item/react.js +11 -0
  34. package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
  35. package/dist/packages/breadcrumb-item/styles.js +81 -0
  36. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +2 -0
  37. package/dist/packages/breadcrumbs/breadcrumbs.js +11 -13
  38. package/dist/packages/breadcrumbs/breadcrumbs.js.map +3 -3
  39. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +11 -10
  40. package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +4 -5
  41. package/dist/packages/breadcrumbs/breadcrumbs.stories.js +14 -11
  42. package/dist/packages/button/button.react.stories.d.ts +2 -2
  43. package/dist/packages/button/react.d.ts +1 -1
  44. package/dist/packages/checkbox-group/react.d.ts +1 -1
  45. package/dist/packages/combobox/combobox.react.stories.d.ts +2 -2
  46. package/dist/packages/combobox/react.d.ts +1 -1
  47. package/dist/packages/datepicker/datepicker.js.map +1 -1
  48. package/dist/packages/datepicker/datepicker.react.stories.d.ts +2 -2
  49. package/dist/packages/datepicker/react.d.ts +1 -1
  50. package/dist/packages/expandable/expandable.js.map +1 -1
  51. package/dist/packages/icon/icon.js +2 -2
  52. package/dist/packages/icon/icon.js.map +1 -1
  53. package/dist/packages/icon/icon.react.stories.d.ts +2 -1
  54. package/dist/packages/icon/icon.react.stories.js +1 -1
  55. package/dist/packages/modal-header/modal-header.js.map +1 -1
  56. package/dist/packages/pagination/pagination.js.map +1 -1
  57. package/dist/packages/pagination/pagination.react.stories.d.ts +2 -2
  58. package/dist/packages/pagination/react.d.ts +1 -1
  59. package/dist/packages/pill/pill.js.map +1 -1
  60. package/dist/packages/radio-group/react.d.ts +1 -1
  61. package/dist/packages/select/input-styles.d.ts +11 -0
  62. package/dist/packages/select/input-styles.js +88 -0
  63. package/dist/packages/select/react.d.ts +1 -1
  64. package/dist/packages/select/select.js +96 -19
  65. package/dist/packages/select/select.js.map +4 -4
  66. package/dist/packages/select/select.react.stories.d.ts +2 -2
  67. package/dist/packages/slider/react.d.ts +1 -1
  68. package/dist/packages/slider/slider.react.stories.d.ts +1 -1
  69. package/dist/packages/slider-thumb/react.d.ts +1 -1
  70. package/dist/packages/snackbar/snackbar.d.ts +2 -2
  71. package/dist/packages/snackbar/snackbar.js +1 -1
  72. package/dist/packages/snackbar/snackbar.js.map +2 -2
  73. package/dist/packages/step/step.js.map +1 -1
  74. package/dist/packages/textarea/input-styles.d.ts +11 -0
  75. package/dist/packages/textarea/input-styles.js +88 -0
  76. package/dist/packages/textarea/react.d.ts +1 -1
  77. package/dist/packages/textarea/textarea.js +99 -20
  78. package/dist/packages/textarea/textarea.js.map +4 -4
  79. package/dist/packages/textarea/textarea.react.stories.d.ts +2 -2
  80. package/dist/packages/textfield/input-styles.d.ts +11 -0
  81. package/dist/packages/textfield/input-styles.js +88 -0
  82. package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
  83. package/dist/packages/textfield/locales/da/messages.mjs +1 -0
  84. package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
  85. package/dist/packages/textfield/locales/en/messages.mjs +1 -0
  86. package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
  87. package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
  88. package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
  89. package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
  90. package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
  91. package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
  92. package/dist/packages/textfield/react.d.ts +1 -1
  93. package/dist/packages/textfield/textfield.d.ts +11 -1
  94. package/dist/packages/textfield/textfield.js +111 -24
  95. package/dist/packages/textfield/textfield.js.map +4 -4
  96. package/dist/packages/textfield/textfield.react.stories.d.ts +2 -2
  97. package/dist/packages/toast/styles.js +1 -1
  98. package/dist/packages/toast/toast.js +7 -7
  99. package/dist/packages/toast/toast.js.map +2 -2
  100. package/dist/packages/toast-container/toast-container.js +8 -8
  101. package/dist/packages/toast-container/toast-container.js.map +3 -3
  102. package/dist/web-types.json +96 -50
  103. package/eik/index.js +20 -20
  104. package/package.json +8 -1
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { WarpIcon, WIcon } from "./packages/icon/icon.ts";
2
1
  import type { WarpTextField } from "./packages/textfield/textfield.ts";
2
+ import type { WarpIcon, WIcon } from "./packages/icon/icon.ts";
3
3
  import type { WarpAffix } from "./packages/affix/affix.ts";
4
4
  import type { WarpAlert } from "./packages/alert/alert.ts";
5
5
  import type { WarpLink } from "./packages/link/link.ts";
@@ -8,6 +8,7 @@ import type { WarpAttention } from "./packages/attention/attention.ts";
8
8
  import type { WarpBadge } from "./packages/badge/badge.ts";
9
9
  import type { WarpBox } from "./packages/box/box.ts";
10
10
  import type { WarpBreadcrumbs } from "./packages/breadcrumbs/breadcrumbs.ts";
11
+ import type { WarpBreadcrumbItem } from "./packages/breadcrumb-item/breadcrumb-item.ts";
11
12
  import type { WarpCard } from "./packages/card/card.ts";
12
13
  import type { WarpCheckbox, WCheckbox } from "./packages/checkbox/checkbox.ts";
13
14
  import type {
@@ -236,33 +237,6 @@ type BaseEvents = {
236
237
  onPaste?: (event: ClipboardEvent) => void;
237
238
  };
238
239
 
239
- export type WarpIconProps = {
240
- /** Icon filename (without .svg) */
241
- name?: WarpIcon["name"];
242
- /** Size: small, medium, large or pixel value (e.g. "32px"). */
243
- size?: WarpIcon["size"];
244
- /** Locale used for `<title>` text.
245
-
246
- Reads the `lang` attribute from `<html>`, falls back to 'en'. */
247
- locale?: WarpIcon["locale"];
248
- };
249
-
250
- export type WarpIconSolidJsProps = {
251
- /** Icon filename (without .svg) */
252
- "prop:name"?: WarpIcon["name"];
253
- /** Size: small, medium, large or pixel value (e.g. "32px"). */
254
- "prop:size"?: WarpIcon["size"];
255
- /** Locale used for `<title>` text.
256
-
257
- Reads the `lang` attribute from `<html>`, falls back to 'en'. */
258
- "prop:locale"?: WarpIcon["locale"];
259
-
260
- /** Set the innerHTML of the element */
261
- innerHTML?: string;
262
- /** Set the textContent of the element */
263
- textContent?: string | number;
264
- };
265
-
266
240
  export type WarpTextFieldProps = {
267
241
  /** Keep in mind that using disabled in its current form is an anti-pattern.
268
242
 
@@ -280,6 +254,8 @@ or on its own to show a help text. */
280
254
  /** Use in combination with `invalid` to show as a validation error message,
281
255
  or on its own to show a help text. */
282
256
  helpText?: WarpTextField["helpText"];
257
+ /** Whether to show the optional indicator after the label. */
258
+ optional?: WarpTextField["optional"];
283
259
  /** Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs. */
284
260
  size?: WarpTextField["size"];
285
261
  /** Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). */
@@ -349,6 +325,8 @@ or on its own to show a help text. */
349
325
  /** Use in combination with `invalid` to show as a validation error message,
350
326
  or on its own to show a help text. */
351
327
  "prop:helpText"?: WarpTextField["helpText"];
328
+ /** Whether to show the optional indicator after the label. */
329
+ "prop:optional"?: WarpTextField["optional"];
352
330
  /** Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs. */
353
331
  "prop:size"?: WarpTextField["size"];
354
332
  /** Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength). */
@@ -406,6 +384,33 @@ similar to the accessible input [masking example from Filament Group](https://fi
406
384
  textContent?: string | number;
407
385
  };
408
386
 
387
+ export type WarpIconProps = {
388
+ /** Icon filename (without .svg) */
389
+ name?: WarpIcon["name"];
390
+ /** Size: small, medium, large or pixel value (e.g. "32px"). */
391
+ size?: WarpIcon["size"];
392
+ /** Locale used for `<title>` text.
393
+
394
+ Reads the `lang` attribute from `<html>`, falls back to 'en'. */
395
+ locale?: WarpIcon["locale"];
396
+ };
397
+
398
+ export type WarpIconSolidJsProps = {
399
+ /** Icon filename (without .svg) */
400
+ "prop:name"?: WarpIcon["name"];
401
+ /** Size: small, medium, large or pixel value (e.g. "32px"). */
402
+ "prop:size"?: WarpIcon["size"];
403
+ /** Locale used for `<title>` text.
404
+
405
+ Reads the `lang` attribute from `<html>`, falls back to 'en'. */
406
+ "prop:locale"?: WarpIcon["locale"];
407
+
408
+ /** Set the innerHTML of the element */
409
+ innerHTML?: string;
410
+ /** Set the textContent of the element */
411
+ textContent?: string | number;
412
+ };
413
+
409
414
  export type WarpAffixProps = {
410
415
  /** */
411
416
  "aria-label"?: WarpAffix["ariaLabel"];
@@ -856,6 +861,35 @@ Defaults to the localized "You are here" label. Set `aria-label` when the defaul
856
861
  textContent?: string | number;
857
862
  };
858
863
 
864
+ export type WarpBreadcrumbItemProps = {
865
+ /** Marks this item as the current page.
866
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
867
+ "current-page"?: WarpBreadcrumbItem["currentPage"];
868
+ /** Marks this item as the current page.
869
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
870
+ currentPage?: WarpBreadcrumbItem["currentPage"];
871
+ /** URL for linked breadcrumb items.
872
+ When omitted, the item renders as non-focusable text. */
873
+ href?: WarpBreadcrumbItem["href"];
874
+ };
875
+
876
+ export type WarpBreadcrumbItemSolidJsProps = {
877
+ /** Marks this item as the current page.
878
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
879
+ "bool:current-page"?: WarpBreadcrumbItem["currentPage"];
880
+ /** Marks this item as the current page.
881
+ Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator. */
882
+ "prop:currentPage"?: WarpBreadcrumbItem["currentPage"];
883
+ /** URL for linked breadcrumb items.
884
+ When omitted, the item renders as non-focusable text. */
885
+ "prop:href"?: WarpBreadcrumbItem["href"];
886
+
887
+ /** Set the innerHTML of the element */
888
+ innerHTML?: string;
889
+ /** Set the textContent of the element */
890
+ textContent?: string | number;
891
+ };
892
+
859
893
  export type WarpCardProps = {
860
894
  /** Whether the card is visually selected.
861
895
 
@@ -2282,21 +2316,6 @@ Placeholder text should not be used as a substitute for labeling the element wit
2282
2316
  };
2283
2317
 
2284
2318
  export type CustomElements = {
2285
- /**
2286
- *
2287
- *
2288
- * ## Attributes & Properties
2289
- *
2290
- * Component attributes and properties that can be applied to the element or by using JavaScript.
2291
- *
2292
- * - `name`: Icon filename (without .svg)
2293
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
2294
- * - `locale`: Locale used for `<title>` text.
2295
- *
2296
- * Reads the `lang` attribute from `<html>`, falls back to 'en'.
2297
- */
2298
- "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
2299
-
2300
2319
  /**
2301
2320
  * A single-line input component used for entering and editing textual or numeric data.
2302
2321
  *
@@ -2313,6 +2332,7 @@ export type CustomElements = {
2313
2332
  * - `label`: Either a `label` or an `aria-label` must be provided.
2314
2333
  * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
2315
2334
  * or on its own to show a help text.
2335
+ * - `optional`: Whether to show the optional indicator after the label.
2316
2336
  * - `size`: Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.
2317
2337
  * - `max`: Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
2318
2338
  * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
@@ -2345,7 +2365,7 @@ export type CustomElements = {
2345
2365
  * Areas where markup can be added to the component.
2346
2366
  *
2347
2367
  * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
2348
- * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
2368
+ * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
2349
2369
  *
2350
2370
  * ## Methods
2351
2371
  *
@@ -2360,9 +2380,34 @@ export type CustomElements = {
2360
2380
  WarpTextFieldProps & BaseProps<WarpTextField> & BaseEvents
2361
2381
  >;
2362
2382
 
2383
+ /**
2384
+ *
2385
+ *
2386
+ * ## Attributes & Properties
2387
+ *
2388
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
2389
+ *
2390
+ * - `name`: Icon filename (without .svg)
2391
+ * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
2392
+ * - `locale`: Locale used for `<title>` text.
2393
+ *
2394
+ * Reads the `lang` attribute from `<html>`, falls back to 'en'.
2395
+ */
2396
+ "w-icon": Partial<WarpIconProps & BaseProps<WarpIcon> & BaseEvents>;
2397
+
2363
2398
  /**
2364
2399
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
2365
2400
  *
2401
+ * ## Accessibility Note
2402
+ * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
2403
+ * cannot reference elements across shadow boundaries. This means:
2404
+ * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
2405
+ * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
2406
+ * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
2407
+ *
2408
+ * For non-interactive labels (e.g., currency symbols), consider including the information in the
2409
+ * main label or placeholder instead of relying on ARIA to announce affix content.
2410
+ *
2366
2411
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
2367
2412
  *
2368
2413
  * ## Attributes & Properties
@@ -2588,6 +2633,31 @@ export type CustomElements = {
2588
2633
  WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents
2589
2634
  >;
2590
2635
 
2636
+ /**
2637
+ * Represents one item in a `w-breadcrumbs` trail.
2638
+ * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
2639
+ *
2640
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
2641
+ *
2642
+ * ## Attributes & Properties
2643
+ *
2644
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
2645
+ *
2646
+ * - `current-page`/`currentPage`: Marks this item as the current page.
2647
+ * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
2648
+ * - `href`: URL for linked breadcrumb items.
2649
+ * When omitted, the item renders as non-focusable text.
2650
+ *
2651
+ * ## Slots
2652
+ *
2653
+ * Areas where markup can be added to the component.
2654
+ *
2655
+ * - `(default)`: The breadcrumb label content.
2656
+ */
2657
+ "w-breadcrumb-item": Partial<
2658
+ WarpBreadcrumbItemProps & BaseProps<WarpBreadcrumbItem> & BaseEvents
2659
+ >;
2660
+
2591
2661
  /**
2592
2662
  * Card is a layout component used for separating content areas on a page.
2593
2663
  *
@@ -3447,8 +3517,8 @@ type ReactCustomElementProps<T extends HTMLElement, Props> = Omit<
3447
3517
  Props;
3448
3518
 
3449
3519
  type CustomElementInstances = {
3450
- "w-icon": WarpIcon;
3451
3520
  "w-textfield": WarpTextField;
3521
+ "w-icon": WarpIcon;
3452
3522
  "w-affix": WarpAffix;
3453
3523
  "w-alert": WarpAlert;
3454
3524
  "w-link": WarpLink;
@@ -3457,6 +3527,7 @@ type CustomElementInstances = {
3457
3527
  "w-badge": WarpBadge;
3458
3528
  "w-box": WarpBox;
3459
3529
  "w-breadcrumbs": WarpBreadcrumbs;
3530
+ "w-breadcrumb-item": WarpBreadcrumbItem;
3460
3531
  "w-card": WarpCard;
3461
3532
  "w-checkbox": WarpCheckbox;
3462
3533
  "w-checkbox-group": WarpCheckboxGroup;
@@ -3486,8 +3557,8 @@ type CustomElementInstances = {
3486
3557
  };
3487
3558
 
3488
3559
  type CustomElementComponentProps = {
3489
- "w-icon": WarpIconProps;
3490
3560
  "w-textfield": WarpTextFieldProps;
3561
+ "w-icon": WarpIconProps;
3491
3562
  "w-affix": WarpAffixProps;
3492
3563
  "w-alert": WarpAlertProps;
3493
3564
  "w-link": WarpLinkProps;
@@ -3496,6 +3567,7 @@ type CustomElementComponentProps = {
3496
3567
  "w-badge": WarpBadgeProps;
3497
3568
  "w-box": WarpBoxProps;
3498
3569
  "w-breadcrumbs": WarpBreadcrumbsProps;
3570
+ "w-breadcrumb-item": WarpBreadcrumbItemProps;
3499
3571
  "w-card": WarpCardProps;
3500
3572
  "w-checkbox": WarpCheckboxProps;
3501
3573
  "w-checkbox-group": WarpCheckboxGroupProps;
@@ -3531,23 +3603,6 @@ export type ReactCustomElements = {
3531
3603
  };
3532
3604
 
3533
3605
  export type CustomElementsSolidJs = {
3534
- /**
3535
- *
3536
- *
3537
- * ## Attributes & Properties
3538
- *
3539
- * Component attributes and properties that can be applied to the element or by using JavaScript.
3540
- *
3541
- * - `name`: Icon filename (without .svg)
3542
- * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
3543
- * - `locale`: Locale used for `<title>` text.
3544
- *
3545
- * Reads the `lang` attribute from `<html>`, falls back to 'en'.
3546
- */
3547
- "w-icon": Partial<
3548
- WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
3549
- >;
3550
-
3551
3606
  /**
3552
3607
  * A single-line input component used for entering and editing textual or numeric data.
3553
3608
  *
@@ -3564,6 +3619,7 @@ export type CustomElementsSolidJs = {
3564
3619
  * - `label`: Either a `label` or an `aria-label` must be provided.
3565
3620
  * - `help-text`/`helpText`: Use in combination with `invalid` to show as a validation error message,
3566
3621
  * or on its own to show a help text.
3622
+ * - `optional`: Whether to show the optional indicator after the label.
3567
3623
  * - `size`: Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.
3568
3624
  * - `max`: Use with `type="number"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).
3569
3625
  * - `min`: Use with `type="number"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).
@@ -3596,7 +3652,7 @@ export type CustomElementsSolidJs = {
3596
3652
  * Areas where markup can be added to the component.
3597
3653
  *
3598
3654
  * - `suffix`: Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).
3599
- * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon.
3655
+ * - `prefix`: Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.
3600
3656
  *
3601
3657
  * ## Methods
3602
3658
  *
@@ -3614,9 +3670,36 @@ export type CustomElementsSolidJs = {
3614
3670
  BaseEvents
3615
3671
  >;
3616
3672
 
3673
+ /**
3674
+ *
3675
+ *
3676
+ * ## Attributes & Properties
3677
+ *
3678
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
3679
+ *
3680
+ * - `name`: Icon filename (without .svg)
3681
+ * - `size`: Size: small, medium, large or pixel value (e.g. "32px").
3682
+ * - `locale`: Locale used for `<title>` text.
3683
+ *
3684
+ * Reads the `lang` attribute from `<html>`, falls back to 'en'.
3685
+ */
3686
+ "w-icon": Partial<
3687
+ WarpIconProps & WarpIconSolidJsProps & BaseProps<WarpIcon> & BaseEvents
3688
+ >;
3689
+
3617
3690
  /**
3618
3691
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
3619
3692
  *
3693
+ * ## Accessibility Note
3694
+ * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
3695
+ * cannot reference elements across shadow boundaries. This means:
3696
+ * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
3697
+ * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
3698
+ * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
3699
+ *
3700
+ * For non-interactive labels (e.g., currency symbols), consider including the information in the
3701
+ * main label or placeholder instead of relying on ARIA to announce affix content.
3702
+ *
3620
3703
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
3621
3704
  *
3622
3705
  * ## Attributes & Properties
@@ -3863,6 +3946,34 @@ export type CustomElementsSolidJs = {
3863
3946
  BaseEvents
3864
3947
  >;
3865
3948
 
3949
+ /**
3950
+ * Represents one item in a `w-breadcrumbs` trail.
3951
+ * Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.
3952
+ *
3953
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
3954
+ *
3955
+ * ## Attributes & Properties
3956
+ *
3957
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
3958
+ *
3959
+ * - `current-page`/`currentPage`: Marks this item as the current page.
3960
+ * Use this on the final breadcrumb item so it exposes `aria-current="page"` and does not render a trailing separator.
3961
+ * - `href`: URL for linked breadcrumb items.
3962
+ * When omitted, the item renders as non-focusable text.
3963
+ *
3964
+ * ## Slots
3965
+ *
3966
+ * Areas where markup can be added to the component.
3967
+ *
3968
+ * - `(default)`: The breadcrumb label content.
3969
+ */
3970
+ "w-breadcrumb-item": Partial<
3971
+ WarpBreadcrumbItemProps &
3972
+ WarpBreadcrumbItemSolidJsProps &
3973
+ BaseProps<WarpBreadcrumbItem> &
3974
+ BaseEvents
3975
+ >;
3976
+
3866
3977
  /**
3867
3978
  * Card is a layout component used for separating content areas on a page.
3868
3979
  *
package/dist/packages/affix/affix-styles.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Affix component styles using the internal token pattern with a public styling API.
3
+ *
4
+ * Public API tokens (customizable):
5
+ * - Wrapper: --w-c-affix-*
6
+ * - Label: --w-c-affix-label-*
7
+ */
8
+ export declare const affixStyles: import("lit").CSSResult;
package/dist/packages/affix/affix-styles.js ADDED
@@ -0,0 +1,108 @@
1
+ import { css } from "lit";
2
+ /**
3
+ * Affix component styles using the internal token pattern with a public styling API.
4
+ *
5
+ * Public API tokens (customizable):
6
+ * - Wrapper: --w-c-affix-*
7
+ * - Label: --w-c-affix-label-*
8
+ */
9
+ export const affixStyles = css `
10
+ /* Wrapper component tokens with semantic fallbacks */
11
+ :host {
12
+ /* Internal tokens - not part of public API */
13
+ --_wrapper-bg: var(--w-c-affix-wrapper-bg, transparent);
14
+ --_wrapper-border-radius: var(--w-c-affix-wrapper-border-radius, 0.4rem);
15
+ --_wrapper-padding-left: var(--w-c-affix-wrapper-padding-left, 1.2rem);
16
+ --_wrapper-padding-right: var(--w-c-affix-wrapper-padding-right, 1.2rem);
17
+ --_wrapper-width-with-label: var(
18
+ --w-c-affix-wrapper-width-with-label,
19
+ max-content
20
+ );
21
+ --_wrapper-width-with-icon: var(--w-c-affix-wrapper-width-with-icon, 4rem);
22
+
23
+ /* Label tokens */
24
+ --_label-color: var(--w-c-affix-label-color, var(--w-s-color-text));
25
+ --_label-font-size: var(--w-c-affix-label-font-size, var(--w-font-size-xs));
26
+ --_label-line-height: var(
27
+ --w-c-affix-label-line-height,
28
+ var(--w-line-height-xs)
29
+ );
30
+ --_label-font-weight: var(--w-c-affix-label-font-weight, 700);
31
+ --_label-cursor: var(--w-c-affix-label-cursor, default);
32
+ }
33
+
34
+ /* Base wrapper styles (applied to all variants) */
35
+ [part="wrapper"] {
36
+ position: absolute;
37
+ top: 0;
38
+ bottom: 0;
39
+ display: flex;
40
+ justify-content: center;
41
+ align-items: center;
42
+ background-color: var(--_wrapper-bg);
43
+ border-radius: var(--_wrapper-border-radius);
44
+ -webkit-font-smoothing: antialiased;
45
+ -moz-osx-font-smoothing: grayscale;
46
+ }
47
+
48
+ /* Prefix positioning */
49
+ :host([slot="prefix"]) [part="wrapper"] {
50
+ left: 0;
51
+ }
52
+
53
+ /* Suffix positioning */
54
+ :host([slot="suffix"]) [part="wrapper"] {
55
+ right: 0;
56
+ }
57
+
58
+ /* Width variants */
59
+ [part="wrapper"].has-label {
60
+ width: var(--_wrapper-width-with-label);
61
+ }
62
+
63
+ :host([slot="prefix"]) [part="wrapper"].has-label {
64
+ padding-left: var(--_wrapper-padding-left);
65
+ }
66
+
67
+ :host([slot="suffix"]) [part="wrapper"].has-label {
68
+ padding-right: var(--_wrapper-padding-right);
69
+ }
70
+
71
+ [part="wrapper"].has-icon {
72
+ width: var(--_wrapper-width-with-icon);
73
+ }
74
+
75
+ /* Label styling */
76
+ [part="label"] {
77
+ display: block;
78
+ position: relative;
79
+ font-size: var(--_label-font-size);
80
+ line-height: var(--_label-line-height);
81
+ font-weight: var(--_label-font-weight);
82
+ color: var(--_label-color);
83
+ cursor: var(--_label-cursor);
84
+ padding-bottom: 0;
85
+ }
86
+
87
+ /* Button wrapper for interactive variants */
88
+ button[part="wrapper"] {
89
+ border: none;
90
+ outline: none;
91
+ cursor: pointer;
92
+ }
93
+
94
+ /* Focus styles for interactive variants */
95
+ button[part="wrapper"]:focus {
96
+ outline: 2px solid var(--w-s-color-border-focus);
97
+ outline-offset: var(--w-outline-offset, -2px);
98
+ }
99
+
100
+ button[part="wrapper"]:focus-visible {
101
+ outline: 2px solid var(--w-s-color-border-focus);
102
+ outline-offset: var(--w-outline-offset, -2px);
103
+ }
104
+
105
+ button[part="wrapper"]:not(:focus-visible) {
106
+ outline: none;
107
+ }
108
+ `;
package/dist/packages/affix/affix.d.ts CHANGED
@@ -4,6 +4,16 @@ declare const WarpAffix_base: import("@open-wc/form-control").Constructor<import
4
4
  /**
5
5
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
6
6
  *
7
+ * ## Accessibility Note
8
+ * Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
9
+ * cannot reference elements across shadow boundaries. This means:
10
+ * - Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
11
+ * - Interactive affixes (buttons) must have their own `aria-label` (already implemented)
12
+ * - Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
13
+ *
14
+ * For non-interactive labels (e.g., currency symbols), consider including the information in the
15
+ * main label or placeholder instead of relying on ARIA to announce affix content.
16
+ *
7
17
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
8
18
  */
9
19
  declare class WarpAffix extends WarpAffix_base {
@@ -40,14 +50,7 @@ declare class WarpAffix extends WarpAffix_base {
40
50
  icon: string | null;
41
51
  static styles: import("lit").CSSResult[];
42
52
  /** @internal */
43
- get _classBase(): {
44
- wrapper: string;
45
- wrapperWithLabel: string;
46
- wrapperWithIcon: string;
47
- label: string;
48
- };
49
- /** @internal */
50
- get _classes(): string;
53
+ get _wrapperClasses(): string;
51
54
  /** @internal */
52
55
  resetContainingTextField(e: Event): void;
53
56
  /** @internal */