@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.22

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 
 import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
 import type { WarpAlert } from "./packages/alert/index.ts";
+import type { WarpLink } from "./packages/link/index.ts";
+import type { ccButton, WarpButton } from "./packages/button/index.ts";
 import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
 import type { WarpBadge } from "./packages/badge/index.ts";
 import type { WarpBox } from "./packages/box/index.ts";
 import type { ccBreadcrumbs, WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
-import type { WarpLink } from "./packages/link/index.ts";
-import type { ccButton, WarpButton } from "./packages/button/index.ts";
 import type { ccCard, WarpCard } from "./packages/card/index.ts";
 import type { ccCombobox, WarpCombobox } from "./packages/combobox/index.ts";
 import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
@@ -27,9 +27,10 @@ import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
 import type { WarpSlider } from "./packages/slider/slider.ts";
 import type { WarpSteps, WarpStep } from "./packages/steps/index.ts";
 import type { WarpSwitch } from "./packages/switch/index.ts";
-import type { WarpTabs } from "./packages/tabs/tabs.ts";
 import type { WarpTab } from "./packages/tabs/tab.ts";
 import type { WarpTabPanel } from "./packages/tabs/tab-panel.ts";
+import type { WarpTabs } from "./packages/tabs/tabs.ts";
+import type { WarpToastContainer } from "./packages/toast/toast-container.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -142,6 +143,78 @@ export type WarpAlertProps = {
 }
 
 
