@warp-ds/elements 2.9.0-next.4 → 2.9.0-next.6

package/dist/docs/attention/api.md

@@ -4,128 +4,128 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| show | `boolean` | `false` | - |
-| placement | `Directions` | `'bottom'` | - |
-| tooltip | `boolean` | `false` | - |
+| _actualDirection | `unknown` | `-` | - |
+| _initialPlacement | `unknown` | `-` | - |
 | 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` | - |
+| distance | `number` | `8` | - |
 | fallbackPlacements | `Directions[]` | `-` | - |
-| _initialPlacement | `unknown` | `-` | - |
-| _actualDirection | `unknown` | `-` | - |
+| flip | `boolean` | `false` | - |
+| highlight | `boolean` | `false` | - |
+| noArrow | `boolean` | `false` | - |
+| placement | `Directions` | `'bottom'` | - |
+| popover | `boolean` | `false` | - |
+| show | `boolean` | `false` | - |
+| skidding | `number` | `0` | - |
+| tooltip | `boolean` | `false` | - |
 
 ### Property Details
 
-#### show
+#### _actualDirection
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `unknown`
+- Default: `-`
 
-#### placement
+#### _initialPlacement
 
 
 
-- Type: `Directions`
-- Default: `'bottom'`
+- Type: `unknown`
+- Default: `-`
 
-#### tooltip
+#### callout
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### callout
+#### canClose
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### popover
+#### crossAxis
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### highlight
+#### distance
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `number`
+- Default: `8`
 
-#### canClose
+#### fallbackPlacements
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions[]`
+- Default: `-`
 
-#### noArrow
+#### flip
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### distance
+#### highlight
 
 
 
-- Type: `number`
-- Default: `8`
+- Type: `boolean`
+- Default: `false`
 
-#### skidding
+#### noArrow
 
 
 
-- Type: `number`
-- Default: `0`
+- Type: `boolean`
+- Default: `false`
 
-#### flip
+#### placement
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions`
+- Default: `'bottom'`
 
-#### crossAxis
+#### popover
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### fallbackPlacements
+#### show
 
 
 
-- Type: `Directions[]`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
-#### _initialPlacement
+#### skidding
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `number`
+- Default: `0`
 
-#### _actualDirection
+#### tooltip
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/attention/attention.md

@@ -16,128 +16,128 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| show | `boolean` | `false` | - |
-| placement | `Directions` | `'bottom'` | - |
-| tooltip | `boolean` | `false` | - |
+| _actualDirection | `unknown` | `-` | - |
+| _initialPlacement | `unknown` | `-` | - |
 | 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` | - |
+| distance | `number` | `8` | - |
 | fallbackPlacements | `Directions[]` | `-` | - |
-| _initialPlacement | `unknown` | `-` | - |
-| _actualDirection | `unknown` | `-` | - |
+| flip | `boolean` | `false` | - |
+| highlight | `boolean` | `false` | - |
+| noArrow | `boolean` | `false` | - |
+| placement | `Directions` | `'bottom'` | - |
+| popover | `boolean` | `false` | - |
+| show | `boolean` | `false` | - |
+| skidding | `number` | `0` | - |
+| tooltip | `boolean` | `false` | - |
 
 ### Property Details
 
-#### show
+#### _actualDirection
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `unknown`
+- Default: `-`
 
-#### placement
+#### _initialPlacement
 
 
 
-- Type: `Directions`
-- Default: `'bottom'`
+- Type: `unknown`
+- Default: `-`
 
-#### tooltip
+#### callout
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### callout
+#### canClose
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### popover
+#### crossAxis
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### highlight
+#### distance
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `number`
+- Default: `8`
 
