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

package/dist/docs/toast/toast.md

@@ -0,0 +1,150 @@
+# Toast
+
+## Description
+
+Toasts are brief user feedback messages that overlay content.
+
+## Usage
+
+You should not use the toast components directly. Instead use the JavaScript API exported from Warp Elements to create, update and remove toasts
+
+<style-isolate id="toast-usage">
+    <w-button id="toast-btn" onclick="toast('Toasts are somewhat of an anti-pattern')">Show toast</w-button>
+</style-isolate>
+
+
+```js
+import { toast } from '@warp-ds/elements/toast';
+
+const showBtn = document.getElementById("toast-btn");
+showBtn.onclick = () => {
+    toast("Toasts are somewhat of an anti-pattern");
+};
+```
+
+### Dismissable toast
+
+The toast automatically closes by default, so you don't need to have a close button.
+
+From an accessibility perspective, toasts should never contain interactive elements such as close buttons, as interactive elements should always appear in the same location as the action that triggered them.
+
+It might be tempting to use this option and a high duration if you have a warning or error toast to "solve" the WCAG 2 success criteria 2.2.1, but please consider showing warnings and errors as a persistent [Alert](/docs/components/alert/overview) instead.
+
+If the toast absolutely must be dismissible by the user, set the `canclose` property to `true`.
+
+```js
+toast('message goes here', { type: 'success', canclose: true });
+```
+
+## Accessibility
+
+From an accessibility perspective, toasts should never contain interactive elements, as these should always appear in the same location as the action that triggered them.
+
+Auto-clearing toasts based on a timeout violate WCAG 2 success criteria 2.2.1, unless the information they contain is either redundant (i.e. also available elsewhere in a persistent manner) or insignificant to all people.
+
+You are also advised to avoid putting information in a toast that cannot be re-accessed in any other way due to the impermanent nature of the current toast implementation.
+
+Because of these points we consider the use of toasts to be somewhat of an anti-pattern, and recommend exploring alternative approaches wherever possible. That said, you may still use toasts, as long as you avoid interactive elements like links or close buttons.
+
+## Examples
+
+### Success / positive
+
+This is the default.
+
+<style-isolate id="toast-usage">
+    <w-button id="toast-btn" onclick="toast('Toasts are somewhat of an anti-pattern')">Show a success toast</w-button>
+</style-isolate>
+
+### Warning
+
+If the user should be warned about something, a toast is probably not the right way to do so. Consider an [Alert](/docs/components/alert/overview) instead.
+
+A toast is easy to miss, especially on larger screens. Toasts that automatically close are also an accessibility problem if the information is not available elsewhere, or is insignificant (which shouldn't be the case for warnings).
+
+<style-isolate id="toast-usage">
+    <w-button id="toast-btn" onclick="toast('Toasts are somewhat of an anti-pattern', { type: 'warning' })">Show a warning toast</w-button>
+</style-isolate>
+
+### Error / negative
+
+If the user should be told about an error, a toast is probably not the right way to do so. Consider an [Alert](/docs/components/alert/overview) instead.
+
+A toast is easy to miss, especially on larger screens. Toasts that automatically close are also an accessibility problem if the information is not available elsewhere, or is insignificant (which shouldn't be the case for errors).
+
+<style-isolate id="toast-usage">
+    <w-button id="toast-btn" onclick="toast('Toasts are somewhat of an anti-pattern', { type: 'error' })">Show an error toast</w-button>
+</style-isolate>
+
+## API Documentation
+
+### toast
+
+```js
+import { toast } from '@warp-ds/elements/toast';
+
+const theToast = toast('Toasts are somewhat of an anti-pattern');
+```
+
+Returns [ToastOptions](#toastoptions), which includes the ID you need for [updateToast](#updatetoast) and [removeToast](#removetoast).
+
+If you can't pass the result from `toast` to where you call `updateToast` or `removeToast` you can set a known ID manually.
+
+```js
+toast('Toasts are somewhat of an anti-pattern', {
+    id: 'something-unique-but-stable',
+});
+```
+
+| Parameter | Type |  Summary |
+| --- | --- | --- |
+| message | `string` | The text content |
+| options | [ToastOptions](#toastoptions) (optional) | |
+
+
+### updateToast
+
+```js
+import { toast, updateToast } from '@warp-ds/elements/toast';
+
+const theToast = toast('The toast function returns an ID');
+
+updateToast(theToast.id, 'Use it to update the text');
+```
+
+Returns [ToastOptions](#toastoptions).
+
+| Parameter | Type |  Summary |
+| --- | --- | --- |
+| id |  `string` | The ID of the toast you want to update |
+| message | `string` | The new text content |
+| options | [ToastOptions](#toastoptions) (optional) | |
+
+### removeToast
+
+Toasts disappear after a set time, but if you need to remove one before that happens you can do so.
+
+```js
+import { toast, removeToast } from '@warp-ds/elements/toast';
+
+const theToast = toast('The toast function returns an ID');
+
+removeToast(theToast.id);
+```
+
+### Types
+
+#### ToastOptions
+
+| Name | Type | Default | Summary |
+| --- | --- | --- | --- |
+| id | `string` | Random | Random generated unique ID for the toast element |
+| type | [`ToastVariants`](#toastvariants) | `'success'` | Visual style of the toast |
+| text | `string` | `-` | The given toast message |
+| duration | `number` | `5000` | Duration of toast in milliseconds |
+| canclose | `boolean` | `false` | See [Dismissable toast](#dismissable-toast) |
+
+#### ToastVariants
+
+`'success' | 'warning' | 'error'`
+

package/dist/docs/toast/usage.md

@@ -0,0 +1,31 @@
+## Usage
+
+You should not use the toast components directly. Instead use the JavaScript API exported from Warp Elements to create, update and remove toasts
+
+<style-isolate id="toast-usage">
+    <w-button id="toast-btn" onclick="toast('Toasts are somewhat of an anti-pattern')">Show toast</w-button>
+</style-isolate>
+
+
+```js
+import { toast } from '@warp-ds/elements/toast';
+
+const showBtn = document.getElementById("toast-btn");
+showBtn.onclick = () => {
+    toast("Toasts are somewhat of an anti-pattern");
+};
+```
+
+### Dismissable toast
+
+The toast automatically closes by default, so you don't need to have a close button.
+
+From an accessibility perspective, toasts should never contain interactive elements such as close buttons, as interactive elements should always appear in the same location as the action that triggered them.
+
+It might be tempting to use this option and a high duration if you have a warning or error toast to "solve" the WCAG 2 success criteria 2.2.1, but please consider showing warnings and errors as a persistent [Alert](/docs/components/alert/overview) instead.
+
+If the toast absolutely must be dismissible by the user, set the `canclose` property to `true`.
+
+```js
+toast('message goes here', { type: 'success', canclose: true });
+```

package/dist/index.d.ts

@@ -32,7 +32,6 @@ import type { WarpTab } from "./packages/tab/tab.ts";
 import type { WarpTabPanel } from "./packages/tab-panel/tab-panel.ts";
 import type { WarpTabs } from "./packages/tabs/tabs.ts";
 import type { WarpTextarea } from "./packages/textarea/textarea.ts";
-import type { WarpToastContainer } from "./packages/toast-container/toast-container.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -715,9 +714,7 @@ The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/form
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   dayFormat?: WarpDatepicker["dayFormat"];
-  /** Lets you control if a date in the calendar should be disabled.
-
-This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
+  /**  */
   isDayDisabled?: WarpDatepicker["isDayDisabled"];
   /**  */
   isCalendarOpen?: WarpDatepicker["isCalendarOpen"];
@@ -776,9 +773,7 @@ The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/form
 
 The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format). */
   "prop:dayFormat"?: WarpDatepicker["dayFormat"];
-  /** Lets you control if a date in the calendar should be disabled.
-
-This needs to be set on the element instance in JavaScript, not as an HTML attribute. */
+  /**  */
   "prop:isDayDisabled"?: WarpDatepicker["isDayDisabled"];
   /**  */
   "prop:isCalendarOpen"?: WarpDatepicker["isCalendarOpen"];
@@ -1247,6 +1242,8 @@ export type WarpSelectProps = {
   name?: WarpSelect["name"];
   /**  */
   value?: WarpSelect["value"];
+  /**  */
+  _options?: WarpSelect["_options"];
 
   /**  */
   onchange?: (e: CustomEvent) => void;
@@ -1286,6 +1283,8 @@ export type WarpSelectSolidJsProps = {
   /**  */
   "prop:value"?: WarpSelect["value"];
   /**  */
+  "prop:_options"?: WarpSelect["_options"];
+  /**  */
   "on:change"?: (e: CustomEvent) => void;
 
   /** Set the innerHTML of the element */
@@ -1343,14 +1342,12 @@ export type WarpTextFieldProps = {
   step?: WarpTextField["step"];
   /**  */
   autocomplete?: WarpTextField["autocomplete"];
-  /** Function to format value when the input field.
-
-Only active when the input field does not have focus,
-similar to the accessible input masking example from Filament Group
-
-https://css-tricks.com/input-masking/
-https://filamentgroup.github.io/politespace/demo/demo.html */
+  /**  */
   formatter?: WarpTextField["formatter"];
+  /**  */
+  _hasPrefix?: WarpTextField["_hasPrefix"];
+  /**  */
+  _hasSuffix?: WarpTextField["_hasSuffix"];
 };
 
 export type WarpTextFieldSolidJsProps = {
@@ -1402,14 +1399,12 @@ export type WarpTextFieldSolidJsProps = {
   "prop:step"?: WarpTextField["step"];
   /**  */
   "prop:autocomplete"?: WarpTextField["autocomplete"];
-  /** Function to format value when the input field.
-
-Only active when the input field does not have focus,
-similar to the accessible input masking example from Filament Group
-
-https://css-tricks.com/input-masking/
-https://filamentgroup.github.io/politespace/demo/demo.html */
+  /**  */
   "prop:formatter"?: WarpTextField["formatter"];
+  /**  */
+  "prop:_hasPrefix"?: WarpTextField["_hasPrefix"];
+  /**  */
+  "prop:_hasSuffix"?: WarpTextField["_hasSuffix"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1438,6 +1433,18 @@ export type WarpSliderThumbProps = {
   tooltipTarget?: WarpSliderThumb["tooltipTarget"];
   /**  */
   textfield?: WarpSliderThumb["textfield"];
+  /**  */
+  disabled?: WarpSliderThumb["disabled"];
+  /**  */
+  invalid?: WarpSliderThumb["invalid"];
+  /**  */
+  openEnded?: WarpSliderThumb["openEnded"];
+  /**  */
+  valueFormatter?: WarpSliderThumb["valueFormatter"];
+  /**  */
+  tooltipFormatter?: WarpSliderThumb["tooltipFormatter"];
+  /**  */
+  labelFormatter?: WarpSliderThumb["labelFormatter"];
 
   /**  */
   onthumbreset?: (e: CustomEvent) => void;
@@ -1467,6 +1474,18 @@ export type WarpSliderThumbSolidJsProps = {
   /**  */
   "prop:textfield"?: WarpSliderThumb["textfield"];
   /**  */
+  "prop:disabled"?: WarpSliderThumb["disabled"];
+  /**  */
+  "prop:invalid"?: WarpSliderThumb["invalid"];
+  /**  */
+  "prop:openEnded"?: WarpSliderThumb["openEnded"];
+  /**  */
+  "prop:valueFormatter"?: WarpSliderThumb["valueFormatter"];
+  /**  */
+  "prop:tooltipFormatter"?: WarpSliderThumb["tooltipFormatter"];
+  /**  */
+  "prop:labelFormatter"?: WarpSliderThumb["labelFormatter"];
+  /**  */
   "on:thumbreset"?: (e: CustomEvent) => void;
   /**  */
   "on:slidervalidity"?: (e: CustomEvent) => void;
@@ -1512,13 +1531,15 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
   "hidden-textfield"?: WarpSlider["hiddenTextfield"];
   /**  */
   hiddenTextfield?: WarpSlider["hiddenTextfield"];
-  /** Formatter for the tooltip and input mask values. */
+  /**  */
   valueFormatter?: WarpSlider["valueFormatter"];
-  /** Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. */
+  /**  */
   tooltipFormatter?: WarpSlider["tooltipFormatter"];
-  /** Formatter for the min and max labels below the range. */
+  /**  */
   labelFormatter?: WarpSlider["labelFormatter"];
   /**  */
+  fieldset?: WarpSlider["fieldset"];
+  /**  */
   _invalidMessage?: WarpSlider["_invalidMessage"];
   /**  */
   _hasInternalError?: WarpSlider["_hasInternalError"];
@@ -1563,13 +1584,15 @@ If you need to display HTML, use the `label` slot instead (f. ex. `<legend class
   "bool:hidden-textfield"?: WarpSlider["hiddenTextfield"];
   /**  */
   "prop:hiddenTextfield"?: WarpSlider["hiddenTextfield"];
-  /** Formatter for the tooltip and input mask values. */
+  /**  */
   "prop:valueFormatter"?: WarpSlider["valueFormatter"];
-  /** Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. */
+  /**  */
   "prop:tooltipFormatter"?: WarpSlider["tooltipFormatter"];
-  /** Formatter for the min and max labels below the range. */
+  /**  */
   "prop:labelFormatter"?: WarpSlider["labelFormatter"];
   /**  */
+  "prop:fieldset"?: WarpSlider["fieldset"];
+  /**  */
   "prop:_invalidMessage"?: WarpSlider["_invalidMessage"];
   /**  */
   "prop:_hasInternalError"?: WarpSlider["_hasInternalError"];
@@ -1673,6 +1696,10 @@ export type WarpTabProps = {
   over?: WarpTab["over"];
   /** Override tabIndex setter to set _parentTabIndex (for backwards compatibility). */
   tabIndex?: WarpTab["tabIndex"];
+  /**  */
+  _parentTabIndex?: WarpTab["_parentTabIndex"];
+  /**  */
+  _parentAriaSelected?: WarpTab["_parentAriaSelected"];
 };
 
 export type WarpTabSolidJsProps = {
@@ -1694,6 +1721,10 @@ export type WarpTabSolidJsProps = {
   "prop:over"?: WarpTab["over"];
   /** Override tabIndex setter to set _parentTabIndex (for backwards compatibility). */
   "prop:tabIndex"?: WarpTab["tabIndex"];
+  /**  */
+  "prop:_parentTabIndex"?: WarpTab["_parentTabIndex"];
+  /**  */
+  "prop:_parentAriaSelected"?: WarpTab["_parentAriaSelected"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1705,12 +1736,20 @@ export type WarpTabPanelProps = {
   /** Whether this panel is active (visible).
 Set by parent w-tabs via the _parentActive property. */
   active?: WarpTabPanel["active"];
+  /**  */
+  _parentActive?: WarpTabPanel["_parentActive"];
+  /**  */
+  _parentAriaLabelledBy?: WarpTabPanel["_parentAriaLabelledBy"];
 };
 
 export type WarpTabPanelSolidJsProps = {
   /** Whether this panel is active (visible).
 Set by parent w-tabs via the _parentActive property. */
   "prop:active"?: WarpTabPanel["active"];
+  /**  */
+  "prop:_parentActive"?: WarpTabPanel["_parentActive"];
+  /**  */
+  "prop:_parentAriaLabelledBy"?: WarpTabPanel["_parentAriaLabelledBy"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -1825,15 +1864,6 @@ export type WarpTextareaSolidJsProps = {
   textContent?: string | number;
 };
 
-export type WarpToastContainerProps = {};
-
-export type WarpToastContainerSolidJsProps = {
-  /** Set the innerHTML of the element */
-  innerHTML?: string;
-  /** Set the textContent of the element */
-  textContent?: string | number;
-};
-
 export type CustomElements = {
   /**
    *
@@ -2168,9 +2198,7 @@ export type CustomElements = {
    * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
-   *
-   * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
+   * - `isDayDisabled`: undefined (property only)
    * - `isCalendarOpen`: undefined (property only)
    * - `navigationDate`: undefined (property only)
    * - `selectedDate`: undefined (property only) (readonly)
@@ -2478,6 +2506,7 @@ export type CustomElements = {
    * - `readonly`: Renders the field in a readonly state.
    * - `name`: undefined
    * - `value`: undefined
+   * - `_options`: undefined (property only)
    *
    * ## Events
    *
@@ -2525,13 +2554,9 @@ export type CustomElements = {
    * - `name`: undefined
    * - `step`: undefined
    * - `autocomplete`: undefined
-   * - `formatter`: Function to format value when the input field.
-   *
-   * Only active when the input field does not have focus,
-   * similar to the accessible input masking example from Filament Group
-   *
-   * https://css-tricks.com/input-masking/
-   * https://filamentgroup.github.io/politespace/demo/demo.html (property only)
+   * - `formatter`: undefined (property only)
+   * - `_hasPrefix`: undefined (property only)
+   * - `_hasSuffix`: undefined (property only)
    *
    * ## Methods
    *
@@ -2567,6 +2592,12 @@ export type CustomElements = {
    * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
    * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
    * - `ariaDescriptionText`: undefined (property only) (readonly)
+   * - `disabled`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `openEnded`: undefined (property only)
+   * - `valueFormatter`: undefined (property only)
+   * - `tooltipFormatter`: undefined (property only)
+   * - `labelFormatter`: undefined (property only)
    *
    * ## Events
    *
@@ -2610,9 +2641,10 @@ export type CustomElements = {
    * - `step`: undefined
    * - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
    * - `hidden-textfield`/`hiddenTextfield`: undefined
-   * - `valueFormatter`: Formatter for the tooltip and input mask values. (property only)
-   * - `tooltipFormatter`: Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
-   * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
+   * - `valueFormatter`: undefined (property only)
+   * - `tooltipFormatter`: undefined (property only)
+   * - `labelFormatter`: undefined (property only)
+   * - `fieldset`: undefined (property only)
    * - `_invalidMessage`: undefined (property only)
    * - `_hasInternalError`: undefined (property only)
    * - `_showError`: undefined (property only)
@@ -2718,6 +2750,8 @@ export type CustomElements = {
    * - `over`: undefined
    * - `tabIndex`: Override tabIndex setter to set _parentTabIndex (for backwards compatibility). (property only)
    * - `_computedAriaSelected`: Computed aria-selected: prefers parent-managed, falls back to own property (property only) (readonly)
+   * - `_parentTabIndex`: undefined (property only)
+   * - `_parentAriaSelected`: undefined (property only)
    */
   "w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
 
@@ -2733,6 +2767,8 @@ export type CustomElements = {
    *
    * - `active`: Whether this panel is active (visible).
    * Set by parent w-tabs via the _parentActive property.
+   * - `_parentActive`: undefined (property only)
+   * - `_parentAriaLabelledBy`: undefined (property only)
    */
   "w-tab-panel": Partial<
     WarpTabPanelProps & BaseProps<WarpTabPanel> & BaseEvents
@@ -2799,22 +2835,6 @@ export type CustomElements = {
   "w-textarea": Partial<
     WarpTextareaProps & BaseProps<WarpTextarea> & 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 CustomElementsSolidJs = {
@@ -3184,9 +3204,7 @@ export type CustomElementsSolidJs = {
    * - `day-format`/`dayFormat`: Decides the format of the day in the calendar as read to screen readers.
    *
    * The syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).
-   * - `isDayDisabled`: Lets you control if a date in the calendar should be disabled.
-   *
-   * This needs to be set on the element instance in JavaScript, not as an HTML attribute. (property only)
+   * - `isDayDisabled`: undefined (property only)
    * - `isCalendarOpen`: undefined (property only)
    * - `navigationDate`: undefined (property only)
    * - `selectedDate`: undefined (property only) (readonly)
@@ -3521,6 +3539,7 @@ export type CustomElementsSolidJs = {
    * - `readonly`: Renders the field in a readonly state.
    * - `name`: undefined
    * - `value`: undefined
+   * - `_options`: undefined (property only)
    *
    * ## Events
    *
@@ -3573,13 +3592,9 @@ export type CustomElementsSolidJs = {
    * - `name`: undefined
    * - `step`: undefined
    * - `autocomplete`: undefined
-   * - `formatter`: Function to format value when the input field.
-   *
-   * Only active when the input field does not have focus,
-   * similar to the accessible input masking example from Filament Group
-   *
-   * https://css-tricks.com/input-masking/
-   * https://filamentgroup.github.io/politespace/demo/demo.html (property only)
+   * - `formatter`: undefined (property only)
+   * - `_hasPrefix`: undefined (property only)
+   * - `_hasSuffix`: undefined (property only)
    *
    * ## Methods
    *
@@ -3618,6 +3633,12 @@ export type CustomElementsSolidJs = {
    * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
    * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
    * - `ariaDescriptionText`: undefined (property only) (readonly)
+   * - `disabled`: undefined (property only)
+   * - `invalid`: undefined (property only)
+   * - `openEnded`: undefined (property only)
+   * - `valueFormatter`: undefined (property only)
+   * - `tooltipFormatter`: undefined (property only)
+   * - `labelFormatter`: undefined (property only)
    *
    * ## Events
    *
@@ -3664,9 +3685,10 @@ export type CustomElementsSolidJs = {
    * - `step`: undefined
    * - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
    * - `hidden-textfield`/`hiddenTextfield`: undefined
-   * - `valueFormatter`: Formatter for the tooltip and input mask values. (property only)
-   * - `tooltipFormatter`: Replaces valueFormatter for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. (property only)
-   * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
+   * - `valueFormatter`: undefined (property only)
+   * - `tooltipFormatter`: undefined (property only)
+   * - `labelFormatter`: undefined (property only)
+   * - `fieldset`: undefined (property only)
    * - `_invalidMessage`: undefined (property only)
    * - `_hasInternalError`: undefined (property only)
    * - `_showError`: undefined (property only)
@@ -3787,6 +3809,8 @@ export type CustomElementsSolidJs = {
    * - `over`: undefined
    * - `tabIndex`: Override tabIndex setter to set _parentTabIndex (for backwards compatibility). (property only)
    * - `_computedAriaSelected`: Computed aria-selected: prefers parent-managed, falls back to own property (property only) (readonly)
+   * - `_parentTabIndex`: undefined (property only)
+   * - `_parentAriaSelected`: undefined (property only)
    */
   "w-tab": Partial<
     WarpTabProps & WarpTabSolidJsProps & BaseProps<WarpTab> & BaseEvents
@@ -3804,6 +3828,8 @@ export type CustomElementsSolidJs = {
    *
    * - `active`: Whether this panel is active (visible).
    * Set by parent w-tabs via the _parentActive property.
+   * - `_parentActive`: undefined (property only)
+   * - `_parentAriaLabelledBy`: undefined (property only)
    */
   "w-tab-panel": Partial<
     WarpTabPanelProps &
@@ -3878,25 +3904,6 @@ export type CustomElementsSolidJs = {
       BaseProps<WarpTextarea> &
       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 &
-      WarpToastContainerSolidJsProps &
-      BaseProps<WarpToastContainer> &
-      BaseEvents
-  >;
 };
 
 export type CustomCssProperties = {};

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

@@ -6,19 +6,33 @@ import '../icon/icon.js';
  * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)
  */
 declare class WarpAffix extends LitElement {
+    /**
+     * @summary
+     * @description
+     */
     ariaLabel: string;
     /**
      * Add this property to render a clickable Warp close icon.
      *
      * Set an `aria-label` that explains the action when using this.
-     */
+     
+     * @summary
+     * @description
+    */
     clear: boolean;
     /**
      * Add this property to render a clickable Warp search icon.
      *
      * Set an `aria-label` that explains the action when using this.
-     */
+     
+     * @summary
+     * @description
+    */
     search: boolean;
+    /**
+     * @summary
+     * @description
+     */
     label: string;
     static styles: import("lit").CSSResult[];
     /** @internal */