@flitsmeister/design-system 2.2.35 → 3.0.0

package/dist/fm-radio-input/fm-radio-input.js

@@ -0,0 +1,88 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { fmRadioInputStyle } from './fm-radio-input.style.js';
+let FmRadioInput = class FmRadioInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Radio group name forwarded to the native input. */
+        this.name = '';
+        /** Submitted value for this radio option. */
+        this.value = '';
+        /** Checked state. */
+        this.checked = false;
+        /** Disabled state. */
+        this.disabled = false;
+        /** Gray border in default state (not hover, not focused, not checked). */
+        this.grayBorder = false;
+        /** Media slot placement: 'prepend' | 'append'. Default `'append'`. */
+        this.mediaPlacement = 'append';
+    }
+    handleChange(e) {
+        const input = e.target;
+        this.checked = input.checked;
+        if (this.checked) {
+            this.dispatchEvent(new CustomEvent('fm-radio-input', {
+                detail: { name: this.name, value: this.value },
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    render() {
+        const cardClasses = ['radio-card', this.grayBorder ? 'radio-card--gray-border' : '']
+            .filter(Boolean)
+            .join(' ');
+        return html `
+      <div class=${cardClasses}>
+        <input
+          class="radio-native"
+          type="radio"
+          name=${this.name}
+          value=${this.value}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <div class="radio-body">
+          <div class="radio-media">
+            <slot name="media"></slot>
+          </div>
+          <div class="radio-text">
+            <slot></slot>
+            <slot name="description"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static { this.styles = [fmRadioInputStyle]; }
+};
+__decorate([
+    property({ type: String })
+], FmRadioInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], FmRadioInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmRadioInput.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmRadioInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'gray-border', reflect: true })
+], FmRadioInput.prototype, "grayBorder", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'media-placement' })
+], FmRadioInput.prototype, "mediaPlacement", void 0);
+FmRadioInput = __decorate([
+    customElement('fm-radio-input')
+], FmRadioInput);
+export { FmRadioInput };
+//# sourceMappingURL=fm-radio-input.js.map

package/dist/fm-radio-input/fm-radio-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-radio-input.js","sourceRoot":"","sources":["../../src/fm-radio-input/fm-radio-input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAkCtD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACL,sDAAsD;QAC1B,SAAI,GAAG,EAAE,CAAA;QAErC,6CAA6C;QACjB,UAAK,GAAG,EAAE,CAAA;QAEtC,qBAAqB;QACuB,YAAO,GAAG,KAAK,CAAA;QAE3D,sBAAsB;QACsB,aAAQ,GAAG,KAAK,CAAA;QAE5D,0EAA0E;QACJ,eAAU,GAAG,KAAK,CAAA;QAExF,sEAAsE;QAEtE,mBAAc,GAA+B,QAAQ,CAAA;IA8CvD,CAAC;IA5CS,YAAY,CAAC,CAAQ;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;QAC5B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;gBAC9C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;aACjF,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAA;QAEZ,OAAO,IAAI,CAAA;mBACI,WAAW;;;;iBAIb,IAAI,CAAC,IAAI;kBACR,IAAI,CAAC,KAAK;qBACP,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,YAAY;;;;;;;;;;;;KAYhC,CAAA;IACH,CAAC;aAEM,WAAM,GAAG,CAAC,iBAAiB,CAAC,AAAtB,CAAsB;;AA7DP;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAU;AAGT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAW;AAGM;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAGU;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAmB;AAIxF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;oDACnB;AAlB1C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgExB"}

package/dist/fm-radio-input/fm-radio-input.style.d.ts

@@ -0,0 +1,2 @@
+export declare const fmRadioInputStyle: import("lit").CSSResult;
+//# sourceMappingURL=fm-radio-input.style.d.ts.map

package/dist/fm-radio-input/fm-radio-input.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-radio-input.style.d.ts","sourceRoot":"","sources":["../../src/fm-radio-input/fm-radio-input.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAoJ7B,CAAC"}

package/dist/fm-radio-input/fm-radio-input.style.js

@@ -0,0 +1,151 @@
+import { css } from "lit";
+export const fmRadioInputStyle = css `
+  :host {
+    display: block;
+    min-width: 0;
+    height: 100%;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  .radio-card {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-height: var(--button-height-lg);
+    height: 100%;
+    padding-top: var(--spacing-md);
+    padding-bottom: var(--spacing-md);
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+    border: var(--stroke-sm) solid transparent;
+    border-radius: var(--radius-md);
+    background: var(--color-content-neutral-label);
+    color: var(--color-content-neutral-default);
+    font-family: inherit;
+    transition: border-color 0.2s ease;
+    min-width: var(--button-width-min);
+  }
+
+  :host(:not([checked]):not(:focus-within):not([disabled]))
+    .radio-card.radio-card--gray-border {
+    border-color: var(--color-outline-neutral-default);
+  }
+
+  :host(:hover):not([disabled]):not([checked]) .radio-card {
+    border-color: var(--color-outline-brand-brand);
+  }
+
+  :host([checked]) .radio-card {
+    border-color: var(--color-outline-brand-brand);
+  }
+
+  :host([disabled]) .radio-card {
+    border-color: var(--color-outline-neutral-default);
+  }
+
+  :host(:focus-within):not([disabled]) .radio-card {
+    outline: var(--stroke-sm) solid var(--color-outline-brand-brand);
+    outline-offset: 2px;
+  }
+
+  :host([checked]:focus-within):not([disabled]) .radio-card {
+    outline: none;
+  }
+
+  .radio-native {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+  }
+
+  :host([disabled]) .radio-native {
+    cursor: not-allowed;
+  }
+
+  .radio-body {
+    position: relative;
+    z-index: 0;
+    pointer-events: none;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .radio-media {
+    flex-shrink: 0;
+    order: 1;
+    display: flex;
+    align-items: center;
+    margin-inline-start: auto;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .radio-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    order: 0;
+    font-size: var(--text-lg);
+    font-weight: var(--font-weight-bold);
+  }
+
+  :host([media-placement="prepend"]) .radio-text {
+    order: 1;
+  }
+
+  :host([media-placement="prepend"]) .radio-media {
+    order: 0;
+    margin-inline-start: 0;
+  }
+
+  :host([media-placement="append"]) .radio-text {
+  }
+
+  :host([media-placement="append"]) .radio-media {
+  }
+
+  .radio-media slot::slotted(*) {
+    display: block;
+  }
+
+  :host([media-placement="prepend"]) .radio-media slot::slotted(*) {
+    margin-inline-end: var(--spacing-md);
+  }
+
+  :host([media-placement="append"]) .radio-media slot::slotted(*) {
+    margin-inline-start: var(--spacing-md);
+  }
+
+  .radio-media slot::slotted(img) {
+    max-height: 2.5rem;
+    max-width: 4rem;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
+
+  slot[name="description"]::slotted(*) {
+    margin-top: var(--spacing-xxxs);
+    font-size: var(--text-md);
+    font-weight: var(--font-weight-regular);
+    color: var(--color-content-neutral-default-alt);
+  }
+`;
+//# sourceMappingURL=fm-radio-input.style.js.map

package/dist/fm-radio-input/fm-radio-input.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-radio-input.style.js","sourceRoot":"","sources":["../../src/fm-radio-input/fm-radio-input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJnC,CAAC"}

package/dist/fm-segmented-controller/fm-segmented-controller-core.d.ts

@@ -0,0 +1,22 @@
+import type { IconVariant } from '../fm-icon/icon-registry.generated.js';
+export interface FmSegmentedOptionIcon {
+    name: string;
+    variant?: IconVariant;
+}
+export interface FmSegmentedOptionInput {
+    label: string;
+    value: string;
+    checked?: boolean;
+    disabled?: boolean;
+    icon?: FmSegmentedOptionIcon;
+}
+export interface FmSegmentedOptionNormalized extends FmSegmentedOptionInput {
+    checked: boolean;
+    disabled: boolean;
+}
+export declare function stableOptionId(baseId: string, index: number): string;
+export declare function resolveGroupName(name: string | undefined, instanceId: string): string;
+export declare function normalizeOptions(raw: unknown): FmSegmentedOptionNormalized[];
+export declare function resolveEffectiveValue(options: FmSegmentedOptionNormalized[], value: string): string;
+export declare function indicatorIndex(options: FmSegmentedOptionNormalized[], effectiveValue: string): number;
+//# sourceMappingURL=fm-segmented-controller-core.d.ts.map

package/dist/fm-segmented-controller/fm-segmented-controller-core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-segmented-controller-core.d.ts","sourceRoot":"","sources":["../../src/fm-segmented-controller/fm-segmented-controller-core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AAExE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,qBAAqB,CAAA;CAC7B;AAED,MAAM,WAAW,2BAA4B,SAAQ,sBAAsB;IACzE,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAIrF;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAG,2BAA2B,EAAE,CAkC5E;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,2BAA2B,EAAE,EACtC,KAAK,EAAE,MAAM,GACZ,MAAM,CAMR;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,2BAA2B,EAAE,EAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAIrG"}

package/dist/fm-segmented-controller/fm-segmented-controller-core.js

@@ -0,0 +1,64 @@
+export function stableOptionId(baseId, index) {
+    return `${baseId}-opt-${index}`;
+}
+export function resolveGroupName(name, instanceId) {
+    const t = name?.trim();
+    if (t)
+        return t;
+    return `fm-sc-${instanceId}`;
+}
+export function normalizeOptions(raw) {
+    if (!Array.isArray(raw))
+        return [];
+    let checkedAssigned = false;
+    const out = [];
+    for (const item of raw) {
+        if (!item || typeof item !== 'object')
+            continue;
+        const o = item;
+        const value = typeof o.value === 'string' ? o.value.trim() : '';
+        if (!value)
+            continue;
+        const label = typeof o.label === 'string' ? o.label : value;
+        const disabled = Boolean(o.disabled);
+        let checked = Boolean(o.checked);
+        if (checked) {
+            if (checkedAssigned || disabled)
+                checked = false;
+            else
+                checkedAssigned = true;
+        }
+        let icon;
+        if (o.icon && typeof o.icon === 'object') {
+            const ic = o.icon;
+            const iconName = typeof ic.name === 'string' ? ic.name : '';
+            if (iconName) {
+                const variant = ic.variant === 'bold' ||
+                    ic.variant === 'filled' ||
+                    ic.variant === 'stroke' ||
+                    ic.variant === 'duotone'
+                    ? ic.variant
+                    : undefined;
+                icon = variant ? { name: iconName, variant } : { name: iconName };
+            }
+        }
+        out.push({ label, value, checked, disabled, icon });
+    }
+    return out;
+}
+export function resolveEffectiveValue(options, value) {
+    const match = options.find((o) => o.value === value && !o.disabled);
+    if (match)
+        return value;
+    const checked = options.find((o) => o.checked && !o.disabled);
+    if (checked)
+        return checked.value;
+    return '';
+}
+export function indicatorIndex(options, effectiveValue) {
+    if (!effectiveValue)
+        return -1;
+    const i = options.findIndex((o) => o.value === effectiveValue);
+    return i >= 0 ? i : -1;
+}
+//# sourceMappingURL=fm-segmented-controller-core.js.map

package/dist/fm-segmented-controller/fm-segmented-controller-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-segmented-controller-core.js","sourceRoot":"","sources":["../../src/fm-segmented-controller/fm-segmented-controller-core.ts"],"names":[],"mappings":"AAoBA,MAAM,UAAU,cAAc,CAAC,MAAc,EAAE,KAAa;IAC1D,OAAO,GAAG,MAAM,QAAQ,KAAK,EAAE,CAAA;AACjC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAwB,EAAE,UAAkB;IAC3E,MAAM,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,CAAA;IACtB,IAAI,CAAC;QAAE,OAAO,CAAC,CAAA;IACf,OAAO,SAAS,UAAU,EAAE,CAAA;AAC9B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,GAAY;IAC3C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAAE,OAAO,EAAE,CAAA;IAClC,IAAI,eAAe,GAAG,KAAK,CAAA;IAC3B,MAAM,GAAG,GAAkC,EAAE,CAAA;IAC7C,KAAK,MAAM,IAAI,IAAI,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE,SAAQ;QAC/C,MAAM,CAAC,GAAG,IAA+B,CAAA;QACzC,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;QAC/D,IAAI,CAAC,KAAK;YAAE,SAAQ;QACpB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;QAC3D,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;QACpC,IAAI,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QAChC,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,eAAe,IAAI,QAAQ;gBAAE,OAAO,GAAG,KAAK,CAAA;;gBAC3C,eAAe,GAAG,IAAI,CAAA;QAC7B,CAAC;QACD,IAAI,IAAuC,CAAA;QAC3C,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzC,MAAM,EAAE,GAAG,CAAC,CAAC,IAA+B,CAAA;YAC5C,MAAM,QAAQ,GAAG,OAAO,EAAE,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAA;YAC3D,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,OAAO,GACX,EAAE,CAAC,OAAO,KAAK,MAAM;oBACrB,EAAE,CAAC,OAAO,KAAK,QAAQ;oBACvB,EAAE,CAAC,OAAO,KAAK,QAAQ;oBACvB,EAAE,CAAC,OAAO,KAAK,SAAS;oBACtB,CAAC,CAAC,EAAE,CAAC,OAAO;oBACZ,CAAC,CAAC,SAAS,CAAA;gBACf,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;YACnE,CAAC;QACH,CAAC;QACD,GAAG,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAA;IACrD,CAAC;IACD,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,MAAM,UAAU,qBAAqB,CACnC,OAAsC,EACtC,KAAa;IAEb,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IACnE,IAAI,KAAK;QAAE,OAAO,KAAK,CAAA;IACvB,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC7D,IAAI,OAAO;QAAE,OAAO,OAAO,CAAC,KAAK,CAAA;IACjC,OAAO,EAAE,CAAA;AACX,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,OAAsC,EAAE,cAAsB;IAC3F,IAAI,CAAC,cAAc;QAAE,OAAO,CAAC,CAAC,CAAA;IAC9B,MAAM,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,cAAc,CAAC,CAAA;IAC9D,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACxB,CAAC"}

package/dist/fm-segmented-controller/fm-segmented-controller.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import type { FmSegmentedOptionInput } from './fm-segmented-controller-core.js';
+export type { FmSegmentedOptionIcon, FmSegmentedOptionInput, FmSegmentedOptionNormalized } from './fm-segmented-controller-core.js';
+/**
+ * Segmented control backed by a native radio group (`fieldset` + `input[type="radio"]` + `label`).
+ * Geen `<legend>`; zet desgewenst `aria-label` of `aria-labelledby` op het element voor een groepslabel.
+ *
+ * @element fm-segmented-controller
+ *
+ * @fires fm-segmented-controller - Bij selectie. Detail: `{ name: string, value: string }`.
+ *
+ * @example
+ * ```html
+ * <fm-segmented-controller
+ *   aria-label="Weergave"
+ *   name="view"
+ *   .options=${[
+ *     { label: 'Dag', value: 'day', checked: true },
+ *     { label: 'Week', value: 'week' },
+ *   ]}
+ * ></fm-segmented-controller>
+ * ```
+ */
+export declare class FmSegmentedController extends LitElement {
+    /** Native radio group name. A stable generated name is used when omitted. */
+    name: string;
+    /** Selected option value. */
+    value: string;
+    /** Segment options. Set as a JavaScript property, not an HTML attribute. */
+    options: FmSegmentedOptionInput[];
+    /** Disabled state for all segments. */
+    disabled: boolean;
+    private ready;
+    private readonly instanceId;
+    private baseId;
+    constructor();
+    connectedCallback(): void;
+    private syncBaseId;
+    willUpdate(changed: PropertyValues<this>): void;
+    firstUpdated(): void;
+    private handleChange;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'fm-segmented-controller': FmSegmentedController;
+    }
+}
+//# sourceMappingURL=fm-segmented-controller.d.ts.map

package/dist/fm-segmented-controller/fm-segmented-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-segmented-controller.d.ts","sourceRoot":"","sources":["../../src/fm-segmented-controller/fm-segmented-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAGtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AASzC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAA;AAG/E,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAA;AAMnI;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,6EAA6E;IACjD,IAAI,SAAK;IAErC,6BAA6B;IACD,KAAK,SAAK;IAEtC,4EAA4E;IAC5C,OAAO,EAAE,sBAAsB,EAAE,CAAK;IAEtE,uCAAuC;IACK,QAAQ,UAAQ;IAEnD,OAAO,CAAC,KAAK,CAAQ;IAE9B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IAEnC,OAAO,CAAC,MAAM,CAAK;;IAUnB,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,UAAU;IAKlB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ/C,YAAY,IAAI,IAAI;IAQpB,OAAO,CAAC,YAAY;IAepB,MAAM;IA0DN,MAAM,CAAC,MAAM,4BAA+B;CAC7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAA;KACjD;CACF"}

package/dist/fm-segmented-controller/fm-segmented-controller.js

@@ -0,0 +1,166 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { fmSegmentedControllerStyle } from './fm-segmented-controller.style.js';
+import { normalizeOptions, resolveGroupName, stableOptionId, resolveEffectiveValue, indicatorIndex } from './fm-segmented-controller-core.js';
+import { FmIcon } from '../fm-icon/fm-icon.js';
+if (!customElements.get('fm-icon')) {
+    customElements.define('fm-icon', FmIcon);
+}
+/**
+ * Segmented control backed by a native radio group (`fieldset` + `input[type="radio"]` + `label`).
+ * Geen `<legend>`; zet desgewenst `aria-label` of `aria-labelledby` op het element voor een groepslabel.
+ *
+ * @element fm-segmented-controller
+ *
+ * @fires fm-segmented-controller - Bij selectie. Detail: `{ name: string, value: string }`.
+ *
+ * @example
+ * ```html
+ * <fm-segmented-controller
+ *   aria-label="Weergave"
+ *   name="view"
+ *   .options=${[
+ *     { label: 'Dag', value: 'day', checked: true },
+ *     { label: 'Week', value: 'week' },
+ *   ]}
+ * ></fm-segmented-controller>
+ * ```
+ */
+let FmSegmentedController = class FmSegmentedController extends LitElement {
+    constructor() {
+        super();
+        /** Native radio group name. A stable generated name is used when omitted. */
+        this.name = '';
+        /** Selected option value. */
+        this.value = '';
+        /** Segment options. Set as a JavaScript property, not an HTML attribute. */
+        this.options = [];
+        /** Disabled state for all segments. */
+        this.disabled = false;
+        this.ready = false;
+        this.baseId = '';
+        this.instanceId =
+            typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+                ? crypto.randomUUID().slice(0, 8)
+                : String(Math.random()).slice(2, 10);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncBaseId();
+    }
+    syncBaseId() {
+        const idAttr = this.id?.trim();
+        this.baseId = idAttr ? idAttr : `fsc-${this.instanceId}`;
+    }
+    willUpdate(changed) {
+        if (changed.has('options') || changed.has('value')) {
+            const normalized = normalizeOptions(this.options);
+            const next = resolveEffectiveValue(normalized, this.value);
+            if (next !== this.value)
+                this.value = next;
+        }
+    }
+    firstUpdated() {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.ready = true;
+            });
+        });
+    }
+    handleChange(e) {
+        const t = e.target;
+        if (!t || !(t instanceof HTMLInputElement) || t.type !== 'radio')
+            return;
+        if (!t.checked)
+            return;
+        this.value = t.value;
+        const groupName = resolveGroupName(this.name, this.instanceId);
+        this.dispatchEvent(new CustomEvent('fm-segmented-controller', {
+            detail: { name: groupName, value: t.value },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        this.syncBaseId();
+        const normalized = normalizeOptions(this.options);
+        const groupName = resolveGroupName(this.name, this.instanceId);
+        const effective = resolveEffectiveValue(normalized, this.value);
+        const idx = indicatorIndex(normalized, effective);
+        const count = Math.max(1, normalized.length);
+        const activeIndexForTransform = idx >= 0 ? idx : 0;
+        const trackClass = ['segmented__track', this.ready ? 'segmented--ready' : ''].filter(Boolean).join(' ');
+        const fieldsetStyle = styleMap({
+            '--segment-count': String(count),
+            '--active-index': String(activeIndexForTransform),
+            '--indicator-opacity': idx < 0 || normalized.length === 0 ? '0' : '1'
+        });
+        return html `
+      <fieldset class="segmented" style=${fieldsetStyle} @change=${this.handleChange}>
+        <div class=${trackClass}>
+          <span class="segmented__indicator" aria-hidden="true"></span>
+          <div class="segmented__segments">
+            ${normalized.map((opt, index) => {
+            const inputId = stableOptionId(this.baseId, index);
+            const isChecked = effective === opt.value;
+            const isDisabled = this.disabled || opt.disabled;
+            const icon = opt.icon;
+            const iconVariant = icon?.variant ?? 'filled';
+            return html `
+                <div class="segment" data-segment-index=${index}>
+                  <input
+                    class="segment__input"
+                    type="radio"
+                    name=${groupName}
+                    id=${inputId}
+                    value=${opt.value}
+                    .checked=${isChecked}
+                    ?disabled=${isDisabled}
+                  />
+                  <label class="segment__label" for=${inputId}>
+                    <span class="segment__label-inner">
+                      ${icon
+                ? html `<span class="segment__icon">
+                            <fm-icon name=${icon.name} variant=${iconVariant} size="sm"></fm-icon>
+                          </span>`
+                : ''}
+                      <span class="segment__text">${opt.label}</span>
+                    </span>
+                  </label>
+                </div>
+              `;
+        })}
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    static { this.styles = [fmSegmentedControllerStyle]; }
+};
+__decorate([
+    property({ type: String })
+], FmSegmentedController.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], FmSegmentedController.prototype, "value", void 0);
+__decorate([
+    property({ attribute: false })
+], FmSegmentedController.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmSegmentedController.prototype, "disabled", void 0);
+__decorate([
+    state()
+], FmSegmentedController.prototype, "ready", void 0);
+FmSegmentedController = __decorate([
+    customElement('fm-segmented-controller')
+], FmSegmentedController);
+export { FmSegmentedController };
+//# sourceMappingURL=fm-segmented-controller.js.map

package/dist/fm-segmented-controller/fm-segmented-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-segmented-controller.js","sourceRoot":"","sources":["../../src/fm-segmented-controller/fm-segmented-controller.ts"],"names":[],"mappings":"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"}

package/dist/fm-segmented-controller/fm-segmented-controller.style.d.ts

@@ -0,0 +1,2 @@
+export declare const fmSegmentedControllerStyle: import("lit").CSSResult;
+//# sourceMappingURL=fm-segmented-controller.style.d.ts.map

package/dist/fm-segmented-controller/fm-segmented-controller.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fm-segmented-controller.style.d.ts","sourceRoot":"","sources":["../../src/fm-segmented-controller/fm-segmented-controller.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B,yBAkMtC,CAAC"}