npm - @warp-ds/elements - Versions diffs - 2.10.0-next.17 → 2.10.0-next.19 - Mend

@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

package/dist/custom-elements.json +285 -159
package/dist/docs/affix/affix.md +117 -0
package/dist/docs/affix/styling.md +107 -0
package/dist/docs/breadcrumb-item/api.md +27 -0
package/dist/docs/breadcrumb-item/breadcrumb-item.md +34 -0
package/dist/docs/breadcrumbs/accessibility.md +8 -18
package/dist/docs/breadcrumbs/breadcrumbs.md +120 -34
package/dist/docs/breadcrumbs/examples.md +8 -8
package/dist/docs/breadcrumbs/styling.md +96 -0
package/dist/docs/breadcrumbs/usage.md +8 -8
package/dist/docs/index.md +2 -1
package/dist/docs/select/select.md +91 -0
package/dist/docs/select/styling.md +91 -0
package/dist/docs/textarea/styling.md +91 -0
package/dist/docs/textarea/textarea.md +91 -0
package/dist/docs/textfield/api.md +8 -0
package/dist/docs/textfield/styling.md +95 -0
package/dist/docs/textfield/textfield.md +103 -0
package/dist/index.d.ts +175 -64
package/dist/packages/affix/affix-styles.d.ts +8 -0
package/dist/packages/affix/affix-styles.js +108 -0
package/dist/packages/affix/affix.d.ts +11 -8
package/dist/packages/affix/affix.js +118 -17
package/dist/packages/affix/affix.js.map +4 -4
package/dist/packages/affix/affix.react.stories.d.ts +1 -1
package/dist/packages/affix/react.d.ts +1 -1
package/dist/packages/alert/alert.js.map +1 -1
package/dist/packages/attention/attention.js.map +1 -1
package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +29 -0
package/dist/packages/breadcrumb-item/breadcrumb-item.js +2529 -0
package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
package/dist/packages/breadcrumb-item/react.d.ts +2 -0
package/dist/packages/breadcrumb-item/react.js +11 -0
package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
package/dist/packages/breadcrumb-item/styles.js +81 -0
package/dist/packages/breadcrumbs/breadcrumbs.d.ts +2 -0
package/dist/packages/breadcrumbs/breadcrumbs.js +11 -13
package/dist/packages/breadcrumbs/breadcrumbs.js.map +3 -3
package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +11 -10
package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +4 -5
package/dist/packages/breadcrumbs/breadcrumbs.stories.js +14 -11
package/dist/packages/button/button.react.stories.d.ts +2 -2
package/dist/packages/button/react.d.ts +1 -1
package/dist/packages/checkbox-group/react.d.ts +1 -1
package/dist/packages/combobox/combobox.react.stories.d.ts +2 -2
package/dist/packages/combobox/react.d.ts +1 -1
package/dist/packages/datepicker/datepicker.js.map +1 -1
package/dist/packages/datepicker/datepicker.react.stories.d.ts +2 -2
package/dist/packages/datepicker/react.d.ts +1 -1
package/dist/packages/expandable/expandable.js.map +1 -1
package/dist/packages/icon/icon.js +2 -2
package/dist/packages/icon/icon.js.map +1 -1
package/dist/packages/icon/icon.react.stories.d.ts +2 -1
package/dist/packages/icon/icon.react.stories.js +1 -1
package/dist/packages/modal-header/modal-header.js.map +1 -1
package/dist/packages/pagination/pagination.js.map +1 -1
package/dist/packages/pagination/pagination.react.stories.d.ts +2 -2
package/dist/packages/pagination/react.d.ts +1 -1
package/dist/packages/pill/pill.js.map +1 -1
package/dist/packages/radio-group/react.d.ts +1 -1
package/dist/packages/select/input-styles.d.ts +11 -0
package/dist/packages/select/input-styles.js +88 -0
package/dist/packages/select/react.d.ts +1 -1
package/dist/packages/select/select.js +96 -19
package/dist/packages/select/select.js.map +4 -4
package/dist/packages/select/select.react.stories.d.ts +2 -2
package/dist/packages/slider/react.d.ts +1 -1
package/dist/packages/slider/slider.react.stories.d.ts +1 -1
package/dist/packages/slider-thumb/react.d.ts +1 -1
package/dist/packages/snackbar/snackbar.d.ts +2 -2
package/dist/packages/snackbar/snackbar.js +1 -1
package/dist/packages/snackbar/snackbar.js.map +2 -2
package/dist/packages/step/step.js.map +1 -1
package/dist/packages/textarea/input-styles.d.ts +11 -0
package/dist/packages/textarea/input-styles.js +88 -0
package/dist/packages/textarea/react.d.ts +1 -1
package/dist/packages/textarea/textarea.js +99 -20
package/dist/packages/textarea/textarea.js.map +4 -4
package/dist/packages/textarea/textarea.react.stories.d.ts +2 -2
package/dist/packages/textfield/input-styles.d.ts +11 -0
package/dist/packages/textfield/input-styles.js +88 -0
package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
package/dist/packages/textfield/locales/da/messages.mjs +1 -0
package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
package/dist/packages/textfield/locales/en/messages.mjs +1 -0
package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
package/dist/packages/textfield/react.d.ts +1 -1
package/dist/packages/textfield/textfield.d.ts +11 -1
package/dist/packages/textfield/textfield.js +111 -24
package/dist/packages/textfield/textfield.js.map +4 -4
package/dist/packages/textfield/textfield.react.stories.d.ts +2 -2
package/dist/packages/toast/styles.js +1 -1
package/dist/packages/toast/toast.js +7 -7
package/dist/packages/toast/toast.js.map +2 -2
package/dist/packages/toast-container/toast-container.js +8 -8
package/dist/packages/toast-container/toast-container.js.map +3 -3
package/dist/web-types.json +96 -50
package/eik/index.js +20 -20
package/package.json +8 -1

