@mediquo/elements 0.3.1

package/dist/ui/mq-floating-bubble.d.ts

@@ -0,0 +1,42 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * Floating bubble primitive that displays content as a fullscreen modal.
+ *
+ * Features:
+ * - Content always appears as a fullscreen modal
+ * - Respects safe area corners (--mq-safe-* CSS variables)
+ * - Accessible with keyboard support
+ * - Click outside to close
+ * - Escape key to close
+ * - Optional close button (can be hidden)
+ *
+ * Usage:
+ *   <mq-floating-bubble>
+ *     <div slot="content">Chat content here...</div>
+ *   </mq-floating-bubble>
+ */
+declare class MqFloatingBubble extends LitElement {
+    static styles: lit.CSSResult[];
+    open: boolean;
+    dismissable: boolean;
+    hideCloseButton: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onKeyDown;
+    private onOverlayClick;
+    private onOverlayKeyDown;
+    private onCloseClick;
+    private requestClose;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-floating-bubble": MqFloatingBubble;
+    }
+}
+
+export { MqFloatingBubble };

package/dist/ui/mq-floating-bubble.js

@@ -0,0 +1 @@
+import{_ as t,t as e}from"../chunks/custom-element-DA9Fxvxd.js";import{i as o,a as n,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as s}from"../chunks/property-scuRaFcM.js";const a=o`:host{display:contents}:host(:not([open])){display:none}.floating-content-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;opacity:0;visibility:hidden;pointer-events:none}.floating-content-overlay.open{opacity:1;visibility:visible;pointer-events:auto}.floating-content{position:fixed;inset:var(--mq-safe-top,0) var(--mq-safe-right,0) var(--mq-safe-bottom,0) var(--mq-safe-left,0);background:var(--color-neutrals-background-extraWeak,var(--color-background,var(--color-white)));color:var(--color-neutrals-text-default,var(--color-foreground,var(--color-black)));border-radius:var(--border-radius-lg);box-shadow:var(--dialog-shadow,0 10px 25px rgba(0,0,0,.2));overflow:hidden;opacity:0}.floating-content.open{opacity:1}@media (min-width:768px){.floating-content-overlay{display:flex;align-items:center;justify-content:center}.floating-content{max-height:80vh;max-width:770px;width:100%;height:100%;position:relative;top:auto;right:auto;bottom:auto;left:auto}}.close-btn{position:absolute;top:var(--sp-2);right:var(--sp-2);border:none;background:0 0;padding:var(--sp-2);border-radius:var(--border-radius-lg);cursor:pointer;line-height:0;color:inherit;z-index:1}.close-btn:hover{background:var(--dialog-close-hover-bg,rgba(0,0,0,.05))}.floating-content-inner{padding:0;height:100%;overflow:hidden}slot[name=content]{height:100%}`;let r=class MqFloatingBubble extends n{constructor(){super(...arguments),this.open=!1,this.dismissable=!0,this.hideCloseButton=!1,this.onKeyDown=t=>{this.open&&"Escape"===t.key&&this.dismissable&&(t.stopPropagation(),t.preventDefault(),this.requestClose())},this.onOverlayClick=t=>{if(!this.dismissable)return;const e=this.shadowRoot?.querySelector(".floating-content-overlay");t.target===e&&this.requestClose()},this.onOverlayKeyDown=t=>{if(this.dismissable&&("Enter"===t.key||" "===t.key)){const e=this.shadowRoot?.querySelector(".floating-content-overlay");t.target===e&&(t.preventDefault(),this.requestClose())}},this.onCloseClick=()=>{this.dismissable&&this.requestClose()}}static{this.styles=[a]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.onKeyDown),super.disconnectedCallback()}requestClose(){this.dispatchEvent(new CustomEvent("mq-close",{bubbles:!0,composed:!0}))}willUpdate(t){t.has("open")&&(this.open?this.toggleAttribute("open",!0):this.toggleAttribute("open",!1))}render(){return i`<div class="floating-content-overlay ${this.open?"open":""}" @click="${this.onOverlayClick}" @keydown="${this.onOverlayKeyDown}"><div class="floating-content ${this.open?"open":""}">${this.hideCloseButton?"":i`<button class="close-btn" type="button" title="Close" ?disabled="${!this.dismissable}" @click="${this.onCloseClick}">✕</button>`}<div class="floating-content-inner"><slot name="content"></slot></div></div></div>`}};t([s({type:Boolean,reflect:!0})],r.prototype,"open",void 0),t([s({type:Boolean,reflect:!0})],r.prototype,"dismissable",void 0),t([s({type:Boolean,reflect:!0})],r.prototype,"hideCloseButton",void 0),r=t([e("mq-floating-bubble")],r);export{r as MqFloatingBubble};

package/dist/ui/mq-input.d.ts

@@ -0,0 +1,41 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class MqInputChangeEvent extends Event {
+    readonly value: string;
+    static eventName: string;
+    constructor(value: string);
+}
+type InputSize = "sm" | "md" | "lg";
+/**
+ * @fires MqInputChangeEvent - Fired when the value changes.
+ */
+declare class MqInput extends LitElement {
+    static styles: lit.CSSResult[];
+    private labelId;
+    label: string;
+    required: boolean;
+    value: string;
+    disabled: boolean;
+    error: boolean;
+    name?: string;
+    placeholder: string;
+    type: "text" | "email" | "password" | "tel" | "url" | "number" | "date" | "time" | "datetime-local";
+    size: InputSize;
+    private focused;
+    private readonly inputElement?;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleWrapperClick;
+    private handleWrapperKeyDown;
+    focus(): void;
+    blur(): void;
+    private handleIconClick;
+    private get shouldShowCalendarIcon();
+    protected render(): lit_html.TemplateResult<1>;
+}
+
+export { MqInput, MqInputChangeEvent };
+export type { InputSize };

package/dist/ui/mq-input.js