-#### canClose
+#### fallbackPlacements
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions[]`
+- Default: `-`
 
-#### noArrow
+#### flip
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### distance
+#### highlight
 
 
 
-- Type: `number`
-- Default: `8`
+- Type: `boolean`
+- Default: `false`
 
-#### skidding
+#### noArrow
 
 
 
-- Type: `number`
-- Default: `0`
+- Type: `boolean`
+- Default: `false`
 
-#### flip
+#### placement
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `Directions`
+- Default: `'bottom'`
 
-#### crossAxis
+#### popover
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### fallbackPlacements
+#### show
 
 
 
-- Type: `Directions[]`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
-#### _initialPlacement
+#### skidding
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `number`
+- Default: `0`
 
-#### _actualDirection
+#### tooltip
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/badge/accessibility.md

@@ -1 +1,45 @@
 ## Accessibility
+
+Badge renders slotted text as regular content. It does not add an ARIA role and it is not announced as a live region.
+
+### Use Meaningful Text
+
+Do not rely on color alone to communicate meaning. The badge text should describe the status or metadata by itself.
+
+```html
+<w-badge variant="positive">Approved</w-badge>
+<w-badge variant="negative">Rejected</w-badge>
+```
+
+Avoid labels that only make sense visually:
+
+```html
+<!-- Avoid -->
+<w-badge variant="positive">Green</w-badge>
+```
+
+### Keep Badges Non-Interactive
+
+Do not place interactive elements inside `w-badge`. If the user can click, dismiss, filter, or select the item, use an interactive component instead.
+
+The `disabled` variant is visual only. It does not disable related controls or remove anything from the tab order.
+
+```html
+<!-- Avoid -->
+<w-badge>
+  <button type="button">New</button>
+</w-badge>
+```
+
+### Dynamic Changes
+
+If a badge value changes after the page has loaded and users need to be notified, announce that change outside the badge with an appropriate live region or use [Alert](/docs/components/alert/overview) for important feedback.
+
+### Duplicate or Decorative Badges
+
+If the same information is already available in nearby accessible text and the badge is only a visual duplicate, hide the duplicate badge from assistive technologies.
+
+```html
+<p>Sponsored listing</p>
+<w-badge aria-hidden="true" variant="sponsored">Sponsored</w-badge>
+```

package/dist/docs/badge/api.md

@@ -4,23 +4,27 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| variant | `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'` | `-` | - |
-| position | `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'` | `-` | - |
+| position | `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left'` | `-` | Positions the badge in a corner of a parent element. |
+| variant | `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored'` | `-` | Controls the badge color treatment. |
 
 ### Property Details
 
-#### variant
-
+#### position
 
+Positions the badge in a corner of a parent element.
+Use this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.
+Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
 
-- Type: `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'`
+- Type: `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left'`
 - Default: `-`
 
-#### position
-
+#### variant
 
+Controls the badge color treatment.
+If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 
-- Type: `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'`
+- Type: `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored'`
 - Default: `-`
 
 ### Types

package/dist/docs/badge/badge.md

