@warp-ds/elements 2.9.0 → 2.9.1-next.1

package/dist/packages/box/box.react.stories.d.ts

@@ -4,7 +4,7 @@ import { Box } from './react';
 declare const _default: {
     title: string;
     component: import("@lit/react").ReactWebComponent<import("./box").WarpBox, {}>;
-    render(args: Omit<React.HTMLAttributes<import("./box").WarpBox>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "render" | "renderOptions" | "info" | "neutral" | "_class" | "bleed" | "bordered" | "_optOutRoleWithDefault"> & {} & Partial<Omit<import("./box").WarpBox, keyof HTMLElement>> & React.RefAttributes<import("./box").WarpBox>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import("./box").WarpBox>, "form" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "info" | "neutral" | "_class" | "bleed" | "bordered"> & {} & Partial<Omit<import("./box").WarpBox, keyof HTMLElement>> & React.RefAttributes<import("./box").WarpBox>): React.JSX.Element;
 };
 export default _default;
 export type Story = StoryObj<typeof Box>;

package/dist/packages/box/box.stories.d.ts

@@ -12,3 +12,4 @@ export declare const Info: Story;
 export declare const Neutral: Story;
 export declare const Bordered: Story;
 export declare const Bleed: Story;
+export declare const AccessibleRegion: Story;

package/dist/packages/box/box.stories.js

@@ -29,31 +29,38 @@ export const Default = {
         bordered: false,
         info: false,
         neutral: false,
-        role: 'region',
     },
 };
 export const Info = {
     args: {
         info: true,
-        role: 'region',
     },
 };
 export const Neutral = {
     args: {
         neutral: true,
-        role: 'region',
     },
 };
 export const Bordered = {
     args: {
         bordered: true,
-        role: 'region',
     },
 };
 export const Bleed = {
     args: {
         bleed: true,
         neutral: true,
-        role: 'region',
+    },
+};
+export const AccessibleRegion = {
+    args: {},
+    render: (args) => {
+        return html `
+      <w-box aria-labelledby="box-content">
+        <h3 id="box-content">Box Content</h3>
+        <p>Inspect this box in the accessibility tree to see that it is treated as a region.</p>
+        <p>If aria-labelled by is not used, the box will not be treated as a region.</p>
+      </w-box>
+    `;
     },
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.9.0-next.6",
+  "version": "2.9.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -666,30 +666,58 @@
           "attributes": [
             {
               "name": "bleed",
+              "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "bordered",
+              "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "info",
+              "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "neutral",
+              "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "role", "value": { "type": "string" } }
+            {
+              "name": "role",
+              "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.",
+              "value": { "type": "string", "default": "'region'" }
+            }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "bleed", "type": "boolean" },
-              { "name": "bordered", "type": "boolean" },
-              { "name": "info", "type": "boolean" },
-              { "name": "neutral", "type": "boolean" },
-              { "name": "role", "type": "string" }
+              {
+                "name": "bleed",
+                "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.",
+                "type": "boolean"
+              },
+              {
+                "name": "bordered",
+                "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.",
+                "type": "boolean"
+              },
+              {
+                "name": "info",
+                "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.",
+                "type": "boolean"
+              },
+              {
+                "name": "neutral",
+                "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.",
+                "type": "boolean"
+              },
+              {
+                "name": "role",
+                "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.",
+                "type": "string"
+              }
             ],
             "events": []
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.9.0",
+  "version": "2.9.1-next.1",
   "packageManager": "pnpm@10.33.0",
   "description": "Custom elements for Warp",
   "exports": {