@@ -0,0 +1 @@
+import{_ as e,t}from"../chunks/custom-element-DA9Fxvxd.js";import{i as o,a as r,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as a}from"../chunks/property-scuRaFcM.js";import{r as s}from"../chunks/state-LQivXIgA.js";import{e as n}from"../chunks/query-CeeutdfT.js";import{e as l}from"../chunks/class-map-Co76I6aw.js";import{o as p}from"../chunks/if-defined-BYeVdwgd.js";import{calendarIcon as d}from"./icons/calendar-icon.js";import"../chunks/directive-2EDmOukv.js";import"./icons/types.js";const c=o`:host{display:inline-block;width:100%;min-width:200px;font-family:var(--font-body, "Roboto", sans-serif)}.root{position:relative;width:100%}.control{position:relative;width:100%;font-size:var(--text-base);line-height:var(--text-base--line-height)}.input-wrapper{cursor:text;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:center;height:var(--input-height-md);width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-neutrals-border-default);background:var(--color-neutrals-background-extraWeak);padding:var(--size-2) var(--size-4);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.input-wrapper:focus-within{outline:0;box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.control.focused .input-wrapper{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.control.error .input-wrapper{border-color:var(--color-error-border-default)}.control.error.focused .input-wrapper{border-color:var(--color-error-border-default);box-shadow:0 0 0 1px var(--color-error-border-default)}.control.error .input-wrapper:focus-within{box-shadow:0 0 0 1px var(--color-error-border-default)}.label{color:var(--color-neutrals-text-medium);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-weight-normal);transition:transform .2s ease,font-size .2s ease,top .2s ease;transform-origin:left center;pointer-events:none;position:absolute;left:var(--sp-4);top:50%;transform:translateY(-50%)}.control.disabled .label{opacity:.65}.control.filled .label,.control.focused .label{font-size:var(--text-xs);top:var(--sp-0);transform:translateY(0)}.input{border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--text-base);color:var(--color-neutrals-text-default);width:100%;padding:0;line-height:1;transition:margin-top .2s ease;margin-top:0}.control.filled .input-wrapper:has(.label) .input,.control.focused .input-wrapper:has(.label) .input{margin-top:var(--size-4)}.input::placeholder{color:var(--color-neutrals-text-medium);opacity:.7}.input:disabled{opacity:.65;cursor:not-allowed}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{appearance:textfield;-moz-appearance:textfield}.input[type=date]::-webkit-calendar-picker-indicator,.input[type=datetime-local]::-webkit-calendar-picker-indicator,.input[type=time]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;appearance:none}.icon{position:absolute;right:var(--size-4);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}:host([size=sm]) .input-wrapper{height:var(--input-height-sm);padding:var(--size-1) var(--size-3);font-size:var(--text-sm)}:host([size=sm]) .label{font-size:var(--text-sm);left:var(--sp-3)}:host([size=sm]) .control.filled .label,:host([size=sm]) .control.focused .label{font-size:var(--text-xxs)}:host([size=sm]) .input{font-size:var(--text-sm)}:host([size=sm]) .control.filled .input-wrapper:has(.label) .input,:host([size=sm]) .control.focused .input-wrapper:has(.label) .input{margin-top:var(--size-3)}:host([size=md]) .input-wrapper{height:var(--input-height-md)}:host([size=lg]) .input-wrapper{height:var(--input-height-lg);padding:var(--size-3) var(--size-5);font-size:var(--text-lg)}:host([size=lg]) .label{font-size:var(--text-lg);left:var(--sp-5)}:host([size=lg]) .control.filled .label,:host([size=lg]) .control.focused .label{font-size:var(--text-sm)}:host([size=lg]) .input{font-size:var(--text-lg)}:host([size=lg]) .control.filled .input-wrapper:has(.label) .input,:host([size=lg]) .control.focused .input-wrapper:has(.label) .input{margin-top:var(--size-5)}`;class MqInputChangeEvent extends Event{static{this.eventName="onvaluechange"}constructor(e){super(MqInputChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let u=class MqInput extends r{constructor(){super(...arguments),this.labelId=`${"mq-input-label"}-${Math.random().toString(36).slice(2,10)}`,this.label="",this.required=!1,this.value="",this.disabled=!1,this.error=!1,this.placeholder="",this.type="text",this.size="md",this.focused=!1}static{this.styles=[c]}handleInput(e){const t=e.target,o=this.value;this.value=t.value,o!==this.value&&(this.dispatchEvent(new MqInputChangeEvent(this.value)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}handleFocus(){this.focused=!0}handleBlur(){this.focused=!1}handleWrapperClick(){this.focus()}handleWrapperKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.focus())}focus(){this.inputElement?.focus()}blur(){this.inputElement?.blur()}handleIconClick(e){e.stopPropagation();const t=this.inputElement;if(t){if("showPicker"in t&&"function"==typeof t.showPicker)try{return void t.showPicker()}catch{}t.focus()}}get shouldShowCalendarIcon(){return"date"===this.type||"time"===this.type||"datetime-local"===this.type}render(){const e=!!this.value,t=l({control:!0,filled:e,focused:this.focused,disabled:this.disabled,error:this.error});return i`<div class="root"><div class="${t}"><div class="input-wrapper" @click="${this.handleWrapperClick}" @keydown="${this.handleWrapperKeyDown}">${this.label?i`<label class="label" id="${this.labelId}" for="input-${this.labelId}">${this.label}${this.required?i`<span aria-label="required">*</span>`:""}</label>`:""} <input id="input-${this.labelId}" class="input" type="${this.type}" name="${p(this.name)}" .value="${this.value}" placeholder="${p(this.label?void 0:this.placeholder)}" ?disabled="${this.disabled}" aria-labelledby="${p(this.label?this.labelId:void 0)}" aria-label="${p(this.label?void 0:this.placeholder||void 0)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.shouldShowCalendarIcon?i`<span class="icon" aria-hidden="true" @click="${this.handleIconClick}">${d({size:20,color:"var(--color-neutrals-text-medium)"})}</span>`:""}</div></div></div>`}};e([a({type:String})],u.prototype,"label",void 0),e([a({type:Boolean})],u.prototype,"required",void 0),e([a({type:String,reflect:!0})],u.prototype,"value",void 0),e([a({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([a({type:Boolean,reflect:!0})],u.prototype,"error",void 0),e([a({type:String})],u.prototype,"name",void 0),e([a({type:String})],u.prototype,"placeholder",void 0),e([a({type:String})],u.prototype,"type",void 0),e([a({type:String,reflect:!0})],u.prototype,"size",void 0),e([s()],u.prototype,"focused",void 0),e([n("input")],u.prototype,"inputElement",void 0),u=e([t("mq-input")],u);export{u as MqInput,MqInputChangeEvent};

package/dist/ui/mq-rating.d.ts

@@ -0,0 +1,30 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class MqRatingChangeEvent extends Event {
+    readonly value: number;
+    static eventName: string;
+    constructor(value: number);
+}
+/**
+ * @fires mq-rating-change - Fired when the user selects a rating.
+ */
+declare class MqRating extends LitElement {
+    static styles: lit.CSSResult[];
+    value: number;
+    max: number;
+    disabled: boolean;
+    label: string;
+    private _hoverValue;
+    private handleSelect;
+    private renderStar;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-rating": MqRating;
+    }
+}
+
+export { MqRating, MqRatingChangeEvent };

package/dist/ui/mq-rating.js

@@ -0,0 +1 @@
+import{_ as e,t}from"../chunks/custom-element-DA9Fxvxd.js";import{i as r,a as s,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n as a}from"../chunks/property-scuRaFcM.js";import{r as o}from"../chunks/state-LQivXIgA.js";const l=r`:host{display:inline-block}.rating{display:flex;gap:var(--sp-2_5);justify-content:center}.star{background:0 0;border:0;padding:0;width:var(--size-10);height:var(--size-10);cursor:pointer;color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;line-height:0}.star:disabled{cursor:not-allowed}.star:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm)}.star svg{width:100%;height:100%}`;class MqRatingChangeEvent extends Event{static{this.eventName="mq-rating-change"}constructor(e){super(MqRatingChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let n=class MqRating extends s{constructor(){super(...arguments),this.value=0,this.max=5,this.disabled=!1,this.label="",this._hoverValue=0}static{this.styles=[l]}handleSelect(e){this.disabled||(this.value=e,this.dispatchEvent(new MqRatingChangeEvent(e)))}renderStar(e){return i`<svg viewBox="0 0 24 24" fill="${e?"currentColor":"none"}" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="${"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z"}"/></svg>`}render(){const e=this._hoverValue||this.value,t=Array.from({length:this.max},(e,t)=>t+1);return i`<div class="rating" role="radiogroup" aria-label="${this.label}" @mouseleave="${()=>{this._hoverValue=0}}">${t.map(t=>i`<button type="button" class="star" role="radio" aria-checked="${t===this.value?"true":"false"}" aria-label="${`${t}/${this.max}`}" ?disabled="${this.disabled}" @mouseenter="${()=>{this.disabled||(this._hoverValue=t)}}" @focus="${()=>{this.disabled||(this._hoverValue=t)}}" @blur="${()=>{this._hoverValue=0}}" @click="${()=>this.handleSelect(t)}">${this.renderStar(t<=e)}</button>`)}</div>`}};e([a({type:Number,reflect:!0})],n.prototype,"value",void 0),e([a({type:Number,reflect:!0})],n.prototype,"max",void 0),e([a({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),e([a({type:String})],n.prototype,"label",void 0),e([o()],n.prototype,"_hoverValue",void 0),n=e([t("mq-rating")],n);export{n as MqRating,MqRatingChangeEvent};

package/dist/ui/mq-select.d.ts

@@ -0,0 +1,83 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class MqSelectChangeEvent extends Event {
+    readonly value: string | null;
+    static eventName: string;
+    constructor(value: string | null);
+}
+type SelectSize = "sm" | "md" | "lg";
+/**
+ * @fires MqSelectChangeEvent - Fired when the value changes.
+ */
+declare class MqSelect extends LitElement {
+    static styles: lit.CSSResult[];
+    private dropdownId;
+    private labelId;
+    private displayValue;
+    private optionNodes;
+    private focusedIndex;
+    label: string;
+    value: string | null;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    size: SelectSize;
+    private open;
+    name?: string;
+    private readonly defaultSlot?;
+    private readonly handleOutsideClick;
+    private readonly handleOptionRequest;
+    private readonly handleOptionHover;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changes: Map<string, unknown>): void;
+    private handleSlotChange;
+    private refreshOptions;
+    private syncSelection;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private focusTrigger;
+    private prepareActiveIndex;
+    private resetActiveStates;
+    private toggleOpen;
+    private openDropdown;
+    private close;
+    private selectOption;
+    private setActiveIndex;
+    private handleKeyDown;
+    private moveActive;
+    private handleTriggerClick;
+    protected render(): lit_html.TemplateResult<1>;
+}
+
+declare const OPTION_SELECT_EVENT: "mq-option-request-select";
+interface OptionRequestDetail {
+    option: MqOption;
+}
+declare class MqOption extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly internalId;
+    value: string;
+    label: string;
+    disabled: boolean;
+    selected: boolean;
+    active: boolean;
+    get optionId(): string;
+    protected render(): lit_html.TemplateResult<1>;
+    get displayLabel(): string;
+    private handleSelect;
+    private handlePointerEnter;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-option": MqOption;
+        "mq-select": MqSelect;
+    }
+}
+
+export { MqOption, MqSelect, MqSelectChangeEvent, OPTION_SELECT_EVENT };
+export type { OptionRequestDetail, SelectSize };

package/dist/ui/mq-select.js

@@ -0,0 +1 @@
+import{_ as e,t}from"../chunks/custom-element-DA9Fxvxd.js";import{i as o,a as i,x as s,E as n}from"../chunks/lit-element-DiWJYFwC.js";import{n as r}from"../chunks/property-scuRaFcM.js";import{r as l}from"../chunks/state-LQivXIgA.js";import{e as a}from"../chunks/query-CeeutdfT.js";import{e as d}from"../chunks/class-map-Co76I6aw.js";import{o as h}from"../chunks/if-defined-BYeVdwgd.js";import"../chunks/directive-2EDmOukv.js";const c=o`:host{display:inline-block;width:100%;min-width:200px;font-family:var(--font-body, "Roboto", sans-serif)}.root{position:relative;width:100%}.control{position:relative;width:100%;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--text-base--line-height)}.trigger{position:relative;display:flex;align-items:center;height:var(--select-height-md);width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-border-input);background:var(--color-neutrals-background-extraWeak);padding:var(--size-2) var(--size-4);cursor:pointer;gap:var(--size-3);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;text-align:left;color:var(--color-neutrals-text-default);overflow:hidden}.trigger:focus-visible{outline:0;box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.control.open .trigger{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.control.error .trigger{border-color:var(--color-error-border-default)}.control.error.open .trigger{border-color:var(--color-error-border-default);box-shadow:0 0 0 1px var(--color-error-border-default)}.trigger__content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1;min-width:0;position:relative}.label{font-family:var(--font-body);color:var(--color-neutrals-text-medium);font-size:var(--text-base);font-weight:var(--font-weight-normal);transition:transform .2s ease,font-size .2s ease,top .2s ease;transform-origin:left center;pointer-events:none}.control.disabled .label{opacity:.65}.control.filled .label,.control.open .label{font-size:var(--text-xs)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutrals-text-default);line-height:1;display:flex;align-items:center;width:100%;font-family:var(--font-body);font-size:var(--text-base);transition:height .2s ease;height:0}.control.filled .value,.control.open .value{margin-top:var(--size-1);height:20px}.icon{width:var(--size-3);height:var(--size-3);flex-shrink:0;position:relative}.icon::before{content:"";position:absolute;inset:0;mask:url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2071 0.292894C10.5976 0.683418 10.5976 1.31658 10.2071 1.70711L6.20711 5.70711C5.81658 6.09763 5.18342 6.09763 4.79289 5.70711L0.792894 1.70711C0.402369 1.31658 0.402369 0.683417 0.792894 0.292893C1.18342 -0.0976311 1.81658 -0.0976311 2.20711 0.292893L5.5 3.58579L8.79289 0.292894C9.18342 -0.0976307 9.81658 -0.0976307 10.2071 0.292894Z' fill='%230F77AE'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--color-primary-link-default);transition:transform .2s ease}.control.open .icon::before{transform:rotate(180deg)}.control.error .icon::before{background:var(--color-error-border-default)}.dropdown{position:absolute;top:calc(100% + var(--size-2,8px));left:0;right:0;z-index:10;border-radius:var(--border-radius-lg);background:var(--color-neutrals-background-extraWeak);box-shadow:0 1px 8px 0 rgba(0,0,0,.1);max-height:240px;overflow-y:auto;box-sizing:border-box}.dropdown[hidden]{display:none}.empty-state{padding:var(--size-3) var(--size-5);color:var(--color-neutrals-text-medium);font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-family:var(--font-body)}:host([size=sm]) .trigger{height:var(--select-height-sm);padding:var(--size-1) var(--size-3);font-size:var(--text-sm)}:host([size=sm]) .label{font-size:var(--text-sm)}:host([size=sm]) .control.filled .label,:host([size=sm]) .control.open .label{font-size:var(--text-xxs)}:host([size=sm]) .value{font-size:var(--text-sm)}:host([size=md]) .trigger{height:var(--select-height-md)}:host([size=lg]) .trigger{height:var(--select-height-lg);padding:var(--size-2) var(--size-3);font-size:var(--text-lg)}:host([size=lg]) .label{font-size:var(--text-lg)}:host([size=lg]) .control.filled .label,:host([size=lg]) .control.open .label{font-size:var(--text-sm)}:host([size=lg]) .value{font-size:var(--text-lg)}`,p=o`:host{display:block}button.option{appearance:none;border:none;outline:0;background:0 0;width:100%;padding:var(--size-3) var(--size-5);text-align:left;font:inherit;color:var(--color-neutrals-text-default);display:flex;align-items:center;gap:var(--size-3);cursor:pointer}:host([active]) button.option,button.option:hover{background:var(--color-primary-light)}:host([selected]) button.option{color:var(--color-primary);font-weight:var(--font-weight-medium,500)}:host([disabled]) button.option{opacity:.5;cursor:not-allowed}button.option:focus-visible{outline:0;background:var(--color-primary-light)}`,v="mq-option-request-select";let u=class MqOption extends i{constructor(){super(...arguments),this.internalId=`${"mq-option"}-${Math.random().toString(36).slice(2,10)}`,this.label="",this.disabled=!1,this.selected=!1,this.active=!1}static{this.styles=[p]}get optionId(){return this.internalId}render(){return s`<button id="${this.internalId}" class="option" role="option" type="button" aria-selected="${this.selected?"true":"false"}" ?disabled="${this.disabled}" tabindex="-1" @click="${this.handleSelect}" @pointerenter="${this.handlePointerEnter}"><slot></slot></button>`}get displayLabel(){const e=(this.textContent??"").trim();return this.label||e}handleSelect(e){e.stopPropagation(),this.disabled||this.dispatchEvent(new CustomEvent(v,{detail:{option:this},bubbles:!0,composed:!0}))}handlePointerEnter(){this.disabled||this.dispatchEvent(new CustomEvent(`${v}:hover`,{detail:{option:this},bubbles:!0,composed:!0}))}};e([r({type:String,reflect:!0})],u.prototype,"value",void 0),e([r({type:String})],u.prototype,"label",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"selected",void 0),e([r({type:Boolean,reflect:!0})],u.prototype,"active",void 0),u=e([t("mq-option")],u);const b=e=>`${e}-${Math.random().toString(36).slice(2,10)}`;class MqSelectChangeEvent extends Event{static{this.eventName="onvaluechange"}constructor(e){super(MqSelectChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let f=class MqSelect extends i{constructor(){super(...arguments),this.dropdownId=b("mq-select-dropdown"),this.labelId=b("mq-select-label"),this.displayValue="",this.optionNodes=[],this.focusedIndex=-1,this.label="",this.value=null,this.disabled=!1,this.error=!1,this.required=!1,this.size="md",this.open=!1,this.handleOutsideClick=e=>{if(!this.open)return;e.composedPath().includes(this)||this.close()},this.handleOptionRequest=e=>{const{option:t}=e.detail;t&&this.selectOption(t)},this.handleOptionHover=e=>{if(!this.open)return;const t=this.optionNodes.indexOf(e.detail.option);t>=0&&this.setActiveIndex(t)},this.handleKeyDown=e=>{if(this.open){if(this.open)switch(e.key){case"ArrowDown":case"ArrowUp":{e.preventDefault();const t="ArrowDown"===e.key?1:-1;this.moveActive(t);break}case"Enter":case" ":{e.preventDefault();const t=this.optionNodes[this.focusedIndex];t&&this.selectOption(t);break}case"Escape":e.preventDefault(),this.close();break;case"Tab":this.close()}}else"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),this.openDropdown())}}static{this.styles=[c]}connectedCallback(){super.connectedCallback(),this.addEventListener(v,this.handleOptionRequest),this.addEventListener(`${v}:hover`,this.handleOptionHover)}disconnectedCallback(){this.removeEventListener(v,this.handleOptionRequest),this.removeEventListener(`${v}:hover`,this.handleOptionHover),this.removeGlobalListeners(),super.disconnectedCallback()}firstUpdated(){this.refreshOptions(),this.syncSelection()}updated(e){e.has("value")&&this.syncSelection(),e.has("open")&&(this.open?(this.addGlobalListeners(),this.focusTrigger(),this.prepareActiveIndex()):(this.removeGlobalListeners(),this.focusedIndex=-1,this.resetActiveStates(),this.dropdownId=b("mq-select-dropdown")))}handleSlotChange(){this.refreshOptions(),this.syncSelection()}refreshOptions(){const e=this.defaultSlot;if(!e)return;const t=e.assignedElements({flatten:!0}).filter(e=>e instanceof u);this.optionNodes=t,this.open&&0===t.length&&(this.focusedIndex=-1)}syncSelection(){const e=this.optionNodes.find(e=>e.value===this.value);for(const t of this.optionNodes)t.selected=t===e;this.displayValue=e?.displayLabel??"",this.focusedIndex=e?this.optionNodes.indexOf(e):-1,!e&&this.value&&(this.value=null)}addGlobalListeners(){window.addEventListener("pointerdown",this.handleOutsideClick,{capture:!0}),window.addEventListener("keydown",this.handleKeyDown,!0)}removeGlobalListeners(){window.removeEventListener("pointerdown",this.handleOutsideClick,{capture:!0}),window.removeEventListener("keydown",this.handleKeyDown,!0)}focusTrigger(){const e=this.renderRoot.querySelector(".trigger");e?.focus({preventScroll:!0})}prepareActiveIndex(){const e=this.optionNodes.findIndex(e=>e.selected&&!e.disabled);if(e>=0)return void this.setActiveIndex(e);const t=this.optionNodes.findIndex(e=>!e.disabled);t>=0&&this.setActiveIndex(t)}resetActiveStates(){for(const e of this.optionNodes)e.active=!1}toggleOpen(e){if(this.disabled)return;const t="boolean"==typeof e?e:!this.open;t!==this.open&&(this.open=t,t||(this.focusedIndex=this.optionNodes.findIndex(e=>e.selected)))}openDropdown(){this.open||this.toggleOpen(!0)}close(){this.open&&this.toggleOpen(!1)}selectOption(e){if(e.disabled)return;const t=this.value;this.value=e.value??null,this.displayValue=e.displayLabel,this.focusedIndex=this.optionNodes.indexOf(e),this.close(),t!==this.value&&(this.dispatchEvent(new MqSelectChangeEvent(this.value)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}setActiveIndex(e){if(e<0||e>=this.optionNodes.length)return;this.focusedIndex=e,this.optionNodes.forEach((t,o)=>{t.active=o===e});const t=this.optionNodes[e];t&&t.scrollIntoView({block:"nearest"})}moveActive(e){if(0===this.optionNodes.length)return;let t=this.focusedIndex;t<0&&(t=this.optionNodes.findIndex(e=>e.selected&&!e.disabled)),t<0&&(t=this.optionNodes.findIndex(e=>!e.disabled));const o=this.optionNodes.length;for(let i=0;i<o;i+=1){t=(t+e+o)%o;const i=this.optionNodes[t];if(!i?.disabled){this.setActiveIndex(t);break}}}handleTriggerClick(){this.toggleOpen()}render(){const e=!!this.displayValue,t=d({control:!0,open:this.open,filled:e,disabled:this.disabled,error:this.error});return s`<div class="root"><input type="hidden" name="${h(this.name)}" value="${h(this.value??void 0)}"><div class="${t}"><button class="trigger" type="button" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open?"true":"false"}" aria-disabled="${this.disabled?"true":"false"}" aria-controls="${h(this.open?this.dropdownId:void 0)}" aria-labelledby="${h(this.label?this.labelId:void 0)}" aria-label="${h(this.label?void 0:this.displayValue||void 0)}" ?disabled="${this.disabled}" @click="${this.handleTriggerClick}"><span class="trigger__content">${this.label?s`<span class="label" id="${this.labelId}">${this.label}${this.required?s`<span aria-label="required">*</span>`:n}</span>`:n} <span class="value" aria-hidden="${e?"false":"true"}">${e?this.displayValue:n} </span></span><span class="icon" aria-hidden="true"></span></button></div><div id="${this.dropdownId}" class="dropdown" role="listbox" aria-labelledby="${h(this.label?this.labelId:void 0)}" ?hidden="${!this.open}"><slot @slotchange="${this.handleSlotChange}"></slot>${0===this.optionNodes.length?s`<div class="empty-state">No options available</div>`:n}</div></div>`}};e([l()],f.prototype,"displayValue",void 0),e([r({type:String})],f.prototype,"label",void 0),e([r({type:String,reflect:!0})],f.prototype,"value",void 0),e([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),e([r({type:Boolean,reflect:!0})],f.prototype,"error",void 0),e([r({type:Boolean})],f.prototype,"required",void 0),e([r({type:String,reflect:!0})],f.prototype,"size",void 0),e([l()],f.prototype,"open",void 0),e([r({type:String})],f.prototype,"name",void 0),e([a("slot")],f.prototype,"defaultSlot",void 0),f=e([t("mq-select")],f);export{u as MqOption,f as MqSelect,MqSelectChangeEvent,v as OPTION_SELECT_EVENT};

package/dist/ui/mq-skeleton.d.ts

@@ -0,0 +1,18 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class MqSkeleton extends LitElement {
+    static styles: lit.CSSResult[];
+    width: string;
+    height: string;
+    borderRadius: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-skeleton": MqSkeleton;
+    }
+}
+
+export { MqSkeleton };

package/dist/ui/mq-skeleton.js

@@ -0,0 +1 @@
+import{_ as r,t as e}from"../chunks/custom-element-DA9Fxvxd.js";import{i as t,a as s,x as o}from"../chunks/lit-element-DiWJYFwC.js";import{n as i}from"../chunks/property-scuRaFcM.js";import{o as d}from"../chunks/style-map-CIdqdn7C.js";import"../chunks/directive-2EDmOukv.js";const a=t`:host{display:block}.skeleton{border-radius:var(--border-radius-md);background-color:var(--color-gray-light);animation:skeleton-pulse 1.5s infinite}.skeleton--none{border-radius:var(--border-radius-none)}.skeleton--sm{border-radius:var(--border-radius-sm)}.skeleton--md{border-radius:var(--border-radius-md)}.skeleton--lg{border-radius:var(--border-radius-lg)}.skeleton--xl{border-radius:var(--border-radius-xl)}.skeleton--2xl{border-radius:var(--border-radius-2xl)}.skeleton--full{border-radius:var(--border-radius-full)}@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}`;let l=class MqSkeleton extends s{constructor(){super(...arguments),this.width="100%",this.height="20px",this.borderRadius="sm"}static{this.styles=[a]}render(){const r={width:this.width,height:this.height};return o`<div class="skeleton skeleton--${this.borderRadius}" style="${d(r)}"></div>`}};r([i({type:String,reflect:!0})],l.prototype,"width",void 0),r([i({type:String,reflect:!0})],l.prototype,"height",void 0),r([i({type:String,reflect:!0,attribute:"border-radius"})],l.prototype,"borderRadius",void 0),l=r([e("mq-skeleton")],l);export{l as MqSkeleton};

package/dist/ui/mq-tabs.d.ts

@@ -0,0 +1,56 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class MqTabsSelectEvent extends Event {
+    readonly value: string;
+    static eventName: string;
+    constructor(value: string);
+}
+/**
+ * @fires onvaluechange - Emitted when the value is changed
+ */
+declare class MqTabs extends LitElement {
+    static styles: lit.CSSResult[];
+    defaultValue: string | null;
+    value: string | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private onRequestSelect;
+    private findFirstTriggerValue;
+    private applySelection;
+    render(): lit_html.TemplateResult<1>;
+}
+declare class MqTabsList extends LitElement {
+    static styles: lit.CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeyDown;
+    render(): lit_html.TemplateResult<1>;
+}
+declare class MqTabsTrigger extends LitElement {
+    static styles: lit.CSSResult[];
+    value: string;
+    disabled: boolean;
+    active: boolean;
+    private handleClick;
+    render(): lit_html.TemplateResult<1>;
+}
+declare class MqTabsContent extends LitElement {
+    static styles: lit.CSSResult[];
+    value: string;
+    active: boolean;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-tabs": MqTabs;
+        "mq-tabs-list": MqTabsList;
+        "mq-tabs-trigger": MqTabsTrigger;
+        "mq-tabs-content": MqTabsContent;
+    }
+}
+
+export { MqTabs, MqTabsContent, MqTabsList, MqTabsSelectEvent, MqTabsTrigger };

package/dist/ui/mq-tabs.js

@@ -0,0 +1 @@
+import{_ as t,t as e}from"../chunks/custom-element-DA9Fxvxd.js";import{i as o,a as r,x as s}from"../chunks/lit-element-DiWJYFwC.js";import{n as a}from"../chunks/property-scuRaFcM.js";const i=o`:host{display:block}`,l=o`:host{display:block}.list{width:100%;border-radius:var(--border-radius-md);overflow-x:auto;overflow-y:hidden;background-color:var(--color-card);display:inline-flex;align-items:center;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--color-neutrals-border-weak) transparent}.list{scrollbar-width:none;-ms-overflow-style:none}.list::-webkit-scrollbar{display:none}`,n=o`:host{display:inline-block;flex:1}button.trigger{position:relative;width:100%;min-width:max-content;-webkit-tap-highlight-color:transparent;background:0 0;color:var(--color-neutrals-link-dark);border:none;outline:0;cursor:pointer;box-sizing:border-box;padding:var(--size-3) var(--size-4) calc(var(--size-3) - 1px);height:54px;border-bottom:1px solid var(--color-border);transition:color .15s ease,background .15s ease,border-bottom-width .15s ease,padding-bottom .15s ease;font-size:var(--text-base);line-height:var(--text-base--line-height);font-weight:var(--font-weight-bold);font-family:var(--font-body);white-space:nowrap;outline:0}button.trigger::after{content:"";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--color-primary-background-default);transform:translateX(-50%);transition:width .3s ease}:host([disabled]) button.trigger{opacity:.5;cursor:not-allowed;pointer-events:none}:host([active]) button.trigger{color:var(--color-primary-text-link);border-bottom-width:2px;border-bottom-color:transparent;padding-bottom:calc(var(--size-3) - 2px)}:host([active]) button.trigger::after{width:100%}button.trigger:focus-visible{border-radius:var(--border-radius-sm)}`,c=o`:host{display:block}.panel[hidden]{display:none}.panel{padding:var(--size-4) 0}`;class MqTabsSelectEvent extends Event{static{this.eventName="onvaluechange"}constructor(t){super(MqTabsSelectEvent.eventName,{bubbles:!0,composed:!0}),this.value=t}}let d=class MqTabs extends r{constructor(){super(...arguments),this.defaultValue=null,this.value=null,this.onRequestSelect=t=>{const e=t;e.value&&(this.value=e.value)}}static{this.styles=[i]}connectedCallback(){super.connectedCallback(),this.addEventListener(MqTabsSelectEvent.eventName,this.onRequestSelect)}disconnectedCallback(){this.removeEventListener(MqTabsSelectEvent.eventName,this.onRequestSelect),super.disconnectedCallback()}firstUpdated(){if(!this.value){const t=this.defaultValue??this.findFirstTriggerValue();t&&(this.value=t)}this.applySelection()}updated(t){t.has("value")&&this.applySelection()}findFirstTriggerValue(){const t=this.querySelector("mq-tabs-trigger[value]");return t?.value??null}applySelection(){const t=this.value,e=Array.from(this.querySelectorAll("mq-tabs-trigger")),o=Array.from(this.querySelectorAll("mq-tabs-content"));for(const o of e){const e=!!t&&o.value===t;o.toggleAttribute("active",e)}for(const e of o){const o=!!t&&e.value===t;e.toggleAttribute("active",o)}}render(){return s`<slot></slot>`}};t([a({type:String,attribute:"default-value"})],d.prototype,"defaultValue",void 0),t([a({type:String,reflect:!0})],d.prototype,"value",void 0),d=t([e("mq-tabs")],d);let u=class MqTabsList extends r{constructor(){super(...arguments),this.handleKeyDown=t=>{if("ArrowLeft"!==t.key&&"ArrowRight"!==t.key)return;t.preventDefault();const e=Array.from(this.querySelectorAll("mq-tabs-trigger:not([disabled])"));if(0===e.length)return;const o=e.findIndex(t=>t.active);let r;r="ArrowRight"===t.key?-1===o?0:(o+1)%e.length:-1===o||0===o?e.length-1:o-1;const s=e[r];if(s){s.dispatchEvent(new MqTabsSelectEvent(s.value));const t=s.shadowRoot?.querySelector("button");t?.focus()}}}static{this.styles=[l]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return s`<div class="list" role="tablist" tabindex="0"><slot></slot></div>`}};u=t([e("mq-tabs-list")],u);let b=class MqTabsTrigger extends r{constructor(){super(...arguments),this.disabled=!1,this.active=!1}static{this.styles=[n]}handleClick(){!this.disabled&&this.value&&this.dispatchEvent(new MqTabsSelectEvent(this.value))}render(){return s`<button class="trigger" role="tab" aria-selected="${this.active?"true":"false"}" tabindex="${this.active?0:-1}" type="button" @click="${this.handleClick}"><slot></slot></button>`}};t([a({type:String,reflect:!0})],b.prototype,"value",void 0),t([a({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),t([a({type:Boolean,reflect:!0})],b.prototype,"active",void 0),b=t([e("mq-tabs-trigger")],b);let h=class MqTabsContent extends r{constructor(){super(...arguments),this.active=!1}static{this.styles=[c]}render(){return s`<div class="panel" role="tabpanel" ?hidden="${!this.active}"><slot></slot></div>`}};t([a({type:String,reflect:!0})],h.prototype,"value",void 0),t([a({type:Boolean,reflect:!0})],h.prototype,"active",void 0),h=t([e("mq-tabs-content")],h);export{d as MqTabs,h as MqTabsContent,u as MqTabsList,MqTabsSelectEvent,b as MqTabsTrigger};

package/dist/ui/mq-text-button.d.ts

@@ -0,0 +1,39 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type TextButtonVariant = "primary" | "black" | "white";
+type TextButtonSize = "xs" | "sm" | "md" | "lg";
+type TextButtonFontWeight = "normal" | "medium" | "semibold" | "bold";
+declare class MqTextButton extends LitElement {
+    static styles: lit.CSSResult[];
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    variant: TextButtonVariant;
+    size: TextButtonSize;
+    disabled: boolean;
+    type: "button" | "submit" | "reset";
+    underlined: boolean;
+    fontWeight: TextButtonFontWeight;
+    name?: string;
+    value?: string;
+    form?: string;
+    formaction?: string;
+    formenctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+    formmethod?: "get" | "post";
+    formnovalidate?: boolean;
+    formtarget?: "_self" | "_blank" | "_parent" | "_top";
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-text-button": MqTextButton;
+    }
+}
+
+export { MqTextButton };
+export type { TextButtonFontWeight, TextButtonSize, TextButtonVariant };

package/dist/ui/mq-text-button.js

@@ -0,0 +1 @@
+import{_ as t,t as o}from"../chunks/custom-element-DA9Fxvxd.js";import{i as e,a as r,x as i}from"../chunks/lit-element-DiWJYFwC.js";import{n}from"../chunks/property-scuRaFcM.js";import{e as a}from"../chunks/class-map-Co76I6aw.js";import{o as s}from"../chunks/if-defined-BYeVdwgd.js";import"../chunks/directive-2EDmOukv.js";const l=e`:host{display:inline-block}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--size-1);background:0 0;border:none;border-radius:var(--border-radius-md);font-family:var(--font-body);white-space:nowrap;letter-spacing:0;font-weight:var(--font-weight-medium);transition:all .2s ease;outline:0;cursor:pointer;position:relative;padding:0;text-decoration:none;--mq-text-btn-ring-color:var(--color-primary)}button:focus-visible{box-shadow:0 0 0 1.5px var(--color-background,#fff),0 0 0 3.5px var(--mq-text-btn-ring-color,var(--color-primary));z-index:1}button:disabled{opacity:.5;pointer-events:none;cursor:not-allowed}button.primary{color:var(--color-primary);--mq-text-btn-ring-color:var(--color-primary)}button.primary:hover:not(:disabled){color:var(--color-primary-dark);background:var(--color-primary-light)}button.black{color:var(--color-black,#000);--mq-text-btn-ring-color:var(--color-black, #000000)}button.black:hover:not(:disabled){color:var(--color-gray-dark,#333);background:var(--color-gray-lighter,#f8f9fa)}button.white{color:var(--color-white,#fff);--mq-text-btn-ring-color:var(--color-white, #ffffff)}button.white:hover:not(:disabled){color:var(--color-gray-lighter,#f8f9fa);background:rgba(255,255,255,.1)}button.xs{padding:0;font-size:var(--text-xs);line-height:var(--text-xs--line-height)}button.sm{padding:0;font-size:var(--text-sm);line-height:var(--text-sm--line-height)}button.md{padding:0;font-size:var(--text-base);line-height:var(--text-base--line-height)}button.lg{padding:var(--size-1) 0;font-size:var(--text-base);line-height:var(--text-base--line-height)}button.font-normal{font-weight:var(--font-weight-normal,400)}button.font-medium{font-weight:var(--font-weight-medium,500)}button.font-semibold{font-weight:var(--font-weight-semibold,600)}button.font-bold{font-weight:var(--font-weight-bold,700)}button.underlined{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}button ::slotted(svg){pointer-events:none;width:var(--size-6);height:var(--size-6);flex-shrink:0}button ::slotted(*){pointer-events:none}`;let d=class MqTextButton extends r{constructor(){super(...arguments),this.variant="primary",this.size="md",this.disabled=!1,this.type="button",this.underlined=!1,this.fontWeight="medium"}static{this.styles=[l]}static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0}}render(){const t={[this.variant]:!0,[this.size]:!0,[`font-${this.fontWeight}`]:!0,underlined:this.underlined,disabled:this.disabled};return i`<button class="${a(t)}" type="${this.type}" ?disabled="${this.disabled}" name="${s(this.name)}" value="${s(this.value)}" form="${s(this.form)}" formaction="${s(this.formaction)}" formenctype="${s(this.formenctype)}" formmethod="${s(this.formmethod)}" ?formnovalidate="${this.formnovalidate??!1}" formtarget="${s(this.formtarget)}"><slot></slot></button>`}};t([n({type:String,reflect:!0})],d.prototype,"variant",void 0),t([n({type:String,reflect:!0})],d.prototype,"size",void 0),t([n({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),t([n({type:String,reflect:!0})],d.prototype,"type",void 0),t([n({type:Boolean,reflect:!0})],d.prototype,"underlined",void 0),t([n({type:String,reflect:!0})],d.prototype,"fontWeight",void 0),t([n({type:String})],d.prototype,"name",void 0),t([n({type:String})],d.prototype,"value",void 0),t([n({type:String})],d.prototype,"form",void 0),t([n({type:String})],d.prototype,"formaction",void 0),t([n({type:String})],d.prototype,"formenctype",void 0),t([n({type:String})],d.prototype,"formmethod",void 0),t([n({type:Boolean})],d.prototype,"formnovalidate",void 0),t([n({type:String})],d.prototype,"formtarget",void 0),d=t([o("mq-text-button")],d);export{d as MqTextButton};

package/dist/ui/mq-textarea.d.ts

@@ -0,0 +1,38 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare class MqTextareaChangeEvent extends Event {
+    readonly value: string;
+    static eventName: string;
+    constructor(value: string);
+}
+/**
+ * @fires MqTextareaChangeEvent - Fired when the value changes.
+ */
+declare class MqTextarea extends LitElement {
+    static styles: lit.CSSResult[];
+    private labelId;
+    label: string;
+    required: boolean;
+    value: string;
+    disabled: boolean;
+    error: boolean;
+    name?: string;
+    placeholder: string;
+    rows: number;
+    maxlength?: number;
+    resize: boolean;
+    private focused;
+    private readonly textareaElement?;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleWrapperClick;
+    private handleWrapperKeyDown;
+    focus(): void;
+    blur(): void;
+    protected render(): lit_html.TemplateResult<1>;
+}
+
+export { MqTextarea, MqTextareaChangeEvent };

package/dist/ui/mq-textarea.js

@@ -0,0 +1 @@
+import{_ as e,t}from"../chunks/custom-element-DA9Fxvxd.js";import{i as r,a,x as o}from"../chunks/lit-element-DiWJYFwC.js";import{n as s}from"../chunks/property-scuRaFcM.js";import{r as i}from"../chunks/state-LQivXIgA.js";import{e as l}from"../chunks/query-CeeutdfT.js";import{e as n}from"../chunks/class-map-Co76I6aw.js";import{o as d}from"../chunks/if-defined-BYeVdwgd.js";import"../chunks/directive-2EDmOukv.js";const c=r`:host{display:inline-block;width:100%;min-width:200px;font-family:var(--font-body, "Roboto", sans-serif)}.root{position:relative;width:100%}.control{position:relative;width:100%;font-size:var(--text-base);line-height:var(--text-base--line-height)}.textarea-wrapper{cursor:text;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:flex-start;min-height:var(--size-12);width:100%;border-radius:var(--border-radius-lg);border:1px solid var(--color-neutrals-border-default);background:var(--color-neutrals-background-extraWeak);padding:var(--size-2) var(--size-4);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.textarea-wrapper:focus-within{outline:0;box-shadow:0 0 0 1.5px var(--color-background),0 0 0 3.5px var(--color-primary)}.control.focused .textarea-wrapper{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.control.error .textarea-wrapper{border-color:var(--color-error-border-default)}.control.error.focused .textarea-wrapper{border-color:var(--color-error-border-default);box-shadow:0 0 0 1px var(--color-error-border-default)}.control.error .textarea-wrapper:focus-within{box-shadow:0 0 0 1px var(--color-error-border-default)}.label{color:var(--color-neutrals-text-medium);font-size:var(--text-base);font-weight:var(--font-weight-normal);transition:transform .2s ease,font-size .2s ease,top .2s ease;transform-origin:left center;pointer-events:none;position:absolute;left:var(--sp-4);top:var(--size-4);transform:translateY(0)}.control.disabled .label{opacity:.65}.control.filled .label,.control.focused .label{font-size:var(--text-xs);top:var(--sp-1);transform:translateY(0)}.textarea{border:none;outline:0;background:0 0;font-family:inherit;font-size:var(--text-base);color:var(--color-neutrals-text-default);width:100%;padding:0;line-height:1.5;transition:margin-top .2s ease;margin-top:0;resize:none;min-height:2em}.control.resizable .textarea{resize:vertical}.control.filled .textarea-wrapper:has(.label) .textarea,.control.focused .textarea-wrapper:has(.label) .textarea{margin-top:var(--sp-6)}.textarea::placeholder{color:var(--color-neutrals-text-medium);opacity:.7}.textarea:disabled{opacity:.65;cursor:not-allowed}.character-count{position:absolute;top:var(--sp-1);right:var(--sp-4);font-size:var(--text-xs);color:var(--color-neutrals-text-medium);pointer-events:none;z-index:1}.control.error .character-count{color:var(--color-error-border-default)}`;class MqTextareaChangeEvent extends Event{static{this.eventName="onvaluechange"}constructor(e){super(MqTextareaChangeEvent.eventName,{bubbles:!0,composed:!0}),this.value=e}}let h=class MqTextarea extends a{constructor(){super(...arguments),this.labelId=`${"mq-textarea-label"}-${Math.random().toString(36).slice(2,10)}`,this.label="",this.required=!1,this.value="",this.disabled=!1,this.error=!1,this.placeholder="",this.rows=3,this.resize=!1,this.focused=!1}static{this.styles=[c]}handleInput(e){const t=e.target,r=this.value;this.value=t.value,r!==this.value&&(this.dispatchEvent(new MqTextareaChangeEvent(this.value)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}handleFocus(){this.focused=!0}handleBlur(){this.focused=!1}handleWrapperClick(){this.focus()}handleWrapperKeyDown(e){e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.focus()))}focus(){this.textareaElement?.focus()}blur(){this.textareaElement?.blur()}render(){const e=!!this.value,t=this.maxlength&&(e||this.focused)&&this.label,r=n({control:!0,filled:e,focused:this.focused,disabled:this.disabled,error:this.error,resizable:this.resize});return o`<div class="root"><div class="${r}"><div class="textarea-wrapper" @click="${this.handleWrapperClick}" @keydown="${this.handleWrapperKeyDown}">${this.label?o`<label class="label" id="${this.labelId}" for="textarea-${this.labelId}">${this.label}${this.required?o`<span aria-label="required">*</span>`:""}</label>`:""} ${t?o`<div class="character-count">${this.value.length}/${this.maxlength}</div>`:""} <textarea id="textarea-${this.labelId}" class="textarea" name="${d(this.name)}" .value="${this.value}" rows="${this.rows}" maxlength="${d(this.maxlength)}" placeholder="${d(this.label?void 0:this.placeholder)}" ?disabled="${this.disabled}" aria-labelledby="${d(this.label?this.labelId:void 0)}" aria-label="${d(this.label?void 0:this.placeholder||void 0)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea></div></div></div>`}};e([s({type:String})],h.prototype,"label",void 0),e([s({type:Boolean})],h.prototype,"required",void 0),e([s({type:String,reflect:!0})],h.prototype,"value",void 0),e([s({type:Boolean,reflect:!0})],h.prototype,"disabled",void 0),e([s({type:Boolean,reflect:!0})],h.prototype,"error",void 0),e([s({type:String})],h.prototype,"name",void 0),e([s({type:String})],h.prototype,"placeholder",void 0),e([s({type:Number})],h.prototype,"rows",void 0),e([s({type:Number})],h.prototype,"maxlength",void 0),e([s({type:Boolean})],h.prototype,"resize",void 0),e([i()],h.prototype,"focused",void 0),e([l("textarea")],h.prototype,"textareaElement",void 0),h=e([t("mq-textarea")],h);export{h as MqTextarea,MqTextareaChangeEvent};

package/dist/ui/mq-time-slot-picker.d.ts

@@ -0,0 +1,84 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import './mq-skeleton.js';
+
+interface TimeSlot {
+    key: string;
+    date: string;
+}
+interface DateSelectEventDetail {
+    date: string;
+}
+interface SlotSelectEventDetail {
+    date: string;
+    slotId: string;
+    slotKey: string;
+}
+interface NavigationEventDetail {
+    windowStartDate: string;
+}
+declare class WindowChangeEvent extends Event {
+    readonly detail: {
+        windowStartDate: string;
+    };
+    static eventName: string;
+    constructor(detail: {
+        windowStartDate: string;
+    });
+}
+declare class SlotSelectEvent extends Event {
+    readonly detail: {
+        slot: TimeSlot;
+    };
+    static eventName: string;
+    constructor(detail: {
+        slot: TimeSlot;
+    });
+}
+/**
+ * @fires window-change - Emitted when the window start date changes
+ * @fires slot-select - Emitted when a time slot is selected, includes slot with key and date
+ */
+declare class MqTimeSlotPicker extends LitElement {
+    static styles: lit.CSSResult[];
+    locale: string;
+    /**
+     * IANA timezone used to compute each slot's day column and time label.
+     * When omitted, the browser's local timezone is used. Pass the patient's
+     * timezone here so the picker matches the rest of the booking flow.
+     */
+    timezone?: string;
+    slots: TimeSlot[];
+    selectedDate?: string;
+    selectedSlotKey?: string;
+    windowStartDate?: string;
+    visibleDays: number;
+    isLoading: boolean;
+    private getStartDate;
+    /**
+     * Organizes the flat array of slots into a map by date
+     */
+    private get slotsByDate();
+    private get visibleDaysList();
+    private get canGoPrevious();
+    private handlePrevious;
+    private handleNext;
+    private handleTimeSlotSelect;
+    private formatDate;
+    private formatDayHeader;
+    private isDateSelected;
+    private isTimeSlotSelected;
+    private get hasSlots();
+    private renderSkeletonSlots;
+    private renderEmptyState;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mq-time-slot-picker": MqTimeSlotPicker;
+    }
+}
+
+export { MqTimeSlotPicker, SlotSelectEvent, WindowChangeEvent };
+export type { DateSelectEventDetail, NavigationEventDetail, SlotSelectEventDetail, TimeSlot };

package/dist/ui/mq-time-slot-picker.js

@@ -0,0 +1 @@
+import"../chunks/custom-element-DA9Fxvxd.js";import"../chunks/lit-element-DiWJYFwC.js";import"../chunks/property-scuRaFcM.js";import"../chunks/class-map-Co76I6aw.js";export{M as MqTimeSlotPicker,S as SlotSelectEvent,W as WindowChangeEvent}from"../chunks/index-Bxh8Qfwr.js";import"./mq-skeleton.js";import"../chunks/runtime-Bg1WXVCx.js";import"../chunks/parseISO-jT42c8Ob.js";import"../chunks/format-Cm3B1GMy.js";import"../chunks/isSameDay-DPfclwIL.js";import"../chunks/directive-2EDmOukv.js";import"../chunks/style-map-CIdqdn7C.js";