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

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

package/dist/docs/badge/examples.md

@@ -1 +1,83 @@
 ## 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>
+```

package/dist/docs/badge/usage.md

@@ -1 +1,54 @@
 ## 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.

package/dist/docs/button/api.md

@@ -4,38 +4,31 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
-| type | [`ButtonType`](#buttontype) | `-` | - |
+| ariaValueTextLoading | `unknown` | `-` | - |
 | autofocus | `boolean` | `false` | - |
-| variant | [`ButtonVariant`](#buttonvariant) | `-` | - |
-| quiet | `boolean` | `false` | - |
-| iconOnly | `boolean` | `false` | - |
-| small | `boolean` | `false` | - |
-| loading | `boolean` | `false` | - |
-| href | `string` | `-` | - |
-| target | `string` | `-` | - |
+| buttonClass | `string` | `-` | **Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button. |
 | disabled | `boolean` | `false` | - |
-| rel | `string` | `-` | - |
 | fullWidth | `boolean` | `false` | - |
-| buttonClass | `string` | `-` | - |
+| href | `string` | `-` | - |
+| iconOnly | `boolean` | `false` | - |
+| loading | `boolean` | `false` | - |
 | name | `string` | `-` | - |
+| quiet | `boolean` | `false` | **Deprecated**: Use `variant="quiet"` instead |
+| rel | `string` | `-` | - |
+| shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
+| small | `boolean` | `false` | - |
+| target | `string` | `-` | - |
+| type | [`ButtonType`](#buttontype) | `-` | - |
 | value | `string` | `-` | - |
-| ariaValueTextLoading | `unknown` | `-` | - |
+| variant | [`ButtonVariant`](#buttonvariant) | `-` | - |
 
 ### Property Details
 
-#### shadowRootOptions
-
-
-
-- Type: `object`
-- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
-
-#### type
+#### ariaValueTextLoading
 
 
 
-- Type: [`ButtonType`](#buttontype)
+- Type: `unknown`
 - Default: `-`
 
 #### autofocus
@@ -45,56 +38,60 @@
 - Type: `boolean`
 - Default: `false`
 
-#### variant
+#### buttonClass
 
+**Deprecated**: This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.
 
 
-- Type: [`ButtonVariant`](#buttonvariant)
+
+- Type: `string`
 - Default: `-`
 
-#### quiet
+#### disabled
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### iconOnly
+#### fullWidth
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### small
+#### href
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `string`
+- Default: `-`
 
-#### loading
+#### iconOnly
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### href
+#### loading
 
 
 
-- Type: `string`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
-#### target
+#### name
 
 
 
 - Type: `string`
 - Default: `-`
 
-#### disabled
+#### quiet
+
+**Deprecated**: Use `variant="quiet"` instead
 
 
 
@@ -108,25 +105,32 @@
 - Type: `string`
 - Default: `-`
 
-#### fullWidth
+#### shadowRootOptions
+
+
+
+- Type: `object`
+- Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
+
+#### small
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### buttonClass
+#### target
 
 
 
 - Type: `string`
 - Default: `-`
 
-#### name
+#### type
 
 
 
-- Type: `string`
+- Type: [`ButtonType`](#buttontype)
 - Default: `-`
 
 #### value
@@ -136,20 +140,20 @@
 - Type: `string`
 - Default: `-`
 
-#### ariaValueTextLoading
+#### variant
 
 
 
-- Type: `unknown`
+- Type: [`ButtonVariant`](#buttonvariant)
 - Default: `-`
 
 ### Types
 
 #### ButtonType
 
-`'button' | 'submit' | 'reset'`
+`'button' \| 'submit' \| 'reset'`
 
 #### ButtonVariant
 
-`'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link'`
+`'negative' \| 'primary' \| 'secondary' \| 'negativeQuiet' \| 'utility' \| 'quiet' \| 'utilityQuiet' \| 'overlay' \| 'overlayInverted' \| 'overlayQuiet' \| 'overlayInvertedQuiet' \| 'pill' \| 'link'`