+export type WarpLinkProps = {
+  /**  */
+  "autofocus"?: WarpLink['autofocus'];
+  /**  */
+  "variant"?: WarpLink['variant'];
+  /**  */
+  "quiet"?: WarpLink['quiet'];
+  /**  */
+  "small"?: WarpLink['small'];
+  /**  */
+  "href"?: WarpLink['href'];
+  /**  */
+  "disabled"?: WarpLink['disabled'];
+  /**  */
+  "target"?: WarpLink['target'];
+  /**  */
+  "rel"?: WarpLink['rel'];
+  /**  */
+  "full-width"?: WarpLink['fullWidth'];
+  /**  */
+  "fullWidth"?: WarpLink['fullWidth'];
+  /**  */
+  "button-class"?: WarpLink['buttonClass'];
+  /**  */
+  "buttonClass"?: WarpLink['buttonClass'];
+  /**  */
+  "name"?: WarpLink['name'];
+  /**  */
+  "classes"?: WarpLink['classes'];
+
+
+}
+
+
+export type WarpButtonProps = {
+  /**  */
+  "type"?: WarpButton['type'];
+  /**  */
+  "autofocus"?: WarpButton['autofocus'];
+  /**  */
+  "variant"?: WarpButton['variant'];
+  /**  */
+  "quiet"?: WarpButton['quiet'];
+  /**  */
+  "small"?: WarpButton['small'];
+  /**  */
+  "loading"?: WarpButton['loading'];
+  /**  */
+  "href"?: WarpButton['href'];
+  /**  */
+  "target"?: WarpButton['target'];
+  /**  */
+  "rel"?: WarpButton['rel'];
+  /**  */
+  "full-width"?: WarpButton['fullWidth'];
+  /**  */
+  "fullWidth"?: WarpButton['fullWidth'];
+  /**  */
+  "button-class"?: WarpButton['buttonClass'];
+  /**  */
+  "buttonClass"?: WarpButton['buttonClass'];
+  /**  */
+  "name"?: WarpButton['name'];
+  /**  */
+  "value"?: WarpButton['value'];
+  /**  */
+  "ariaValueTextLoading"?: WarpButton['ariaValueTextLoading'];
+
+
+}
+
+
 export type WarpAttentionProps = {
   /**  */
   "show"?: WarpAttention['show'];
@@ -222,78 +295,6 @@ export type WarpBreadcrumbsProps = {
 }
 
 
-export type WarpLinkProps = {
-  /**  */
-  "autofocus"?: WarpLink['autofocus'];
-  /**  */
-  "variant"?: WarpLink['variant'];
-  /**  */
-  "quiet"?: WarpLink['quiet'];
-  /**  */
-  "small"?: WarpLink['small'];
-  /**  */
-  "href"?: WarpLink['href'];
-  /**  */
-  "disabled"?: WarpLink['disabled'];
-  /**  */
-  "target"?: WarpLink['target'];
-  /**  */
-  "rel"?: WarpLink['rel'];
-  /**  */
-  "full-width"?: WarpLink['fullWidth'];
-  /**  */
-  "fullWidth"?: WarpLink['fullWidth'];
-  /**  */
-  "button-class"?: WarpLink['buttonClass'];
-  /**  */
-  "buttonClass"?: WarpLink['buttonClass'];
-  /**  */
-  "name"?: WarpLink['name'];
-  /**  */
-  "classes"?: WarpLink['classes'];
-
-
-}
-
-
-export type WarpButtonProps = {
-  /**  */
-  "type"?: WarpButton['type'];
-  /**  */
-  "autofocus"?: WarpButton['autofocus'];
-  /**  */
-  "variant"?: WarpButton['variant'];
-  /**  */
-  "quiet"?: WarpButton['quiet'];
-  /**  */
-  "small"?: WarpButton['small'];
-  /**  */
-  "loading"?: WarpButton['loading'];
-  /**  */
-  "href"?: WarpButton['href'];
-  /**  */
-  "target"?: WarpButton['target'];
-  /**  */
-  "rel"?: WarpButton['rel'];
-  /**  */
-  "full-width"?: WarpButton['fullWidth'];
-  /**  */
-  "fullWidth"?: WarpButton['fullWidth'];
-  /**  */
-  "button-class"?: WarpButton['buttonClass'];
-  /**  */
-  "buttonClass"?: WarpButton['buttonClass'];
-  /**  */
-  "name"?: WarpButton['name'];
-  /**  */
-  "value"?: WarpButton['value'];
-  /**  */
-  "ariaValueTextLoading"?: WarpButton['ariaValueTextLoading'];
-
-
-}
-
-
 export type WarpCardProps = {
   /**  */
   "selected"?: WarpCard['selected'];
@@ -707,8 +708,6 @@ export type WarpSelectProps = {
   /** Renders the field in a readonly state. */
   "readOnly"?: WarpSelect['readOnly'];
   /**  */
-  "_options"?: WarpSelect['_options'];
-  /**  */
   "name"?: WarpSelect['name'];
   /**  */
   "value"?: WarpSelect['value'];
@@ -873,19 +872,6 @@ export type WarpSwitchProps = {
 }
 
 
-export type WarpTabsProps = {
-  /**  */
-  "active"?: WarpTabs['active'];
-  /**  */
-  "tab-class"?: WarpTabs['tabClass'];
-  /**  */
-  "tabClass"?: WarpTabs['tabClass'];
-
-  /**  */
-  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
-}
-
-
 export type WarpTabProps = {
   /**  */
   "name"?: WarpTab['name'];
@@ -911,6 +897,25 @@ export type WarpTabPanelProps = {
   "hidden"?: WarpTabPanel['hidden'];
 
 
+}
+
+
+export type WarpTabsProps = {
+  /**  */
+  "active"?: WarpTabs['active'];
+  /**  */
+  "tab-class"?: WarpTabs['tabClass'];
+  /**  */
+  "tabClass"?: WarpTabs['tabClass'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type WarpToastContainerProps = {
+
+
 }
 
   export type CustomElements = {
@@ -955,6 +960,58 @@ export type WarpTabPanelProps = {
     "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
 
 
+  /**
+     * Buttons are used to perform actions, with different visuals for different needs.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `autofocus`: undefined 
+ * - `variant`: undefined 
+ * - `quiet`: undefined 
+ * - `small`: undefined 
+ * - `href`: undefined 
+ * - `disabled`: undefined 
+ * - `target`: undefined 
+ * - `rel`: undefined 
+ * - `full-width`/`fullWidth`: undefined 
+ * - `button-class`/`buttonClass`: undefined 
+ * - `name`: undefined 
+ * - `classes`: undefined (property only)
+  */
+    "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
+
+
+  /**
+     * Buttons are used to perform actions, widh different visuals for different needs.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `type`: undefined 
+ * - `autofocus`: undefined 
+ * - `variant`: undefined 
+ * - `quiet`: undefined 
+ * - `small`: undefined 
+ * - `loading`: undefined 
+ * - `href`: undefined 
+ * - `target`: undefined 
+ * - `rel`: undefined 
+ * - `full-width`/`fullWidth`: undefined 
+ * - `button-class`/`buttonClass`: undefined 
+ * - `name`: undefined 
+ * - `value`: undefined 
+ * - `ariaValueTextLoading`: undefined (property only)
+  */
+    "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
+
+
   /**
      * 
  * 
@@ -1040,58 +1097,6 @@ export type WarpTabPanelProps = {
     "w-breadcrumbs": Partial<WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents>;
 
 
-  /**
-     * Buttons are used to perform actions, with different visuals for different needs.
- * 
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `autofocus`: undefined 
- * - `variant`: undefined 
- * - `quiet`: undefined 
- * - `small`: undefined 
- * - `href`: undefined 
- * - `disabled`: undefined 
- * - `target`: undefined 
- * - `rel`: undefined 
- * - `full-width`/`fullWidth`: undefined 
- * - `button-class`/`buttonClass`: undefined 
- * - `name`: undefined 
- * - `classes`: undefined (property only)
-  */
-    "w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
-
-
-  /**
-     * Buttons are used to perform actions, widh different visuals for different needs.
- * 
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `type`: undefined 
- * - `autofocus`: undefined 
- * - `variant`: undefined 
- * - `quiet`: undefined 
- * - `small`: undefined 
- * - `loading`: undefined 
- * - `href`: undefined 
- * - `target`: undefined 
- * - `rel`: undefined 
- * - `full-width`/`fullWidth`: undefined 
- * - `button-class`/`buttonClass`: undefined 
- * - `name`: undefined 
- * - `value`: undefined 
- * - `ariaValueTextLoading`: undefined (property only)
-  */
-    "w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
-
-
   /**
      * Card is a layout component used for separating content areas on a page.
  * 
@@ -1528,7 +1533,6 @@ export type WarpTabPanelProps = {
  * - `optional`: Whether to show optional text 
  * - `disabled`: Renders the field in a disabled state. 
  * - `read-only`/`readOnly`: Renders the field in a readonly state. 
- * - `_options`: undefined 
  * - `name`: undefined 
  * - `value`: undefined 
  * 
@@ -1717,7 +1721,7 @@ export type WarpTabPanelProps = {
 
 
   /**
-     * Tabs are used to organize content by grouping similar information on the same page.
+     * Individual tab component used within w-tabs container.
  * 
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
  * 
@@ -1725,20 +1729,18 @@ export type WarpTabPanelProps = {
  * 
  * Component attributes and properties that can be applied to the element or by using JavaScript.
  * 
+ * - `name`: undefined 
+ * - `label`: undefined 
  * - `active`: undefined 
+ * - `over`: undefined 
  * - `tab-class`/`tabClass`: undefined 
- * 
- * ## Events
- * 
- * Events that will be emitted by the component.
- * 
- * - `change`: undefined
   */
-    "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
+    "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
 
 
   /**
-     * Individual tab component used within w-tabs container.
+     * Tab panel component that holds content for individual tabs.
+ * Each tab panel should have a name that matches a corresponding tab.
  * 
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
  * 
@@ -1747,17 +1749,13 @@ export type WarpTabPanelProps = {
  * Component attributes and properties that can be applied to the element or by using JavaScript.
  * 
  * - `name`: undefined 
- * - `label`: undefined 
- * - `active`: undefined 
- * - `over`: undefined 
- * - `tab-class`/`tabClass`: undefined 
+ * - `hidden`: undefined 
   */
-    "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
+    "w-tab-panel": Partial<WarpTabPanelProps & BaseProps<WarpTabPanel> & BaseEvents>;
 
 
   /**
-     * Tab panel component that holds content for individual tabs.
- * Each tab panel should have a name that matches a corresponding tab.
+     * Tabs are used to organize content by grouping similar information on the same page.
  * 
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
  * 
@@ -1765,10 +1763,33 @@ export type WarpTabPanelProps = {
  * 
  * Component attributes and properties that can be applied to the element or by using JavaScript.
  * 
- * - `name`: undefined 
- * - `hidden`: undefined 
+ * - `active`: undefined 
+ * - `tab-class`/`tabClass`: undefined 
+ * - `tabs`: undefined (property only) (readonly)
+ * - `activeTab`: undefined (property only) (readonly)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
   */
-    "w-tab-panel": Partial<WarpTabPanelProps & BaseProps<WarpTabPanel> & BaseEvents>;
+    "w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `init() => void`: undefined
+ * - `get(id: string | number) => ToastInternal | undefined`: undefined
+ * - `set(toast: ToastOptions) => Map<string | number, ToastInternal>`: undefined
+ * - `del(id: string | number) => Promise<boolean>`: undefined
+  */
+    "w-toast-container": Partial<WarpToastContainerProps & BaseProps<WarpToastContainer> & BaseEvents>;
   }
 
 export type CustomCssProperties = {

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

@@ -0,0 +1,9 @@
+import { StoryObj } from '@storybook/react';
+import { Affix } from './react';
+declare const _default: {
+    title: string;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpAffix, {}>;
+};
+export default _default;
+export type Story = StoryObj<typeof Affix>;
+export declare const Default: Story;

package/dist/packages/affix/affix.react.stories.js

@@ -0,0 +1,10 @@
+import { Affix } from './react';
+export default {
+    title: 'Forms/Affix',
+    component: Affix,
+};
+export const Default = {
+    args: {
+        label: 'kr',
+    },
+};

package/dist/packages/affix/affix.stories.js

@@ -1,6 +1,6 @@
-import { html } from 'lit';
 import { spread } from '@open-wc/lit-helpers';
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
 import { prespread } from '../../.storybook/utilities.js';
 import './index.js';
 const { events, args, argTypes } = getStorybookHelpers('w-affix');

package/dist/packages/affix/index.js

@@ -1,5 +1,5 @@
 var be=Object.create;var S=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var R=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var he=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of pe(e))!ge.call(r,a)&&a!==o&&S(r,a,{get:()=>e[a],enumerable:!(t=A(e,a))||t.enumerable});return r};var me=(r,e,o)=>(o=r!=null?be(ue(r)):{},he(e||!r||!r.__esModule?S(o,"default",{value:r,enumerable:!0}):o,r));var x=(r,e,o,t)=>{for(var a=t>1?void 0:t?A(e,o):e,s=r.length-1,i;s>=0;s--)(i=r[s])&&(a=(t?i(e,o,a):i(a))||a);return t&&a&&S(e,o,a),a};var H=R(v=>{"use strict";Object.defineProperty(v,"__esModule",{value:!0});v.errorMessages=v.ErrorType=void 0;var w;(function(r){r.MalformedUnicode="MALFORMED_UNICODE",r.MalformedHexadecimal="MALFORMED_HEXADECIMAL",r.CodePointLimit="CODE_POINT_LIMIT",r.OctalDeprecation="OCTAL_DEPRECATION",r.EndOfString="END_OF_STRING"})(w=v.ErrorType||(v.ErrorType={}));v.errorMessages=new Map([[w.MalformedUnicode,"malformed Unicode character escape sequence"],[w.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[w.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[w.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[w.EndOfString,"malformed escape sequence at end of string"]])});var K=R(p=>{"use strict";Object.defineProperty(p,"__esModule",{value:!0});p.unraw=p.errorMessages=p.ErrorType=void 0;var c=H();Object.defineProperty(p,"ErrorType",{enumerable:!0,get:function(){return c.ErrorType}});Object.defineProperty(p,"errorMessages",{enumerable:!0,get:function(){return c.errorMessages}});function fe(r){return!r.match(/[^a-f0-9]/i)?parseInt(r,16):NaN}function _(r,e,o){let t=fe(r);if(Number.isNaN(t)||o!==void 0&&o!==r.length)throw new SyntaxError(c.errorMessages.get(e));return t}function we(r){let e=_(r,c.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function J(r,e){let o=_(r,c.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=_(e,c.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,t)}return String.fromCharCode(o)}function xe(r){return r.charAt(0)==="{"&&r.charAt(r.length-1)==="}"}function ke(r){if(!xe(r))throw new SyntaxError(c.errorMessages.get(c.ErrorType.MalformedUnicode));let e=r.slice(1,-1),o=_(e,c.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(t){throw t instanceof RangeError?new SyntaxError(c.errorMessages.get(c.ErrorType.CodePointLimit)):t}}function ye(r,e=!1){if(e)throw new SyntaxError(c.errorMessages.get(c.ErrorType.OctalDeprecation));let o=parseInt(r,8);return String.fromCharCode(o)}var _e=new Map([["b","\b"],["f","\f"],["n",`
-`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function ze(r){return _e.get(r)||r}var Ee=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function q(r,e=!1){return r.replace(Ee,function(o,t,a,s,i,n,l,d,h){if(t!==void 0)return"\\";if(a!==void 0)return we(a);if(s!==void 0)return ke(s);if(i!==void 0)return J(i,n);if(l!==void 0)return J(l);if(d==="0")return"\0";if(d!==void 0)return ye(d,!e);if(h!==void 0)return ze(h);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=q;p.default=q});import{html as L,LitElement as cr}from"lit";var N=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?N.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{property as C}from"lit/decorators.js";import{ifDefined as le}from"lit/directives/if-defined.js";import{css as U}from"lit";var X=U`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function ze(r){return _e.get(r)||r}var Ee=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function q(r,e=!1){return r.replace(Ee,function(o,t,a,s,i,n,l,d,h){if(t!==void 0)return"\\";if(a!==void 0)return we(a);if(s!==void 0)return ke(s);if(i!==void 0)return J(i,n);if(l!==void 0)return J(l);if(d==="0")return"\0";if(d!==void 0)return ye(d,!e);if(h!==void 0)return ze(h);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=q;p.default=q});var N=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?N.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{html as L,LitElement as cr}from"lit";import{property as C}from"lit/decorators.js";import{ifDefined as le}from"lit/directives/if-defined.js";import{css as U}from"lit";var X=U`
   *,
   :before,
   :after {