@warp-ds/elements 2.10.0-next.5 → 2.10.0-next.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/docs/affix/affix.md +0 -2
- package/dist/docs/alert/alert.md +0 -2
- package/dist/docs/box/box.md +0 -2
- package/dist/docs/breadcrumbs/breadcrumbs.md +0 -2
- package/dist/docs/button/button.md +0 -2
- package/dist/docs/card/card.md +0 -2
- package/dist/docs/checkbox/checkbox.md +1 -1
- package/dist/docs/checkbox-group/checkbox-group.md +1 -1
- package/dist/docs/combobox/combobox.md +0 -2
- package/dist/docs/datepicker/datepicker.md +0 -2
- package/dist/docs/icon/icon.md +1 -1
- package/dist/docs/index.md +46 -0
- package/dist/docs/link/link.md +0 -2
- package/dist/docs/radio/radio.md +1 -1
- package/dist/packages/slider-thumb/slider-thumb.js +1 -1
- package/dist/packages/slider-thumb/slider-thumb.js.map +3 -3
- package/dist/web-types.json +1 -1
- package/eik/index.js +1 -1
- package/package.json +1 -4
package/README.md
CHANGED
|
@@ -236,6 +236,10 @@ To use the Warp cloaking device to avoid CLS and FOUCE, simply add the warp-cloa
|
|
|
236
236
|
|
|
237
237
|
That's it, your components should render just 1x, fully ready with no CLS and FOUCE.
|
|
238
238
|
|
|
239
|
+
## AI Agents
|
|
240
|
+
|
|
241
|
+
The `@warp-ds/elements` package ships with agent friendly markdown documentation. Point your agent at `@warp-ds/elements/dist/docs/index.md` and it should be able to take it from there.
|
|
242
|
+
|
|
239
243
|
## Releases
|
|
240
244
|
|
|
241
245
|
This project is continuously published to [NPM](https://www.npmjs.com/package/@warp-ds/elements) and [Eik](https://assets.finn.no/pkg/@warp-ds/elements) using a `next` tag (e.g. `2.2.0-next.13`).
|
package/dist/docs/affix/affix.md
CHANGED
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
|
|
6
6
|
|
|
7
|
-
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
|
|
8
|
-
|
|
9
7
|
## Usage
|
|
10
8
|
|
|
11
9
|
`w-affix` is typically used inside form controls to render prefix/suffix text or icon actions.
|
package/dist/docs/alert/alert.md
CHANGED
|
@@ -6,8 +6,6 @@ Alert is an inline component used for displaying different types of messages.
|
|
|
6
6
|
|
|
7
7
|
For accessibility reasons, alert should appear close to the element that triggered it.
|
|
8
8
|
|
|
9
|
-
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
|
|
10
|
-
|
|
11
9
|
## Usage
|
|
12
10
|
|
|
13
11
|
Alert is an inline component used for displaying different types of messages.
|
package/dist/docs/box/box.md
CHANGED
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
Box is a layout component used for separating content areas on a page.
|
|
6
6
|
|
|
7
|
-
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-box--docs)
|
|
8
|
-
|
|
9
7
|
## Usage
|
|
10
8
|
|
|
11
9
|
Box is a layout component for visually separating a section of content from the surrounding page.
|
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
Shows the navigation structure for the current page.
|
|
6
6
|
Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.
|
|
7
7
|
|
|
8
|
-
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-breadcrumbs--docs)
|
|
9
|
-
|
|
10
8
|
## Usage
|
|
11
9
|
|
|
12
10
|
Breadcrumbs show where the current page sits in a site hierarchy and let users move back to parent pages.
|
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
Performs an action or renders a link with button styling.
|
|
6
6
|
Use button variants to match action priority, risk, and context.
|
|
7
7
|
|
|
8
|
-
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
|
|
9
|
-
|
|
10
8
|
## Usage
|
|
11
9
|
|
|
12
10
|
Button is used for actions. Use it when the user can submit, save, confirm, cancel, open, close, or trigger something on the current page.
|
package/dist/docs/card/card.md
CHANGED
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
Card is a layout component used for separating content areas on a page.
|
|
6
6
|
|
|
7
|
-
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
|
|
8
|
-
|
|
9
7
|
## Usage
|
|
10
8
|
|
|
11
9
|
Card is a layout component for visually grouping related content as one item.
|
|
@@ -6,8 +6,6 @@ An input for dates.
|
|
|
6
6
|
|
|
7
7
|
Uses the `lang` attribute on either the element or on `<html>` to determine the locale options.
|
|
8
8
|
|
|
9
|
-
[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-datepicker--docs)
|
|
10
|
-
|
|
11
9
|
## Usage
|
|
12
10
|
|
|
13
11
|
Datepicker lets users type or choose a calendar date.
|
package/dist/docs/icon/icon.md
CHANGED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# Warp Elements Component Documentation
|
|
2
|
+
|
|
3
|
+
Generated by `pnpm build:docs`. This file indexes the Markdown documentation shipped with `@warp-ds/elements`.
|
|
4
|
+
|
|
5
|
+
- Package export: `@warp-ds/elements/docs`
|
|
6
|
+
- Component docs export pattern: `@warp-ds/elements/docs/<component>/<component>.md`
|
|
7
|
+
|
|
8
|
+
## Components
|
|
9
|
+
|
|
10
|
+
| Component | Element / API | Package | Summary | Docs |
|
|
11
|
+
|-|-|-|-|-|
|
|
12
|
+
| Affix | `<w-affix>` | `affix` | This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`. | [affix.md](./affix/affix.md) |
|
|
13
|
+
| Alert | `<w-alert>` | `alert` | 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. | [alert.md](./alert/alert.md) |
|
|
14
|
+
| Attention | `<w-attention>` | `attention` | Attention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights. The component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs. Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior. | [attention.md](./attention/attention.md) |
|
|
15
|
+
| Badge | `<w-badge>` | `badge` | `w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count. | [badge.md](./badge/badge.md) |
|
|
16
|
+
| Box | `<w-box>` | `box` | Box is a layout component used for separating content areas on a page. | [box.md](./box/box.md) |
|
|
17
|
+
| Breadcrumbs | `<w-breadcrumbs>` | `breadcrumbs` | Shows the navigation structure for the current page. Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation. | [breadcrumbs.md](./breadcrumbs/breadcrumbs.md) |
|
|
18
|
+
| Button | `<w-button>` | `button` | Performs an action or renders a link with button styling. Use button variants to match action priority, risk, and context. | [button.md](./button/button.md) |
|
|
19
|
+
| Card | `<w-card>` | `card` | Card is a layout component used for separating content areas on a page. | [card.md](./card/card.md) |
|
|
20
|
+
| Checkbox | `<w-checkbox>` | `checkbox` | Checkbox lets users select one or more options. Use it for independent yes/no choices, multi-select lists, and terms or consent confirmations. | [checkbox.md](./checkbox/checkbox.md) |
|
|
21
|
+
| Checkbox Group | `<w-checkbox-group>` | `checkbox-group` | Use `w-checkbox-group` when several checkboxes share one label, help text, optional indicator, or required validation. | [checkbox-group.md](./checkbox-group/checkbox-group.md) |
|
|
22
|
+
| Combobox | `<w-combobox>` | `combobox` | A combobox element for text input with selectable options. | [combobox.md](./combobox/combobox.md) |
|
|
23
|
+
| Datepicker | `<w-datepicker>` | `datepicker` | An input for dates. Uses the `lang` attribute on either the element or on `<html>` to determine the locale options. | [datepicker.md](./datepicker/datepicker.md) |
|
|
24
|
+
| Expandable | `<w-expandable>` | `expandable` | Expandable is a layout component used for creating expandable content areas on a page. | [expandable.md](./expandable/expandable.md) |
|
|
25
|
+
| Icon | `<w-icon>` | `icon` | See the Icons overview for a list of available icons. Icon names are case sensitive. | [icon.md](./icon/icon.md) |
|
|
26
|
+
| Link | `<w-link>` | `link` | Buttons are used to perform actions, with different visuals for different needs. | [link.md](./link/link.md) |
|
|
27
|
+
| Modal | `<w-modal>` | `modal` | Modals (or dialogs) display important information that users need to acknowledge. | [modal.md](./modal/modal.md) |
|
|
28
|
+
| Modal Footer | `<w-modal-footer>` | `modal-footer` | The footer section of a modal, typically where you place actions. | [modal-footer.md](./modal-footer/modal-footer.md) |
|
|
29
|
+
| Modal Header | `<w-modal-header>` | `modal-header` | The header section of a modal, typically where you place the title and a close button. | [modal-header.md](./modal-header/modal-header.md) |
|
|
30
|
+
| Page Indicator | `<w-page-indicator>` | `page-indicator` | A page indicator component that displays a series of dots representing pages. One dot is highlighted to indicate the currently selected page. | [page-indicator.md](./page-indicator/page-indicator.md) |
|
|
31
|
+
| Pagination | `<w-pagination>` | `pagination` | Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows. | [pagination.md](./pagination/pagination.md) |
|
|
32
|
+
| Pill | `<w-pill>` | `pill` | Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc. | [pill.md](./pill/pill.md) |
|
|
33
|
+
| Radio | `<w-radio>` | `radio` | A radio input typically consists of two components: | [radio.md](./radio/radio.md) |
|
|
34
|
+
| Radio Group | `<w-radio-group>` | `radio-group` | Radios allow users to select a single option from a list of choices. Use with `w-radio`. | [radio-group.md](./radio-group/radio-group.md) |
|
|
35
|
+
| Select | `<w-select>` | `select` | A dropdown component for selecting a single value. | [select.md](./select/select.md) |
|
|
36
|
+
| Slider | `<w-slider>` | `slider` | Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`. | [slider.md](./slider/slider.md) |
|
|
37
|
+
| Slider Thumb | `<w-slider-thumb>` | `slider-thumb` | Component to place inside a `<w-slider>`. | [slider-thumb.md](./slider-thumb/slider-thumb.md) |
|
|
38
|
+
| Step | `<w-step>` | `step` | Individual step component that shows a single step in a process | [step.md](./step/step.md) |
|
|
39
|
+
| Step Indicator | `<w-step-indicator>` | `step-indicator` | Steps are used to show progress through a process or to guide users through a multi-step task. | [step-indicator.md](./step-indicator/step-indicator.md) |
|
|
40
|
+
| Switch | `<w-switch>` | `switch` | The Switch component allows users to toggle between two states. | [switch.md](./switch/switch.md) |
|
|
41
|
+
| Tab | `<w-tab>` | `tab` | Individual tab component used within w-tabs container. | [tab.md](./tab/tab.md) |
|
|
42
|
+
| Tab Panel | `<w-tab-panel>` | `tab-panel` | Tab panel component that holds content for individual tabs. Each tab panel should have a name that matches a corresponding tab. | [tab-panel.md](./tab-panel/tab-panel.md) |
|
|
43
|
+
| Tabs | `<w-tabs>` | `tabs` | Tabs are used to organize content by grouping similar information on the same page. | [tabs.md](./tabs/tabs.md) |
|
|
44
|
+
| Textarea | `<w-textarea>` | `textarea` | A multi-line text input with built-in form validation, auto-resizing, and styling support. 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 | [textarea.md](./textarea/textarea.md) |
|
|
45
|
+
| Textfield | `<w-textfield>` | `textfield` | A single-line input component used for entering and editing textual or numeric data. | [textfield.md](./textfield/textfield.md) |
|
|
46
|
+
| Toast | `@warp-ds/elements/toast` | `toast` | Toasts are brief user feedback messages that overlay content. | [toast.md](./toast/toast.md) |
|
package/dist/docs/link/link.md
CHANGED
package/dist/docs/radio/radio.md
CHANGED
|
@@ -2685,7 +2685,7 @@ Please compile your catalog first.
|
|
|
2685
2685
|
left: anchor(--polyfilled-thumb left);
|
|
2686
2686
|
margin-left: 38px;
|
|
2687
2687
|
}
|
|
2688
|
-
`,await i({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(i){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:i}))}}let e=window.navigator.userAgent;/WebKit/.test(e)&&!/Chrome/.test(e)&&this.tooltipTarget&&this.tooltipTarget.style.setProperty("--transform-offset","var(--w-slider-thumb-size, 28px)"),m(this,d,ce).call(this)}get boundaryValue(){return this.slot==="from"?this.min:this.max}get textFieldDisplayValue(){var e;return this._inputHasFocus?this.value!==""?this.value:(e=this.range)!=null&&e.value?Math.min(Math.max(Number(this.range.value),Number(this.min)+1),Number(this.max)-1).toString():"":this.value}get tooltipDisplayValue(){var t,a;let e=0;return this.tooltipFormatter?e=this.tooltipFormatter(this.value,this.slot):this.valueFormatter?e=this.valueFormatter(this.value,this.slot):this.value===""?e=(a=(t=this.range)==null?void 0:t.value)!=null?a:this.boundaryValue:e=this.value||0,e}get ariaDescriptionText(){let e="",t=this.ariaDescription||"",a=this.value==="";return this.openEnded&&a&&(e=this.slot==="from"?C.t({id:"slider.placeholder.from",message:"Min"}):C.t({id:"slider.placeholder.to",message:"Max"})),e?`${e}, ${t}`:t}updated(e){e.has("openEnded")&&this.openEnded&&!this.placeholder&&(this.slot==="to"||this.slot===""?this.placeholder=C.t({id:"slider.placeholder.to",message:"Max",comment:"Max as in short for Maximum"}):this.slot==="from"&&(this.placeholder=C.t({id:"slider.placeholder.from",message:"Min",comment:"Min as in short for Minimum"}))),e.has("value")
|
|
2688
|
+
`,await i({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(i){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:i}))}}let e=window.navigator.userAgent;/WebKit/.test(e)&&!/Chrome/.test(e)&&this.tooltipTarget&&this.tooltipTarget.style.setProperty("--transform-offset","var(--w-slider-thumb-size, 28px)"),m(this,d,ce).call(this)}get boundaryValue(){return this.slot==="from"?this.min:this.max}get textFieldDisplayValue(){var e;return this._inputHasFocus?this.value!==""?this.value:(e=this.range)!=null&&e.value?Math.min(Math.max(Number(this.range.value),Number(this.min)+1),Number(this.max)-1).toString():"":this.value}get tooltipDisplayValue(){var t,a;let e=0;return this.tooltipFormatter?e=this.tooltipFormatter(this.value,this.slot):this.valueFormatter?e=this.valueFormatter(this.value,this.slot):this.value===""?e=(a=(t=this.range)==null?void 0:t.value)!=null?a:this.boundaryValue:e=this.value||0,e}get ariaDescriptionText(){let e="",t=this.ariaDescription||"",a=this.value==="";return this.openEnded&&a&&(e=this.slot==="from"?C.t({id:"slider.placeholder.from",message:"Min"}):C.t({id:"slider.placeholder.to",message:"Max"})),e?`${e}, ${t}`:t}updated(e){if(e.has("openEnded")&&this.openEnded&&!this.placeholder&&(this.slot==="to"||this.slot===""?this.placeholder=C.t({id:"slider.placeholder.to",message:"Max",comment:"Max as in short for Maximum"}):this.slot==="from"&&(this.placeholder=C.t({id:"slider.placeholder.from",message:"Min",comment:"Min as in short for Minimum"}))),e.has("value")){typeof re(this,T)=="undefined"&&typeof this.value!="undefined"&&oe(this,T,this.value),this.setValue(this.value),m(this,d,ce).call(this);let t=e.get("value");this.value===""&&t&&this.dispatchEvent(new CustomEvent("thumbreset",{bubbles:!0}))}}render(){var t,a,i,n;let e=this.placeholder&&!this.value;return q`
|
|
2689
2689
|
<div class="w-slider-thumb">
|
|
2690
2690
|
${"anchorName"in document.documentElement.style?L:q`<div class="polyfill-range">
|
|
2691
2691
|
<div class="polyfill-active-range"></div>
|