package/dist/custom-elements.json CHANGED Viewed

@@ -2,163 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "packages/icon/icon.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "WarpIcon",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "description": "Icon filename (without .svg)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
-              },
-              "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true,
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
-              "attribute": "locale",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "svg",
-              "type": {
-                "text": "SVGElement | null"
-              },
-              "privacy": "private",
-              "default": "null",
-              "description": "Parsed SVG element (not reflected as attribute)"
-            },
-            {
-              "kind": "method",
-              "name": "fetchIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "Name of the icon file"
-                }
-              ],
-              "description": "Fetch an icon SVG from the CDN, with caching"
-            },
-            {
-              "kind": "method",
-              "name": "loadIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "description": "Icon filename (without .svg)",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
-              },
-              "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
-              "default": "\"medium\"",
-              "fieldName": "size",
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
-              }
-            },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
-              "fieldName": "locale"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "w-icon",
-          "customElement": true,
-          "modulePath": "packages/icon/icon.ts",
-          "definitionPath": "packages/icon/icon.ts"
-        },
-        {
-          "kind": "variable",
-          "name": "WIcon",
-          "default": "WarpIcon",
-          "deprecated": "Exported for backwards compatibility. Use WarpIcon."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "WarpIcon",
-          "declaration": {
-            "name": "WarpIcon",
-            "module": "packages/icon/icon.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WIcon",
-          "declaration": {
-            "name": "WIcon",
-            "module": "packages/icon/icon.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "w-icon",
-          "declaration": {
-            "name": "WarpIcon",
-            "module": "packages/icon/icon.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/textfield/textfield.ts",
@@ -173,7 +16,7 @@
               "name": "suffix"
             },
             {
-              "description": "Use with `<w-affix>` to include a prefix, for example a search icon.",
+              "description": "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.",
               "name": "prefix"
             }
           ],
@@ -223,6 +66,17 @@
               "attribute": "help-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show the optional indicator after the label.",
+              "attribute": "optional",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "size",
@@ -509,6 +363,15 @@
               "summary": "Description shown below the input field",
               "fieldName": "helpText"
             },
+            {
+              "name": "optional",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show the optional indicator after the label.",
+              "fieldName": "optional"
+            },
             {
               "name": "size",
               "type": {
@@ -686,13 +549,170 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/icon/icon.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "WarpIcon",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "Icon filename (without .svg)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
+              },
+              "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true,
+              "parsedType": {
+                "text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
+              "attribute": "locale",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "svg",
+              "type": {
+                "text": "SVGElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "Parsed SVG element (not reflected as attribute)"
+            },
+            {
+              "kind": "method",
+              "name": "fetchIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "Name of the icon file"
+                }
+              ],
+              "description": "Fetch an icon SVG from the CDN, with caching"
+            },
+            {
+              "kind": "method",
+              "name": "loadIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "Icon filename (without .svg)",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
+              },
+              "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
+              "default": "\"medium\"",
+              "fieldName": "size",
+              "parsedType": {
+                "text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
+              }
+            },
+            {
+              "name": "locale",
+              "type": {
+                "text": "string"
+              },
+              "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
+              "fieldName": "locale"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-icon",
+          "customElement": true,
+          "modulePath": "packages/icon/icon.ts",
+          "definitionPath": "packages/icon/icon.ts"
+        },
+        {
+          "kind": "variable",
+          "name": "WIcon",
+          "default": "WarpIcon",
+          "deprecated": "Exported for backwards compatibility. Use WarpIcon."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WarpIcon",
+          "declaration": {
+            "name": "WarpIcon",
+            "module": "packages/icon/icon.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WIcon",
+          "declaration": {
+            "name": "WIcon",
+            "module": "packages/icon/icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "w-icon",
+          "declaration": {
+            "name": "WarpIcon",
+            "module": "packages/icon/icon.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/affix/affix.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)",
+          "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n## Accessibility Note\nDue to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)\ncannot reference elements across shadow boundaries. This means:\n- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA\n- Interactive affixes (buttons) must have their own `aria-label` (already implemented)\n- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work\n\nFor non-interactive labels (e.g., currency symbols), consider including the information in the\nmain label or placeholder instead of relying on ARIA to announce affix content.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)",
           "name": "WarpAffix",
           "members": [
             {
@@ -2222,6 +2242,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_defaultLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -2230,6 +2258,15 @@
               },
               "description": "Accessible label for the breadcrumb navigation.\nDefaults to the localized \"You are here\" label. Set `aria-label` when the default label is not specific enough for the page."
             },
+            {
+              "kind": "field",
+              "name": "_label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_children",
@@ -2269,6 +2306,95 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/breadcrumb-item/breadcrumb-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders 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.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)",
+          "name": "WarpBreadcrumbItem",
+          "slots": [
+            {
+              "description": "The breadcrumb label content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "currentPage",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+              "attribute": "current-page"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+              "attribute": "href"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "current-page",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.",
+              "fieldName": "currentPage"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.",
+              "fieldName": "href"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "parent": {
+            "name": "w-breadcrumbs",
+            "description": ""
+          },
+          "tagName": "w-breadcrumb-item",
+          "customElement": true,
+          "modulePath": "packages/breadcrumb-item/breadcrumb-item.ts",
+          "definitionPath": "packages/breadcrumb-item/breadcrumb-item.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-breadcrumb-item",
+          "declaration": {
+            "name": "WarpBreadcrumbItem",
+            "module": "packages/breadcrumb-item/breadcrumb-item.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpBreadcrumbItem",
+          "declaration": {
+            "name": "WarpBreadcrumbItem",
+            "module": "packages/breadcrumb-item/breadcrumb-item.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/card/card.ts",

package/dist/docs/affix/affix.md CHANGED Viewed

@@ -4,6 +4,16 @@
 This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
+## Accessibility Note
+Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
+cannot reference elements across shadow boundaries. This means:
+- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
+- Interactive affixes (buttons) must have their own `aria-label` (already implemented)
+- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
+For non-interactive labels (e.g., currency symbols), consider including the information in the
+main label or placeholder instead of relying on ARIA to announce affix content.
 ## Usage
 `w-affix` is typically used inside form controls to render prefix/suffix text or icon actions.
@@ -142,8 +152,115 @@ Clicking the clear button will reset the textfield
 </elements-example>
+# Affix Styling
+The affix component provides a comprehensive styling API through CSS custom properties (tokens).
 ## Styling API
+### Wrapper Tokens
+Customize the appearance of the affix wrapper container:
+```css
+--w-c-affix-wrapper-bg: transparent;
+--w-c-affix-wrapper-border-radius: 0.4rem;
+--w-c-affix-wrapper-padding-left: 1.2rem;
+--w-c-affix-wrapper-padding-right: 1.2rem;
+--w-c-affix-wrapper-width-with-label: max-content;
+--w-c-affix-wrapper-width-with-icon: 4rem;
+```
+### Label Tokens
+Customize the appearance of text labels (when `label` property is used):
+```css
+--w-c-affix-label-color: var(--w-s-color-text);
+--w-c-affix-label-font-size: var(--w-font-size-xs);
+--w-c-affix-label-line-height: var(--w-line-height-xs);
+--w-c-affix-label-font-weight: 700;
+--w-c-affix-label-cursor: default;
+```
+## Parts
+For advanced styling needs beyond tokens, you can target internal elements using CSS parts:
+- `::part(wrapper)` - The container element (either `<div>` or `<button>` depending on variant)
+- `::part(label)` - The text label element (when using `label` property)
+```css
+w-affix::part(wrapper) {
+  /* Custom styling for the wrapper */
+  background-color: var(--w-s-color-background-subtle);
+}
+w-affix::part(label) {
+  /* Custom styling for text labels */
+  text-transform: uppercase;
+}
+```
+## Example Usage
+### Customizing Label Color
+```css
+w-affix {
+  --w-c-affix-label-color: var(--w-s-color-text-primary);
+}
+```
+### Customizing Wrapper Background
+```css
+w-affix {
+  --w-c-affix-wrapper-bg: var(--w-s-color-background-subtle);
+  --w-c-affix-wrapper-padding-left: 1.6rem;
+  --w-c-affix-wrapper-padding-right: 1.6rem;
+}
+```
+### Adjusting Icon/Label Widths
+```css
+w-affix {
+  --w-c-affix-wrapper-width-with-icon: 5rem;
+  --w-c-affix-wrapper-width-with-label: auto;
+}
+```
+### Styling by Slot Position
+Target prefix and suffix affixes differently:
+```css
+/* Style only prefix affixes */
+w-affix[slot='prefix'] {
+  --w-c-affix-wrapper-padding-left: 2rem;
+}
+/* Style only suffix affixes */
+w-affix[slot='suffix'] {
+  --w-c-affix-wrapper-padding-right: 2rem;
+}
+```
+### Using Parts for Advanced Customization
+```css
+/* Add a border to the wrapper */
+w-affix::part(wrapper) {
+  border-left: 1px solid var(--w-s-color-border);
+}
+/* Make labels italic */
+w-affix::part(label) {
+  font-style: italic;
+}
+```
 ## `<w-affix>` API
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).