@warp-ds/elements 2.10.0 → 2.11.0-next.1

package/dist/packages/affix/affix.react.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react";
 import { Affix } from "./react";
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").HTMLAttributes<import("./affix").WarpAffix>, "form" | "label" | "search" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "clear" | "icon" | "_wrapperClasses" | "resetContainingTextField" | "submitContainingForm" | "_searchButton" | "_clearButton" | "_icon" | "_text" | "_markup"> & {} & Partial<Omit<import("./affix").WarpAffix, keyof HTMLElement>> & import("react").RefAttributes<import("./affix").WarpAffix>, "ref">, "aria-label"> & {
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").HTMLAttributes<import("./affix").WarpAffix>, "label" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "resetFormControl" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "search" | "clear" | "icon" | "_wrapperClasses" | "resetContainingTextField" | "submitContainingForm" | "_searchButton" | "_clearButton" | "_icon" | "_text" | "_markup"> & {} & Partial<Omit<import("./affix").WarpAffix, keyof HTMLElement>> & import("react").RefAttributes<import("./affix").WarpAffix>, "ref">, "aria-label"> & {
         ariaLabel?: string | null;
     } & import("react").RefAttributes<import("./affix").WarpAffix>>;
 };

package/dist/packages/affix/react.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
-import { WarpAffix } from "./affix.js";
-export declare const Affix: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpAffix>, "form" | "label" | "search" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "clear" | "icon" | "_wrapperClasses" | "resetContainingTextField" | "submitContainingForm" | "_searchButton" | "_clearButton" | "_icon" | "_text" | "_markup"> & {} & Partial<Omit<WarpAffix, keyof HTMLElement>> & React.RefAttributes<WarpAffix>, "ref">, "aria-label"> & {
+import type { WarpAffix } from "./affix.js";
+/**
+ * This component is usually used in other components like form elements to show a prefix or suffix. See for example `TextField`.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)
+ */
+export declare const Affix: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpAffix>, "label" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "resetFormControl" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "search" | "clear" | "icon" | "_wrapperClasses" | "resetContainingTextField" | "submitContainingForm" | "_searchButton" | "_clearButton" | "_icon" | "_text" | "_markup"> & {} & Partial<Omit<WarpAffix, keyof HTMLElement>> & React.RefAttributes<WarpAffix>, "ref">, "aria-label"> & {
     ariaLabel?: string | null;
 } & React.RefAttributes<WarpAffix>>;

package/dist/packages/affix/react.js

@@ -13,6 +13,11 @@ const BaseAffix = createComponent({
     elementClass: Component,
     react: React,
 });
+/**
+ * This component is usually used in other components like form elements to show a prefix or suffix. See for example `TextField`.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)
+ */
 export const Affix = React.forwardRef(({ ariaLabel, ...props }, ref) => React.createElement(BaseAffix, {
     ...props,
     ...(ariaLabel !== undefined ? { "aria-label": ariaLabel } : {}),

package/dist/packages/alert/alert.d.ts

@@ -4,9 +4,7 @@ export type AlertVariants = "negative" | "positive" | "warning" | "info";
 /**
  * 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)
+ * [Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)
  */
 declare class WarpAlert extends LitElement {
     private _internals;
@@ -39,4 +37,9 @@ declare class WarpAlert extends LitElement {
     get _icon(): "" | import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-alert": WarpAlert;
+    }
+}
 export { WarpAlert };

package/dist/packages/alert/alert.js

@@ -1,4 +1,4 @@
-var E=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var i=(o,t,e,r)=>{for(var a=r>1?void 0:r?M(t,e):t,l=o.length-1,v;l>=0;l--)(v=o[l])&&(a=(r?v(t,e,a):v(a))||a);return r&&a&&E(t,e,a),a};var p=function(){for(var o=[],t=arguments.length;t--;)o[t]=arguments[t];return o.reduce(function(e,r){return e.concat(typeof r=="string"?r:Array.isArray(r)?p.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(a){return r[a]?a:""}):"")},[]).join(" ")};import{css as F,html as c,LitElement as N}from"lit";import{property as m}from"lit/decorators.js";import{html as Y,LitElement as L}from"lit";import{property as u,state as S}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{css as _}from"lit";var f=_`
+var E=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var i=(o,t,e,r)=>{for(var a=r>1?void 0:r?M(t,e):t,l=o.length-1,v;l>=0;l--)(v=o[l])&&(a=(r?v(t,e,a):v(a))||a);return r&&a&&E(t,e,a),a};var p=function(){for(var o=[],t=arguments.length;t--;)o[t]=arguments[t];return o.reduce(function(e,r){return e.concat(typeof r=="string"?r:Array.isArray(r)?p.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(a){return r[a]?a:""}):"")},[]).join(" ")};import{css as F,html as c,LitElement as N}from"lit";import{property as m}from"lit/decorators.js";import{html as L,LitElement as Y}from"lit";import{property as u,state as S}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{css as _}from"lit";var f=_`
 	:host {
 		display: inline-block;
 	}
@@ -22,13 +22,13 @@ var E=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var i=(o,t,e,r
 	.w-icon--l {
 		--w-icon-size: 32px;
 	}
-`;var h=new Map,j='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function $(o,t={}){let e=t.responseParser??(r=>r.text());return h.has(o)||h.set(o,fetch(o).then(e)),h.get(o)}var n=class extends L{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(e){let r=`https://assets.finn.no/pkg/eikons/~1/${this.locale}/${e}.svg`;try{let a=await $(r);return new DOMParser().parseFromString(a,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(j,"text/html").body.firstElementChild),this.svg=e}render(){let e=this.size||"medium",r=this.name||"",a={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},l=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return Y`<div
+`;var h=new Map,T='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function j(o,t={}){let e=t.responseParser??(r=>r.text());return h.has(o)||h.set(o,fetch(o).then(e)),h.get(o)}var n=class extends Y{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(e){let r=`https://assets.finn.no/pkg/eikons/~1/${this.locale}/${e}.svg`;try{let a=await j(r);return new DOMParser().parseFromString(a,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(T,"text/html").body.firstElementChild),this.svg=e}render(){let e=this.size||"medium",r=this.name||"",a={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},l=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return L`<div
 			class="${C(a)}"
 			style="${l}"
 			part="w-${r.toLowerCase()}"
 		>
 			${this.svg}
-		</div>`}};n.styles=[f],i([u({type:String,reflect:!0})],n.prototype,"name",2),i([u({type:String,reflect:!0})],n.prototype,"size",2),i([u({type:String,reflect:!0,useDefault:!0})],n.prototype,"locale",2),i([S()],n.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",n);var T=["en","nb","fi","da","sv"],w="en",g=o=>T.find(t=>o===t||o.toLowerCase().includes(t))||w;function k(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return g(o)}try{let o=x(document);if(o)return g(o);let t=P();if(t)return g(t);let e=x(I());return e?g(e):w}catch(o){return console.warn("could not detect locale, falling back to source locale",o),w}}function I(){try{return window.parent?.document??null}catch{return null}}function x(o){try{return o?.documentElement?.lang??""}catch{return""}}function P(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as X}from"lit";import{unsafeCSS as Z}from"lit";var y=X`
+		</div>`}};n.styles=[f],i([u({type:String,reflect:!0})],n.prototype,"name",2),i([u({type:String,reflect:!0})],n.prototype,"size",2),i([u({type:String,reflect:!0,useDefault:!0})],n.prototype,"locale",2),i([S()],n.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",n);var $=["en","nb","fi","da","sv"],w="en",g=o=>$.find(t=>o===t||o.toLowerCase().includes(t))||w;function k(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return g(o)}try{let o=x(document);if(o)return g(o);let t=P();if(t)return g(t);let e=x(I());return e?g(e):w}catch(o){return console.warn("could not detect locale, falling back to source locale",o),w}}function I(){try{return window.parent?.document??null}catch{return null}}function x(o){try{return o?.documentElement?.lang??""}catch{return""}}function P(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as X}from"lit";import{unsafeCSS as Z}from"lit";var y=X`
 	*,
 	:before,
 	:after {