@warp-ds/elements 2.9.0-next.6 → 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/packages/textarea/textarea.d.ts

@@ -1,12 +1,17 @@
 import { LitElement, PropertyValues } from 'lit';
 declare const WarpTextarea_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
- * A single line text input element.
+ * A multi-line text input with built-in form validation, auto-resizing, and styling support.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+ * The component automatically handles:
+ *  - Form integration
+ *  - Auto-resizing based on content and row constraints
+ *  - Built-in validation with customizable error messages
+ *  - Accessibility attributes and labeling
  */
 declare class WarpTextarea extends WarpTextarea_base {
     #private;
+    /** @internal */
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -14,71 +19,75 @@ declare class WarpTextarea extends WarpTextarea_base {
         slotAssignment?: SlotAssignmentMode;
     };
     /**
-     * @summary
-     * @description
+     * Keep in mind that using disabled in its current form is an anti-pattern.
+     *
+     * There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
+     *
+     * Please consider more informative alternatives before choosing to use disabled on an element.
+     *
+     * @summary Makes the element not focusable and hides it from form submits
      */
     disabled: boolean;
     /**
-     * @summary
-     * @description
+     * Mark the form field as invalid.
+     *
+     * Make sure to also set a `help-text` to help users fix the validation problem.
      */
     invalid: boolean;
     /**
-     * @summary
-     * @description
+     * Either a `label` or an `aria-label` must be provided.
      */
     label: string;
     /**
-     * @summary
-     * @description
+     * Use in combination with `invalid` to show as a validation error message,
+     * or on its own to show a help text.
+     *
+     * @summary Description shown below the input field
      */
     helpText: string;
     /**
-     * @summary
-     * @description
+     * Sets the maximum number of text rows before the content starts scrolling.
      */
     maxRows: number;
     /**
-     * @summary
-     * @description
+     * Sets the minimum number of text rows the textarea should display
      */
     minRows: number;
     /**
-     * @summary
-     * @description
+     * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form
      */
     name: string;
     /**
-     * @summary
-     * @description
+     * Set a text that is shown in the textarea when it doesn't have a value.
+     *
+     * Placeholder text should not be used as a substitute for labeling the element with a visible label.
+     *
+     * @summary Shown in the textarea when it doesn't have a value
      */
     placeholder: string;
-    /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`.
-     * @summary
-     * @description
+    /**
+     * @deprecated Use the native `readonly` attribute instead
      */
     readOnly: boolean;
     /**
-     * @summary
-     * @description
+     * Whether the input can be selected but not changed by the user
      */
     readonly: boolean;
     /**
-     * @summary
-     * @description
+     * Whether user input is required on the input before form submission
      */
     required: boolean;
     /**
-     * @summary
-     * @description
+     * Lets you set the current value
      */
     value: string;
     /**
-     * @summary
-     * @description
+     * Show an icon behind the label indicating the field is optional
      */
     optional: boolean;
+    /** @internal */
     minHeight: number;
+    /** @internal */
     maxHeight: number;
     private _textarea;
     updated(changedProperties: PropertyValues<this>): void;