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

package/dist/docs/tooltip/tooltip.md

@@ -0,0 +1,197 @@
+# Tooltip (w-tooltip)
+
+## Description
+
+A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+
+Tooltips should be used sparingly and contain succinct, supplementary information.
+
+## Usage
+
+A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+
+Tooltips should be used sparingly and contain succinct, supplementary information.
+
+```html
+<w-button id="my-button" aria-labelledby="my-tooltip">Hover over me</w-button>
+<w-tooltip id="my-tooltip" for="my-button">I am a tooltip</w-tooltip>
+```
+
+## Accessibility
+
+### ARIA attribute
+
+We use `aria-labelledby` instead of `aria-describedby` to create the relationship between the tooltip and its target.
+
+The ARIA Authoring Practices Guide (APG) recommends `aria-describedby`, but at time of writing that must be set directly on the focusable element. Since `w-button`'s focusable `button` element is inside a shadow root we can't set up that relationship. Cross-root references by ID is impossible and the related ARIA properties on the `Element` are read only.
+
+We might revisit this design later should cross-root ARIA references become supported.
+
+## Examples
+
+By default the tooltip is placed above the target element if there is room. If there's no room above it flips side and is placed below the target.
+
+<elements-example>
+  
+```html
+<w-button id="basic-button" aria-labelledby="basic-tooltip">Hover over me</w-button>
+<w-tooltip id="basic-tooltip" for="basic-button">I am a tooltip</w-tooltip>
+```
+
+</elements-example>
+
+### Adjust placement
+
+You can specify a different initial placement. If there's no room the tooltip flips to the opposite side of the target.
+
+Available positions:
+
+- `top` (this is the default)
+- `bottom`
+- `left`
+- `right`
+
+<elements-example>
+  
+```html
+<w-button id="placed-button" aria-labelledby="placed-tooltip">Hover over me</w-button>
+<w-tooltip id="placed-tooltip" for="placed-button" placement="right">I am a tooltip</w-tooltip>
+```
+
+</elements-example>
+
+## Styling API
+
+This component supports styling through **component tokens** (CSS custom properties with a --w-c- prefix) and **parts**.
+
+### Parts
+
+Use `::part(...)` from outside the component.
+
+- `tooltip` - the tooltip container with background color, padding etc.
+- `arrow` - a square container used for positioning the visual part of the arrow
+- `beak` - the visual part of the arrow pointing at the target
+- `hover-bridge` - an invisible element there to ensure the tooltip doesn't close when moving the cursor from the target to the tooltip
+
+Example:
+
+```css
+w-tooltip::part(tooltip) {
+  text-transform: uppercase;
+}
+```
+
+### Component tokens
+
+Set these on `w-tooltip` to override visuals.
+
+```css
+w-tooltip {
+    --w-c-tooltip-bg: lime;
+    --w-c-tooltip-color: black;
+}
+```
+
+#### Layout & typography
+
+- `--w-c-tooltip-z-index`
+
+#### Background
+
+- `--w-c-tooltip-bg`
+
+#### Text color
+
+- `--w-c-tooltip-color`
+
+##### Shadow
+
+- `--w-c-tooltip-box-shadow`
+
+## `<w-tooltip>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| for | `string` | `""` | ID of the element that triggers the tooltip on hover or focus. |
+| hide (JS only) | `hide() => void` | `-` | - |
+| hide-delay | `number` | `0` | Milliseconds to wait before hiding the tooltip on mouseout. |
+| no-arrow | `boolean` | `false` | Hide the arrow pointing toward the tooltip target. |
+| open | `boolean` | `false` | Indicates whether the tooltip is visible or not. |
+| placement | [`TooltipPlacement`](#tooltipplacement) | `"top"` | Sets the placement of the tooltip relative to its target. |
+| show (JS only) | `show() => void` | `-` | - |
+| show-delay | `number` | `150` | Milliseconds to wait before showing the tooltip on hover. |
+
+### Property Details
+
+#### for
+
+ID of the element that triggers the tooltip on hover or focus.
+
+- Type: `string`
+- Default: `""`
+
+#### hide (JS only)
+
+
+
+- Type: `hide() => void`
+- Default: `-`
+
+#### hide-delay
+
+Milliseconds to wait before hiding the tooltip on mouseout.
+
+- Type: `number`
+- Default: `0`
+
+#### no-arrow
+
+Hide the arrow pointing toward the tooltip target.
+
+- Type: `boolean`
+- Default: `false`
+
+#### open
+
+Indicates whether the tooltip is visible or not.
+
+- Type: `boolean`
+- Default: `false`
+
+#### placement
+
+Sets the placement of the tooltip relative to its target.
+
+The tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.
+
+- Type: [`TooltipPlacement`](#tooltipplacement)
+- Default: `"top"`
+
+#### show (JS only)
+
+
+
+- Type: `show() => void`
+- Default: `-`
+
+#### show-delay
+
+Milliseconds to wait before showing the tooltip on hover.
+
+Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+
+Focusing the target element shows the tooltip immediately.
+
+- Type: `number`
+- Default: `150`
+
+### Types
+
+#### TooltipPlacement
+
+`'top' | 'right' | 'bottom' | 'left'`
+

package/dist/docs/tooltip/usage.md

@@ -0,0 +1,10 @@
+## Usage
+
+A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+
+Tooltips should be used sparingly and contain succinct, supplementary information.
+
+```html
+<w-button id="my-button" aria-labelledby="my-tooltip">Hover over me</w-button>
+<w-tooltip id="my-tooltip" for="my-button">I am a tooltip</w-tooltip>
+```

package/dist/entrypoint-react.d.ts

@@ -36,3 +36,4 @@ export * from "./packages/tab-panel/react.js";
 export * from "./packages/tabs/react.js";
 export * from "./packages/textarea/react.js";
 export * from "./packages/textfield/react.js";
+export * from "./packages/tooltip/react.js";

package/dist/entrypoint-react.js

@@ -37,3 +37,4 @@ export * from "./packages/tab-panel/react.js";
 export * from "./packages/tabs/react.js";
 export * from "./packages/textarea/react.js";
 export * from "./packages/textfield/react.js";
+export * from "./packages/tooltip/react.js";

package/dist/index.d.ts

@@ -47,6 +47,7 @@ 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 { WarpTooltip } from "./packages/tooltip/tooltip.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -301,6 +302,12 @@ Using arrow up and down in the input field increments and decrements by 5. */
   step?: WarpTextField["step"];
   /** A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill. */
   autocomplete?: WarpTextField["autocomplete"];
+  /** Suplementary information that should show in a tooltip behind an information icon after the label.
+
+Use the `tooltip` slot if you need markup and not just text.
+
+You must provide a label to be able to show an info icon with a tooltip. */
+  tooltip?: WarpTextField["tooltip"];
   /** Function to format value when the input field.
 
 Only active when the input field does not have focus,
@@ -372,6 +379,12 @@ Using arrow up and down in the input field increments and decrements by 5. */
   "prop:step"?: WarpTextField["step"];
   /** A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill. */
   "prop:autocomplete"?: WarpTextField["autocomplete"];
+  /** Suplementary information that should show in a tooltip behind an information icon after the label.
+
+Use the `tooltip` slot if you need markup and not just text.
+
+You must provide a label to be able to show an info icon with a tooltip. */
+  "prop:tooltip"?: WarpTextField["tooltip"];
   /** Function to format value when the input field.
 
 Only active when the input field does not have focus,
@@ -2307,6 +2320,73 @@ Placeholder text should not be used as a substitute for labeling the element wit
   textContent?: string | number;
 };
 
+export type WarpTooltipProps = {
+  /** ID of the element that triggers the tooltip on hover or focus. */
+  for?: WarpTooltip["for"];
+  /** Hide the arrow pointing toward the tooltip target. */
+  "no-arrow"?: WarpTooltip["noArrow"];
+  /** Hide the arrow pointing toward the tooltip target. */
+  noArrow?: WarpTooltip["noArrow"];
+  /** Indicates whether the tooltip is visible or not. */
+  open?: WarpTooltip["open"];
+  /** Sets the placement of the tooltip relative to its target.
+
+The tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically. */
+  placement?: WarpTooltip["placement"];
+  /** Milliseconds to wait before showing the tooltip on hover.
+
+Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+
+Focusing the target element shows the tooltip immediately. */
+  "show-delay"?: WarpTooltip["showDelay"];
+  /** Milliseconds to wait before showing the tooltip on hover.
+
+Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+
+Focusing the target element shows the tooltip immediately. */
+  showDelay?: WarpTooltip["showDelay"];
+  /** Milliseconds to wait before hiding the tooltip on mouseout. */
+  "hide-delay"?: WarpTooltip["hideDelay"];
+  /** Milliseconds to wait before hiding the tooltip on mouseout. */
+  hideDelay?: WarpTooltip["hideDelay"];
+};
+
+export type WarpTooltipSolidJsProps = {
+  /** ID of the element that triggers the tooltip on hover or focus. */
+  "prop:for"?: WarpTooltip["for"];
+  /** Hide the arrow pointing toward the tooltip target. */
+  "bool:no-arrow"?: WarpTooltip["noArrow"];
+  /** Hide the arrow pointing toward the tooltip target. */
+  "prop:noArrow"?: WarpTooltip["noArrow"];
+  /** Indicates whether the tooltip is visible or not. */
+  "prop:open"?: WarpTooltip["open"];
+  /** Sets the placement of the tooltip relative to its target.
+
+The tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically. */
+  "prop:placement"?: WarpTooltip["placement"];
+  /** Milliseconds to wait before showing the tooltip on hover.
+
+Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+
+Focusing the target element shows the tooltip immediately. */
+  "attr:show-delay"?: WarpTooltip["showDelay"];
+  /** Milliseconds to wait before showing the tooltip on hover.
+
+Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+
+Focusing the target element shows the tooltip immediately. */
+  "prop:showDelay"?: WarpTooltip["showDelay"];
+  /** Milliseconds to wait before hiding the tooltip on mouseout. */
+  "attr:hide-delay"?: WarpTooltip["hideDelay"];
+  /** Milliseconds to wait before hiding the tooltip on mouseout. */
+  "prop:hideDelay"?: WarpTooltip["hideDelay"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type CustomElements = {
   /**
    * A single-line input component used for entering and editing textual or numeric data.
@@ -2349,6 +2429,11 @@ export type CustomElements = {
    * For example with a `step="5"` only values that divide evenly on 5 are allowed.
    * Using arrow up and down in the input field increments and decrements by 5.
    * - `autocomplete`: A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.
+   * - `tooltip`: Suplementary information that should show in a tooltip behind an information icon after the label.
+   *
+   * Use the `tooltip` slot if you need markup and not just text.
+   *
+   * You must provide a label to be able to show an info icon with a tooltip.
    * - `formatter`: Function to format value when the input field.
    *
    * Only active when the input field does not have focus,
@@ -2970,6 +3055,7 @@ export type CustomElements = {
    * - `--w-c-modal-max-height`: undefined (default: `undefined`)
    * - `--w-c-modal-min-height`: undefined (default: `undefined`)
    * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
+   * - `--w-c-modal-padding-bottom`: undefined (default: `undefined`)
    * - `--w-c-modal-width`: undefined (default: `undefined`)
    *
    * ## CSS Parts
@@ -3559,6 +3645,37 @@ export type CustomElements = {
   "w-textarea": Partial<
     WarpTextareaProps & BaseProps<WarpTextarea> & BaseEvents
   >;
+
+  /**
+   * A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+   *
+   * Tooltips should be used sparingly and contain succinct, supplementary information.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `for`: ID of the element that triggers the tooltip on hover or focus.
+   * - `no-arrow`/`noArrow`: Hide the arrow pointing toward the tooltip target.
+   * - `open`: Indicates whether the tooltip is visible or not.
+   * - `placement`: Sets the placement of the tooltip relative to its target.
+   *
+   * The tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.
+   * - `show-delay`/`showDelay`: Milliseconds to wait before showing the tooltip on hover.
+   *
+   * Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+   *
+   * Focusing the target element shows the tooltip immediately.
+   * - `hide-delay`/`hideDelay`: Milliseconds to wait before hiding the tooltip on mouseout.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `hide() => void`: undefined
+   * - `show() => void`: undefined
+   */
+  "w-tooltip": Partial<WarpTooltipProps & BaseProps<WarpTooltip> & BaseEvents>;
 };
 
 type ReactElementProps<T extends HTMLElement> = import("react").DOMAttributes<T> &
@@ -3619,6 +3736,7 @@ type CustomElementInstances = {
   "w-tab-panel": WarpTabPanel;
   "w-tabs": WarpTabs;
   "w-textarea": WarpTextarea;
+  "w-tooltip": WarpTooltip;
 };
 
 type CustomElementComponentProps = {
@@ -3659,6 +3777,7 @@ type CustomElementComponentProps = {
   "w-tab-panel": WarpTabPanelProps;
   "w-tabs": WarpTabsProps;
   "w-textarea": WarpTextareaProps;
+  "w-tooltip": WarpTooltipProps;
 };
 
 export type ReactCustomElements = {
@@ -3709,6 +3828,11 @@ export type CustomElementsSolidJs = {
    * For example with a `step="5"` only values that divide evenly on 5 are allowed.
    * Using arrow up and down in the input field increments and decrements by 5.
    * - `autocomplete`: A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.
+   * - `tooltip`: Suplementary information that should show in a tooltip behind an information icon after the label.
+   *
+   * Use the `tooltip` slot if you need markup and not just text.
+   *
+   * You must provide a label to be able to show an info icon with a tooltip.
    * - `formatter`: Function to format value when the input field.
    *
    * Only active when the input field does not have focus,
@@ -4376,6 +4500,7 @@ export type CustomElementsSolidJs = {
    * - `--w-c-modal-max-height`: undefined (default: `undefined`)
    * - `--w-c-modal-min-height`: undefined (default: `undefined`)
    * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
+   * - `--w-c-modal-padding-bottom`: undefined (default: `undefined`)
    * - `--w-c-modal-width`: undefined (default: `undefined`)
    *
    * ## CSS Parts
@@ -5025,6 +5150,42 @@ export type CustomElementsSolidJs = {
       BaseProps<WarpTextarea> &
       BaseEvents
   >;
+
+  /**
+   * A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+   *
+   * Tooltips should be used sparingly and contain succinct, supplementary information.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `for`: ID of the element that triggers the tooltip on hover or focus.
+   * - `no-arrow`/`noArrow`: Hide the arrow pointing toward the tooltip target.
+   * - `open`: Indicates whether the tooltip is visible or not.
+   * - `placement`: Sets the placement of the tooltip relative to its target.
+   *
+   * The tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.
+   * - `show-delay`/`showDelay`: Milliseconds to wait before showing the tooltip on hover.
+   *
+   * Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+   *
+   * Focusing the target element shows the tooltip immediately.
+   * - `hide-delay`/`hideDelay`: Milliseconds to wait before hiding the tooltip on mouseout.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `hide() => void`: undefined
+   * - `show() => void`: undefined
+   */
+  "w-tooltip": Partial<
+    WarpTooltipProps &
+      WarpTooltipSolidJsProps &
+      BaseProps<WarpTooltip> &
+      BaseEvents
+  >;
 };
 
 export type CustomCssProperties = {
@@ -5045,6 +5206,8 @@ export type CustomCssProperties = {
   /**  */
   "--w-c-modal-translate-distance"?: string;
   /**  */
+  "--w-c-modal-padding-bottom"?: string;
+  /**  */
   "--w-c-modal-width"?: string;
   /**  adjusts the flex gap between actions in the footer. */
   "--w-c-modal-footer-gap"?: string;

package/dist/packages/affix/affix.js

@@ -1,4 +1,4 @@
-var me=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var w=(t,e,r,o)=>{for(var a=o>1?void 0:o?ve(e,r):e,d=t.length-1,s;d>=0;d--)(s=t[d])&&(a=(o?s(e,r,a):s(a))||a);return o&&a&&me(e,r,a),a};var U=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?U.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var c=function(t,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(t):o?o.value:e.get(t)},h=function(t,e,r,o,a){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?a.call(t,r):a?a.value=r:e.set(t,r),r};function te(t){var e,r,o,a,d,s,n,p,g,y,_,P,v,z,C,m,M,T,X;class ge extends t{constructor(...i){var l,b,u;super(...i),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),a.set(this,!1),d.set(this,void 0),s.set(this,void 0),n.set(this,!0),g.set(this,""),y.set(this,()=>{h(this,a,!0,"f"),h(this,r,!0,"f"),c(this,e,"m",m).call(this)}),_.set(this,()=>{h(this,r,!1,"f"),c(this,e,"m",M).call(this,this.shouldFormValueUpdate()?c(this,g,"f"):""),!this.validity.valid&&c(this,a,"f")&&h(this,o,!0,"f");let x=c(this,e,"m",m).call(this);this.validationMessageCallback&&this.validationMessageCallback(x?this.internals.validationMessage:"")}),P.set(this,()=>{var x;c(this,n,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,n,!1,"f")),h(this,a,!0,"f"),h(this,o,!0,"f"),c(this,e,"m",m).call(this),(x=this===null||this===void 0?void 0:this.validationMessageCallback)===null||x===void 0||x.call(this,this.showError?this.internals.validationMessage:"")}),v.set(this,void 0),z.set(this,!1),C.set(this,Promise.resolve()),(l=this.addEventListener)===null||l===void 0||l.call(this,"focus",c(this,y,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",c(this,_,"f")),(u=this.addEventListener)===null||u===void 0||u.call(this,"invalid",c(this,P,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let i=this.validators.map(u=>u.attribute).flat(),l=super.observedAttributes||[];return[...new Set([...l,...i])]}static getValidator(i){return this.validators.find(l=>l.attribute===i)||null}static getValidators(i){return this.validators.filter(l=>{var b;if(l.attribute===i||!((b=l.attribute)===null||b===void 0)&&b.includes(i))return!0})}get form(){return this.internals.form}get showError(){return c(this,e,"m",m).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(i,l,b){var u;(u=super.attributeChangedCallback)===null||u===void 0||u.call(this,i,l,b);let j=this.constructor.getValidators(i);j?.length&&this.validationTarget&&this.setValue(c(this,g,"f"))}setValue(i){var l;h(this,o,!1,"f"),(l=this.validationMessageCallback)===null||l===void 0||l.call(this,""),h(this,g,i,"f");let u=this.shouldFormValueUpdate()?i:null;this.internals.setFormValue(u),c(this,e,"m",M).call(this,u),this.valueChangedCallback&&this.valueChangedCallback(u),c(this,e,"m",m).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(i=>i(c(this,C,"f")))}formResetCallback(){var i,l;h(this,a,!1,"f"),h(this,o,!1,"f"),c(this,e,"m",m).call(this),(i=this.resetFormControl)===null||i===void 0||i.call(this),(l=this.validationMessageCallback)===null||l===void 0||l.call(this,c(this,e,"m",m).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,a=new WeakMap,d=new WeakMap,s=new WeakMap,n=new WeakMap,g=new WeakMap,y=new WeakMap,_=new WeakMap,P=new WeakMap,v=new WeakMap,z=new WeakMap,C=new WeakMap,e=new WeakSet,p=function(){let i=this.getRootNode(),l=`${this.localName}[name="${this.getAttribute("name")}"]`;return i.querySelectorAll(l)},m=function(){if(this.hasAttribute("disabled"))return!1;let i=c(this,o,"f")||c(this,a,"f")&&!this.validity.valid&&!c(this,r,"f");return i&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),i},M=function(i){let l=this.constructor,b={},u=l.validators,x=[],j=u.some(f=>f.isValid instanceof Promise);c(this,z,"f")||(h(this,C,new Promise(f=>{h(this,v,f,"f")}),"f"),h(this,z,!0,"f")),c(this,d,"f")&&(c(this,d,"f").abort(),h(this,s,c(this,d,"f"),"f"));let $=new AbortController;h(this,d,$,"f");let A,oe=!1;u.length&&(u.forEach(f=>{let Z=f.key||"customError",S=f.isValid(this,i,$.signal);S instanceof Promise?(x.push(S),S.then(G=>{G!=null&&(b[Z]=!G,A=c(this,e,"m",X).call(this,f,i),c(this,e,"m",T).call(this,b,A))})):(b[Z]=!S,this.validity[Z]!==!S&&(oe=!0),!S&&!A&&(A=c(this,e,"m",X).call(this,f,i)))}),Promise.allSettled(x).then(()=>{var f;$?.signal.aborted||(h(this,z,!1,"f"),(f=c(this,v,"f"))===null||f===void 0||f.call(this))}),(oe||!j)&&c(this,e,"m",T).call(this,b,A))},T=function(i,l){if(this.validationTarget)this.internals.setValidity(i,l,this.validationTarget),h(this,n,!1,"f");else{if(this.internals.setValidity(i,l),this.internals.validity.valid)return;h(this,n,!0,"f")}},X=function(i,l){if(this.validityCallback){let b=this.validityCallback(i.key||"customError");if(b)return b}return i.message instanceof Function?i.message(this,l):i.message},ge}var F=t=>typeof t=="string",fe=t=>typeof t=="function",ae=new Map,ne="en";function q(t){return[...Array.isArray(t)?t:[t],ne]}function K(t,e,r){let o=q(t);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return N(()=>O("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(F(e)?new Date(e):e)}function we(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return K(t,e,o)}function W(t,e,r){let o=q(t);return N(()=>O("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function ie(t,e,r,{offset:o=0,...a}){let d=q(t),s=e?N(()=>O("plural-ordinal",d),()=>new Intl.PluralRules(d,{type:"ordinal"})):N(()=>O("plural-cardinal",d),()=>new Intl.PluralRules(d,{type:"cardinal"}));return a[r]??a[s.select(r-o)]??a.other}function N(t,e){let r=t(),o=ae.get(r);return o||(o=e(),ae.set(r,o)),o}function O(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var se=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,le=t=>t.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,o)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(o,16);return String.fromCharCode(a)}}),ce="%__lingui_octothorpe__%",xe=(t,e,r={})=>{let o=e||t,a=s=>typeof s=="object"?s:r[s],d=(s,n)=>{let p=Object.keys(r).length?a("number"):void 0,g=W(o,s,p);return n.replace(new RegExp(ce,"g"),g)};return{plural:(s,n)=>{let{offset:p=0}=n,g=ie(o,!1,s,n);return d(s-p,g)},selectordinal:(s,n)=>{let{offset:p=0}=n,g=ie(o,!0,s,n);return d(s-p,g)},select:ke,number:(s,n)=>W(o,s,a(n)||{style:n}),date:(s,n)=>K(o,s,a(n)||n),time:(s,n)=>we(o,s,a(n)||n)}},ke=(t,e)=>e[t]??e.other;function ye(t,e,r){return(o={},a)=>{let d=xe(e,r,a),s=(p,g=!1)=>Array.isArray(p)?p.reduce((y,_)=>{if(_==="#"&&g)return y+ce;if(F(_))return y+_;let[P,v,z]=_,C={};v==="plural"||v==="selectordinal"||v==="select"?Object.entries(z).forEach(([M,T])=>{C[M]=s(T,v==="plural"||v==="selectordinal")}):C=z;let m;if(v){let M=d[v];m=M(o[P],C)}else m=o[P];return m==null?y:y+m},""):p,n=s(t);return F(n)&&se.test(n)?le(n):F(n)?n:n?String(n):""}}var _e=Object.defineProperty,ze=(t,e,r)=>e in t?_e(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ce=(t,e,r)=>(ze(t,typeof e!="symbol"?e+"":e,r),r),B=class{constructor(){Ce(this,"_events",{})}on(e,r){var o;return(o=this._events)[e]??(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},Fe=Object.defineProperty,Ee=(t,e,r)=>e in t?Fe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,L=(t,e,r)=>(Ee(t,typeof e!="symbol"?e+"":e,r),r),H=class extends B{constructor(e){super(),L(this,"_locale",""),L(this,"_locales"),L(this,"_localeData",{}),L(this,"_messages",{}),L(this,"_missing"),L(this,"_messageCompiler"),L(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate(e.locale??ne,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o?.message;e||(e=""),F(e)||(r=e.values||r,a=e.message,e=e.id);let d=this.messages[e],s=d===void 0,n=this._missing;if(n&&s)return fe(n)?n(this._locale,e):n;s&&this.emit("missing",{id:e,locale:this._locale});let p=d||a||e;return F(p)&&(this._messageCompiler?p=this._messageCompiler(p):console.warn(`Uncompiled message detected! Message:
+var me=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var w=(t,e,r,o)=>{for(var a=o>1?void 0:o?ve(e,r):e,d=t.length-1,s;d>=0;d--)(s=t[d])&&(a=(o?s(e,r,a):s(a))||a);return o&&a&&me(e,r,a),a};var U=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?U.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var c=function(t,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(t):o?o.value:e.get(t)},h=function(t,e,r,o,a){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?a.call(t,r):a?a.value=r:e.set(t,r),r};function te(t){var e,r,o,a,d,s,n,p,g,y,_,P,v,z,C,m,M,T,X;class ge extends t{constructor(...i){var l,b,u;super(...i),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),a.set(this,!1),d.set(this,void 0),s.set(this,void 0),n.set(this,!0),g.set(this,""),y.set(this,()=>{h(this,a,!0,"f"),h(this,r,!0,"f"),c(this,e,"m",m).call(this)}),_.set(this,()=>{h(this,r,!1,"f"),c(this,e,"m",M).call(this,this.shouldFormValueUpdate()?c(this,g,"f"):""),!this.validity.valid&&c(this,a,"f")&&h(this,o,!0,"f");let x=c(this,e,"m",m).call(this);this.validationMessageCallback&&this.validationMessageCallback(x?this.internals.validationMessage:"")}),P.set(this,()=>{var x;c(this,n,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,n,!1,"f")),h(this,a,!0,"f"),h(this,o,!0,"f"),c(this,e,"m",m).call(this),(x=this===null||this===void 0?void 0:this.validationMessageCallback)===null||x===void 0||x.call(this,this.showError?this.internals.validationMessage:"")}),v.set(this,void 0),z.set(this,!1),C.set(this,Promise.resolve()),(l=this.addEventListener)===null||l===void 0||l.call(this,"focus",c(this,y,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",c(this,_,"f")),(u=this.addEventListener)===null||u===void 0||u.call(this,"invalid",c(this,P,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let i=this.validators.map(u=>u.attribute).flat(),l=super.observedAttributes||[];return[...new Set([...l,...i])]}static getValidator(i){return this.validators.find(l=>l.attribute===i)||null}static getValidators(i){return this.validators.filter(l=>{var b;if(l.attribute===i||!((b=l.attribute)===null||b===void 0)&&b.includes(i))return!0})}get form(){return this.internals.form}get showError(){return c(this,e,"m",m).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(i,l,b){var u;(u=super.attributeChangedCallback)===null||u===void 0||u.call(this,i,l,b);let $=this.constructor.getValidators(i);$?.length&&this.validationTarget&&this.setValue(c(this,g,"f"))}setValue(i){var l;h(this,o,!1,"f"),(l=this.validationMessageCallback)===null||l===void 0||l.call(this,""),h(this,g,i,"f");let u=this.shouldFormValueUpdate()?i:null;this.internals.setFormValue(u),c(this,e,"m",M).call(this,u),this.valueChangedCallback&&this.valueChangedCallback(u),c(this,e,"m",m).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(i=>i(c(this,C,"f")))}formResetCallback(){var i,l;h(this,a,!1,"f"),h(this,o,!1,"f"),c(this,e,"m",m).call(this),(i=this.resetFormControl)===null||i===void 0||i.call(this),(l=this.validationMessageCallback)===null||l===void 0||l.call(this,c(this,e,"m",m).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,a=new WeakMap,d=new WeakMap,s=new WeakMap,n=new WeakMap,g=new WeakMap,y=new WeakMap,_=new WeakMap,P=new WeakMap,v=new WeakMap,z=new WeakMap,C=new WeakMap,e=new WeakSet,p=function(){let i=this.getRootNode(),l=`${this.localName}[name="${this.getAttribute("name")}"]`;return i.querySelectorAll(l)},m=function(){if(this.hasAttribute("disabled"))return!1;let i=c(this,o,"f")||c(this,a,"f")&&!this.validity.valid&&!c(this,r,"f");return i&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),i},M=function(i){let l=this.constructor,b={},u=l.validators,x=[],$=u.some(f=>f.isValid instanceof Promise);c(this,z,"f")||(h(this,C,new Promise(f=>{h(this,v,f,"f")}),"f"),h(this,z,!0,"f")),c(this,d,"f")&&(c(this,d,"f").abort(),h(this,s,c(this,d,"f"),"f"));let j=new AbortController;h(this,d,j,"f");let A,oe=!1;u.length&&(u.forEach(f=>{let Z=f.key||"customError",S=f.isValid(this,i,j.signal);S instanceof Promise?(x.push(S),S.then(G=>{G!=null&&(b[Z]=!G,A=c(this,e,"m",X).call(this,f,i),c(this,e,"m",T).call(this,b,A))})):(b[Z]=!S,this.validity[Z]!==!S&&(oe=!0),!S&&!A&&(A=c(this,e,"m",X).call(this,f,i)))}),Promise.allSettled(x).then(()=>{var f;j?.signal.aborted||(h(this,z,!1,"f"),(f=c(this,v,"f"))===null||f===void 0||f.call(this))}),(oe||!$)&&c(this,e,"m",T).call(this,b,A))},T=function(i,l){if(this.validationTarget)this.internals.setValidity(i,l,this.validationTarget),h(this,n,!1,"f");else{if(this.internals.setValidity(i,l),this.internals.validity.valid)return;h(this,n,!0,"f")}},X=function(i,l){if(this.validityCallback){let b=this.validityCallback(i.key||"customError");if(b)return b}return i.message instanceof Function?i.message(this,l):i.message},ge}var F=t=>typeof t=="string",fe=t=>typeof t=="function",ae=new Map,ne="en";function q(t){return[...Array.isArray(t)?t:[t],ne]}function K(t,e,r){let o=q(t);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return N(()=>O("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(F(e)?new Date(e):e)}function we(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return K(t,e,o)}function W(t,e,r){let o=q(t);return N(()=>O("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function ie(t,e,r,{offset:o=0,...a}){let d=q(t),s=e?N(()=>O("plural-ordinal",d),()=>new Intl.PluralRules(d,{type:"ordinal"})):N(()=>O("plural-cardinal",d),()=>new Intl.PluralRules(d,{type:"cardinal"}));return a[r]??a[s.select(r-o)]??a.other}function N(t,e){let r=t(),o=ae.get(r);return o||(o=e(),ae.set(r,o)),o}function O(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var se=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,le=t=>t.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,o)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(o,16);return String.fromCharCode(a)}}),ce="%__lingui_octothorpe__%",xe=(t,e,r={})=>{let o=e||t,a=s=>typeof s=="object"?s:r[s],d=(s,n)=>{let p=Object.keys(r).length?a("number"):void 0,g=W(o,s,p);return n.replace(new RegExp(ce,"g"),g)};return{plural:(s,n)=>{let{offset:p=0}=n,g=ie(o,!1,s,n);return d(s-p,g)},selectordinal:(s,n)=>{let{offset:p=0}=n,g=ie(o,!0,s,n);return d(s-p,g)},select:ke,number:(s,n)=>W(o,s,a(n)||{style:n}),date:(s,n)=>K(o,s,a(n)||n),time:(s,n)=>we(o,s,a(n)||n)}},ke=(t,e)=>e[t]??e.other;function ye(t,e,r){return(o={},a)=>{let d=xe(e,r,a),s=(p,g=!1)=>Array.isArray(p)?p.reduce((y,_)=>{if(_==="#"&&g)return y+ce;if(F(_))return y+_;let[P,v,z]=_,C={};v==="plural"||v==="selectordinal"||v==="select"?Object.entries(z).forEach(([M,T])=>{C[M]=s(T,v==="plural"||v==="selectordinal")}):C=z;let m;if(v){let M=d[v];m=M(o[P],C)}else m=o[P];return m==null?y:y+m},""):p,n=s(t);return F(n)&&se.test(n)?le(n):F(n)?n:n?String(n):""}}var _e=Object.defineProperty,ze=(t,e,r)=>e in t?_e(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ce=(t,e,r)=>(ze(t,typeof e!="symbol"?e+"":e,r),r),B=class{constructor(){Ce(this,"_events",{})}on(e,r){var o;return(o=this._events)[e]??(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},Fe=Object.defineProperty,Ee=(t,e,r)=>e in t?Fe(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,L=(t,e,r)=>(Ee(t,typeof e!="symbol"?e+"":e,r),r),H=class extends B{constructor(e){super(),L(this,"_locale",""),L(this,"_locales"),L(this,"_localeData",{}),L(this,"_messages",{}),L(this,"_missing"),L(this,"_messageCompiler"),L(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate(e.locale??ne,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o?.message;e||(e=""),F(e)||(r=e.values||r,a=e.message,e=e.id);let d=this.messages[e],s=d===void 0,n=this._missing;if(n&&s)return fe(n)?n(this._locale,e):n;s&&this.emit("missing",{id:e,locale:this._locale});let p=d||a||e;return F(p)&&(this._messageCompiler?p=this._messageCompiler(p):console.warn(`Uncompiled message detected! Message:
 
 > ${p}
 
@@ -2445,7 +2445,7 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `);import{css as je}from"lit";var be=je`
+        `);import{css as $e}from"lit";var be=$e`
 	/* Wrapper component tokens with semantic fallbacks */
 	:host {
 		/* Internal tokens - not part of public API */
@@ -2544,7 +2544,7 @@ Please compile your catalog first.
 	button[part="wrapper"]:not(:focus-visible) {
 		outline: none;
 	}
-`;import{unsafeCSS as $e}from"lit";var he=$e("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.rounded-4{border-radius:4px}.block{display:block}.flex{display:flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.justify-center{justify-content:center}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-text{color:var(--w-s-color-text)}.w-40{width:4rem}.w-max{width:max-content}.pb-0{padding-bottom:0}.pl-12{padding-left:1.2rem}.pr-12{padding-right:1.2rem}.cursor-default{cursor:default}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}");import{html as Ye,LitElement as De}from"lit";import{property as ee,state as Ne}from"lit/decorators.js";import{classMap as Oe}from"lit/directives/class-map.js";import{css as Ae}from"lit";var ue=Ae`
+`;import{unsafeCSS as je}from"lit";var he=je("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.flex{display:flex}.static{position:static}");import{html as Ye,LitElement as De}from"lit";import{property as ee,state as Ne}from"lit/decorators.js";import{classMap as Oe}from"lit/directives/class-map.js";import{css as Ae}from"lit";var ue=Ae`
 	:host {
 		display: inline-block;
 	}