@warp-ds/elements 2.9.0-next.2 → 2.9.0-next.3

package/dist/custom-elements.json

@@ -269,11 +269,14 @@
               "type": {
                 "text": "AlertVariants"
               },
+              "default": "'info'",
+              "summary": "Visual style of the alert.",
               "attribute": "variant",
               "reflects": true,
               "parsedType": {
                 "text": "'negative' | 'positive' | 'warning' | 'info'"
-              }
+              },
+              "description": "Controls both the color treatment and icon used by the component. Accepted values are `info`, `warning`, `positive`, and `negative`. Use the variant that matches the message severity so users can quickly distinguish informative messages from warnings, errors, and confirmations."
             },
             {
               "kind": "field",
@@ -281,8 +284,11 @@
               "type": {
                 "text": "boolean"
               },
+              "default": "false",
+              "summary": "Whether the alert is visible.",
               "attribute": "show",
-              "reflects": true
+              "reflects": true,
+              "description": "Alerts are hidden by default (`false`). Set this to `true` to render and expand the content. This is reflected as an attribute, so visibility can be controlled from markup (`show`) or from JavaScript (`element.show = true`)."
             },
             {
               "kind": "field",
@@ -291,7 +297,10 @@
                 "text": "string"
               },
               "default": "'alert'",
-              "attribute": "role"
+              "summary": "ARIA role announced to assistive technology.",
+              "attribute": "role",
+              "reflects": true,
+              "description": "Defaults to `alert` so urgent changes are announced by screen readers. Override this only when your use case requires a different announcement behavior, for example a less assertive live region strategy."
             }
           ],
           "attributes": [
@@ -300,6 +309,8 @@
               "type": {
                 "text": "AlertVariants"
               },
+              "default": "'info'",
+              "summary": "Visual style of the alert.",
               "fieldName": "variant",
               "parsedType": {
                 "text": "'negative' | 'positive' | 'warning' | 'info'"
@@ -310,6 +321,8 @@
               "type": {
                 "text": "boolean"
               },
+              "default": "false",
+              "summary": "Whether the alert is visible.",
               "fieldName": "show"
             },
             {
@@ -318,6 +331,7 @@
                 "text": "string"
               },
               "default": "'alert'",
+              "summary": "ARIA role announced to assistive technology.",
               "fieldName": "role"
             }
           ],

package/dist/docs/affix/affix.md