@@ -4,37 +4,218 @@
 
 `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.
 
-[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)
-
 ## Usage
 
+Badge is a compact, non-interactive label for short metadata such as status, category, count, price, or sponsorship information.
+
+Use a badge when the label supports nearby content and does not require user interaction.
+
+### Basic Badge
+
+```html
+<w-badge>New</w-badge>
+```
+
+### Variants
+
+Choose a variant that matches the meaning of the badge text:
+
+- `neutral`: default metadata or low-emphasis labels
+- `info`: informational labels
+- `positive`: successful, active, or approved states
+- `warning`: cautionary states
+- `negative`: error, blocked, or rejected states
+- `disabled`: unavailable or inactive states
+- `price`: price labels, especially when placed over media
+- `sponsored`: sponsored or commercial labels
+
+```html
+<w-badge variant="neutral">Neutral</w-badge>
+<w-badge variant="info">Info</w-badge>
+<w-badge variant="positive">Approved</w-badge>
+<w-badge variant="warning">Pending</w-badge>
+<w-badge variant="negative">Rejected</w-badge>
+<w-badge variant="disabled">Unavailable</w-badge>
+<w-badge variant="price">1 200 kr</w-badge>
+<w-badge variant="sponsored">Sponsored</w-badge>
+```
+
+If `variant` is omitted, the badge uses the neutral visual treatment.
+
+### Positioned Badges
+
+Use `position` when a badge should sit in a corner of a parent element, such as a media thumbnail or listing image. The parent element should establish the positioning context with `position: relative`.
+
+Supported positions are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
+
+```html
+<div style="position: relative;">
+  <img src="listing.jpg" alt="Living room with large windows" />
+  <w-badge variant="price" position="top-right">1 200 kr</w-badge>
+</div>
+```
+
+### Content Guidelines
+
+Keep badge text short and descriptive. Avoid using badges for full messages, instructions, or actions. Use [Alert](/docs/components/alert/overview) for important feedback messages and an interactive component, such as a button or link, when the user can act on the item.
+
 ## Accessibility
 
+Badge renders slotted text as regular content. It does not add an ARIA role and it is not announced as a live region.
+
+### Use Meaningful Text
+
+Do not rely on color alone to communicate meaning. The badge text should describe the status or metadata by itself.
+
+```html
+<w-badge variant="positive">Approved</w-badge>
+<w-badge variant="negative">Rejected</w-badge>
+```
+
+Avoid labels that only make sense visually:
+
+```html
+<!-- Avoid -->
+<w-badge variant="positive">Green</w-badge>
+```
+
+### Keep Badges Non-Interactive
+
+Do not place interactive elements inside `w-badge`. If the user can click, dismiss, filter, or select the item, use an interactive component instead.
+
+The `disabled` variant is visual only. It does not disable related controls or remove anything from the tab order.
+
+```html
+<!-- Avoid -->
+<w-badge>
+  <button type="button">New</button>
+</w-badge>
+```
+
+### Dynamic Changes
+
+If a badge value changes after the page has loaded and users need to be notified, announce that change outside the badge with an appropriate live region or use [Alert](/docs/components/alert/overview) for important feedback.
+
+### Duplicate or Decorative Badges
+
+If the same information is already available in nearby accessible text and the badge is only a visual duplicate, hide the duplicate badge from assistive technologies.
+
+```html
+<p>Sponsored listing</p>
+<w-badge aria-hidden="true" variant="sponsored">Sponsored</w-badge>
+```
+
 ## Examples
 
+### Basic
+
+<style-isolate>
+  <w-badge>New</w-badge>
+</style-isolate>
+
+```html
+<w-badge>New</w-badge>
+```
+
+### Status Variants
+
+<style-isolate>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center;">
+    <w-badge variant="neutral">Neutral</w-badge>
+    <w-badge variant="info">Info</w-badge>
+    <w-badge variant="positive">Approved</w-badge>
+    <w-badge variant="warning">Pending</w-badge>
+    <w-badge variant="negative">Rejected</w-badge>
+    <w-badge variant="disabled">Unavailable</w-badge>
+  </div>
+</style-isolate>
+
+```html
+<w-badge variant="neutral">Neutral</w-badge>
+<w-badge variant="info">Info</w-badge>
+<w-badge variant="positive">Approved</w-badge>
+<w-badge variant="warning">Pending</w-badge>
+<w-badge variant="negative">Rejected</w-badge>
+<w-badge variant="disabled">Unavailable</w-badge>
+```
+
+### Price
+
+<style-isolate>
+  <w-badge variant="price">1 200 kr</w-badge>
+</style-isolate>
+
+```html
+<w-badge variant="price">1 200 kr</w-badge>
+```
+
+### Sponsored
+
+<style-isolate>
+  <w-badge variant="sponsored">Sponsored</w-badge>
+</style-isolate>
+
+```html
+<w-badge variant="sponsored">Sponsored</w-badge>
+```
+
+### Positioned
+
+<style-isolate>
+  <div style="position: relative; width: 220px; height: 124px; border-radius: 8px; overflow: hidden; background: #e5e7eb;">
+    <w-badge variant="price" position="top-right">1 200 kr</w-badge>
+  </div>
+</style-isolate>
+
+```html
+<div style="position: relative;">
+  <img src="listing.jpg" alt="Living room with large windows" />
+  <w-badge variant="price" position="top-right">1 200 kr</w-badge>
+</div>
+```
+
+### Positioned Sponsored Badge
+
+<style-isolate>
+  <div style="position: relative; width: 220px; height: 124px; border-radius: 8px; overflow: hidden; background: #e5e7eb;">
+    <w-badge variant="sponsored" position="bottom-left">Sponsored</w-badge>
+  </div>
+</style-isolate>
+
+```html
+<div style="position: relative;">
+  <img src="listing.jpg" alt="Living room with large windows" />
+  <w-badge variant="sponsored" position="bottom-left">Sponsored</w-badge>
+</div>
+```
+
 ## API Documentation
 
 ### Properties
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| variant | `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'` | `-` | - |
-| position | `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'` | `-` | - |
+| position | `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left'` | `-` | Positions the badge in a corner of a parent element. |
+| variant | `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored'` | `-` | Controls the badge color treatment. |
 
 ### Property Details
 
-#### variant
-
+#### position
 
+Positions the badge in a corner of a parent element.
+Use this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.
+Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.
 
-- Type: `'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored'`
+- Type: `'top-left' \| 'top-right' \| 'bottom-right' \| 'bottom-left'`
 - Default: `-`
 
-#### position
-
+#### variant
 
+Controls the badge color treatment.
+If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
+Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
 
-- Type: `'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'`
+- Type: `'neutral' \| 'info' \| 'positive' \| 'warning' \| 'negative' \| 'disabled' \| 'price' \| 'sponsored'`
 - Default: `-`
 
 ### Types