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

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'`
 

package/dist/docs/button/button.md

@@ -18,38 +18,31 @@ Buttons are used to perform actions, widh different visuals for different needs.
 
 | 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
@@ -59,56 +52,60 @@ Buttons are used to perform actions, widh different visuals for different needs.
 - 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
 
 
 
@@ -122,25 +119,32 @@ Buttons are used to perform actions, widh different visuals for different needs.
 - 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
@@ -150,20 +154,20 @@ Buttons are used to perform actions, widh different visuals for different needs.
 - 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'`
 

package/dist/docs/card/api.md

@@ -4,40 +4,40 @@
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| selected | `boolean` | `false` | - |
-| flat | `boolean` | `false` | - |
-| clickable | `boolean` | `false` | - |
 | buttonText | `unknown` | `-` | - |
+| clickable | `boolean` | `false` | - |
+| flat | `boolean` | `false` | - |
+| selected | `boolean` | `false` | - |
 
 ### Property Details
 
-#### selected
+#### buttonText
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `unknown`
+- Default: `-`
 
-#### flat
+#### clickable
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### clickable
+#### flat
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### buttonText
+#### selected
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types
 

package/dist/docs/card/card.md

@@ -18,40 +18,40 @@ Card is a layout component used for separating content areas on a page.
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| selected | `boolean` | `false` | - |
-| flat | `boolean` | `false` | - |
-| clickable | `boolean` | `false` | - |
 | buttonText | `unknown` | `-` | - |
+| clickable | `boolean` | `false` | - |
+| flat | `boolean` | `false` | - |
+| selected | `boolean` | `false` | - |
 
 ### Property Details
 
-#### selected
+#### buttonText
 
 
 
-- Type: `boolean`
-- Default: `false`
+- Type: `unknown`
+- Default: `-`
 
-#### flat
+#### clickable
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### clickable
+#### flat
 
 
 
 - Type: `boolean`
 - Default: `false`
 
-#### buttonText
+#### selected
 
 
 
-- Type: `unknown`
-- Default: `-`
+- Type: `boolean`
+- Default: `false`
 
 ### Types