@@ -0,0 +1,56 @@
+# Affix (w-affix)
+
+## Description
+
+This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
+
+[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
+
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| ariaLabel | `string` | `-` | - |
+| clear | `boolean` | `false` | - |
+| search | `boolean` | `false` | - |
+| label | `string` | `-` | - |
+
+### Property Details
+
+#### ariaLabel
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### clear
+
+Add this property to render a clickable Warp close icon.
+
+Set an `aria-label` that explains the action when using this.
+
+- Type: `boolean`
+- Default: `false`
+
+#### search
+
+Add this property to render a clickable Warp search icon.
+
+Set an `aria-label` that explains the action when using this.
+
+- Type: `boolean`
+- Default: `false`
+
+#### label
+
+
+
+- Type: `string`
+- Default: `-`
+
+### Types
+
+No types documented.

package/dist/docs/affix/api.md

@@ -0,0 +1,48 @@
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| ariaLabel | `string` | `-` | - |
+| clear | `boolean` | `false` | - |
+| search | `boolean` | `false` | - |
+| label | `string` | `-` | - |
+
+### Property Details
+
+#### ariaLabel
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### clear
+
+Add this property to render a clickable Warp close icon.
+
+Set an `aria-label` that explains the action when using this.
+
+- Type: `boolean`
+- Default: `false`
+
+#### search
+
+Add this property to render a clickable Warp search icon.
+
+Set an `aria-label` that explains the action when using this.
+
+- Type: `boolean`
+- Default: `false`
+
+#### label
+
+
+
+- Type: `string`
+- Default: `-`
+
+### Types
+
+No types documented.

package/dist/docs/alert/accessibility.md

@@ -0,0 +1,30 @@
+## Accessibility
+
+For accessibility reasons, an alert should appear close to the element that triggered it.
+
+Use the ARIA live region `role` attribute to provide meaning to the alert
+element (defaults to "alert").
+
+If you want to remove the role from the alert and
+assign it to its particular child (e.g. title), you can do so by setting `role`
+property of the `Alert` component to an empty string and assigning a respective
+`role` attribute on the child element.
+
+<style-isolate>
+  <w-alert variant="info" show role="">
+    <h3 role="alert" class="t5">
+      This is an alert styled as an information box
+    </h3>
+    <p>In this example only the title has the role of alert. All alerts can have a description.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="info" show role="">
+  <h3 role="alert" class="t5">This is an alert styled as an information box</h3>
+  <p>In this example only the title has the role of alert. All alerts can have a description.</p>
+</w-alert>
+```
+
+Read more about live region `role`
+attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes).

package/dist/docs/alert/alert.md

@@ -0,0 +1,208 @@
+# Alert (w-alert)
+
+## Description
+
+Alert is an inline component used for displaying different types of messages.
+
+For accessibility reasons, alert should appear close to the element that triggered it.
+
+[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
+
+## Usage
+
+Alert is an inline component used for displaying different types of messages.
+
+Use alerts for contextual feedback that appears close to the related UI element or action.
+
+### Basic Alert
+
+```html
+<w-alert show>
+  We have updated your preferences.
+</w-alert>
+```
+
+### Variants
+
+Choose a variant that matches message severity:
+
+- `info`: neutral information
+- `positive`: confirmation/success
+- `warning`: caution
+- `negative`: errors or critical issues
+
+```html
+<w-alert variant="info" show>Informational message</w-alert>
+<w-alert variant="positive" show>Your changes were saved</w-alert>
+<w-alert variant="warning" show>Double-check this value before continuing</w-alert>
+<w-alert variant="negative" show>Something went wrong</w-alert>
+```
+
+### Visibility
+
+Alerts are hidden by default. Set `show` to display them.
+
+```html
+<w-alert id="profile-alert" variant="positive">Profile saved</w-alert>
+
+<script type="module">
+  const alert = document.querySelector('#profile-alert');
+  alert.show = true;
+</script>
+```
+
+## Accessibility
+
+For accessibility reasons, an alert should appear close to the element that triggered it.
+
+Use the ARIA live region `role` attribute to provide meaning to the alert
+element (defaults to "alert").
+
+If you want to remove the role from the alert and
+assign it to its particular child (e.g. title), you can do so by setting `role`
+property of the `Alert` component to an empty string and assigning a respective
+`role` attribute on the child element.
+
+<style-isolate>
+  <w-alert variant="info" show role="">
+    <h3 role="alert" class="t5">
+      This is an alert styled as an information box
+    </h3>
+    <p>In this example only the title has the role of alert. All alerts can have a description.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="info" show role="">
+  <h3 role="alert" class="t5">This is an alert styled as an information box</h3>
+  <p>In this example only the title has the role of alert. All alerts can have a description.</p>
+</w-alert>
+```
+
+Read more about live region `role`
+attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes).
+
+## Examples
+
+### Basic
+
+<style-isolate>
+  <w-alert show>
+    <p>We have updated your preferences.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert show>
+  <p>We have updated your preferences.</p>
+</w-alert>
+```
+
+### Info
+
+<style-isolate>
+  <w-alert variant="info" show>
+    <p>This is an informational alert.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="info" show>
+  <p>This is an informational alert.</p>
+</w-alert>
+```
+
+### Warning
+
+<style-isolate>
+  <w-alert variant="warning" show>
+    <p>Please double-check this value before continuing.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="warning" show>
+  <p>Please double-check this value before continuing.</p>
+</w-alert>
+```
+
+### Negative
+
+<style-isolate>
+  <w-alert variant="negative" show>
+    <p>Something went wrong. Try again.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="negative" show>
+  <p>Something went wrong. Try again.</p>
+</w-alert>
+```
+
+### Positive
+
+<style-isolate>
+  <w-alert variant="positive" show>
+    <p>Your changes were saved successfully.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="positive" show>
+  <p>Your changes were saved successfully.</p>
+</w-alert>
+```
+
+### Programmatic Visibility
+
+```html
+<w-alert id="profile-alert" variant="positive">
+  <p>Profile saved</p>
+</w-alert>
+
+<script type="module">
+  const alert = document.querySelector('#profile-alert');
+  alert.show = true;
+</script>
+```
+
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
+| show | `boolean` | `false` | Whether the alert is visible. |
+| role | `string` | `'alert'` | ARIA role announced to assistive technology. |
+
+### Property Details
+
+#### variant
+
+Controls both the color treatment and icon used by the component. Accepted values are `info`, `warning`, `positive`, and `negative`. Use the variant that matches the message severity so users can quickly distinguish informative messages from warnings, errors, and confirmations.
+
+- Type: [`AlertVariants`](#alertvariants)
+- Default: `'info'`
+
+#### show
+
+Alerts are hidden by default (`false`). Set this to `true` to render and expand the content. This is reflected as an attribute, so visibility can be controlled from markup (`show`) or from JavaScript (`element.show = true`).
+
+- Type: `boolean`
+- Default: `false`
+
+#### role
+
+Defaults to `alert` so urgent changes are announced by screen readers. Override this only when your use case requires a different announcement behavior, for example a less assertive live region strategy.
+
+- Type: `string`
+- Default: `'alert'`
+
+### Types
+
+#### AlertVariants
+
+`'negative' | 'positive' | 'warning' | 'info'`
+

package/dist/docs/alert/api.md

@@ -0,0 +1,39 @@
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| variant | [`AlertVariants`](#alertvariants) | `'info'` | Visual style of the alert. |
+| show | `boolean` | `false` | Whether the alert is visible. |
+| role | `string` | `'alert'` | ARIA role announced to assistive technology. |
+
+### Property Details
+
+#### variant
+
+Controls both the color treatment and icon used by the component. Accepted values are `info`, `warning`, `positive`, and `negative`. Use the variant that matches the message severity so users can quickly distinguish informative messages from warnings, errors, and confirmations.
+
+- Type: [`AlertVariants`](#alertvariants)
+- Default: `'info'`
+
+#### show
+
+Alerts are hidden by default (`false`). Set this to `true` to render and expand the content. This is reflected as an attribute, so visibility can be controlled from markup (`show`) or from JavaScript (`element.show = true`).
+
+- Type: `boolean`
+- Default: `false`
+
+#### role
+
+Defaults to `alert` so urgent changes are announced by screen readers. Override this only when your use case requires a different announcement behavior, for example a less assertive live region strategy.
+
+- Type: `string`
+- Default: `'alert'`
+
+### Types
+
+#### AlertVariants
+
+`'negative' | 'positive' | 'warning' | 'info'`
+

package/dist/docs/alert/examples.md

@@ -0,0 +1,84 @@
+## Examples
+
+### Basic
+
+<style-isolate>
+  <w-alert show>
+    <p>We have updated your preferences.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert show>
+  <p>We have updated your preferences.</p>
+</w-alert>
+```
+
+### Info
+
+<style-isolate>
+  <w-alert variant="info" show>
+    <p>This is an informational alert.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="info" show>
+  <p>This is an informational alert.</p>
+</w-alert>
+```
+
+### Warning
+
+<style-isolate>
+  <w-alert variant="warning" show>
+    <p>Please double-check this value before continuing.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="warning" show>
+  <p>Please double-check this value before continuing.</p>
+</w-alert>
+```
+
+### Negative
+
+<style-isolate>
+  <w-alert variant="negative" show>
+    <p>Something went wrong. Try again.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="negative" show>
+  <p>Something went wrong. Try again.</p>
+</w-alert>
+```
+
+### Positive
+
+<style-isolate>
+  <w-alert variant="positive" show>
+    <p>Your changes were saved successfully.</p>
+  </w-alert>
+</style-isolate>
+
+```html
+<w-alert variant="positive" show>
+  <p>Your changes were saved successfully.</p>
+</w-alert>
+```
+
+### Programmatic Visibility
+
+```html
+<w-alert id="profile-alert" variant="positive">
+  <p>Profile saved</p>
+</w-alert>
+
+<script type="module">
+  const alert = document.querySelector('#profile-alert');
+  alert.show = true;
+</script>
+```

package/dist/docs/alert/usage.md

@@ -0,0 +1,42 @@
+## Usage
+
+Alert is an inline component used for displaying different types of messages.
+
+Use alerts for contextual feedback that appears close to the related UI element or action.
+
+### Basic Alert
+
+```html
+<w-alert show>
+  We have updated your preferences.
+</w-alert>
+```
+
+### Variants
+
+Choose a variant that matches message severity:
+
+- `info`: neutral information
+- `positive`: confirmation/success
+- `warning`: caution
+- `negative`: errors or critical issues
+
+```html
+<w-alert variant="info" show>Informational message</w-alert>
+<w-alert variant="positive" show>Your changes were saved</w-alert>
+<w-alert variant="warning" show>Double-check this value before continuing</w-alert>
+<w-alert variant="negative" show>Something went wrong</w-alert>
+```
+
+### Visibility
+
+Alerts are hidden by default. Set `show` to display them.
+
+```html
+<w-alert id="profile-alert" variant="positive">Profile saved</w-alert>
+
+<script type="module">
+  const alert = document.querySelector('#profile-alert');
+  alert.show = true;
+</script>
+```

package/dist/docs/attention/api.md

@@ -0,0 +1,132 @@
+## API Documentation
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| show | `boolean` | `false` | - |
+| placement | `Directions` | `'bottom'` | - |
+| tooltip | `boolean` | `false` | - |
+| callout | `boolean` | `false` | - |
+| popover | `boolean` | `false` | - |
+| highlight | `boolean` | `false` | - |
+| canClose | `boolean` | `false` | - |
+| noArrow | `boolean` | `false` | - |
+| distance | `number` | `8` | - |
+| skidding | `number` | `0` | - |
+| flip | `boolean` | `false` | - |
+| crossAxis | `boolean` | `false` | - |
+| fallbackPlacements | `Directions[]` | `-` | - |
+| _initialPlacement | `unknown` | `-` | - |
+| _actualDirection | `unknown` | `-` | - |
+
+### Property Details
+
+#### show
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### placement
+
+
+
+- Type: `Directions`
+- Default: `'bottom'`
+
+#### tooltip
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### callout
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### popover
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### highlight
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### canClose
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### noArrow
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### distance
+
+
+
+- Type: `number`
+- Default: `8`
+
+#### skidding
+
+
+
+- Type: `number`
+- Default: `0`
+
+#### flip
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### crossAxis
+
+
+
+- Type: `boolean`
+- Default: `false`
+
+#### fallbackPlacements
+
+
+
+- Type: `Directions[]`
+- Default: `-`
+
+#### _initialPlacement
+
+
+
+- Type: `unknown`
+- Default: `-`
+
+#### _actualDirection
+
+
+
+- Type: `unknown`
+- Default: `-`
+
+### Types
+
+No types documented.