@vielzeug/refine 1.1.1

package/dist/inputs/calendar/calendar.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.css?inline.js","names":[],"sources":["../../../src/inputs/calendar/calendar.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-focus));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-focus));\n    --_day-outside-opacity: var(--calendar-day-outside-opacity, 0.35);\n    --_bg: var(--calendar-bg, var(--color-canvas));\n    --_border-color: var(--calendar-border-color, var(--color-contrast-200));\n    --_radius: var(--calendar-radius, var(--rounded-xl));\n\n    display: inline-block;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n  }\n\n  :host([color='secondary']) {\n    --_day-selected-bg: var(--calendar-day-selected-bg, var(--_theme-base));\n    --_day-today-color: var(--calendar-day-today-color, var(--_theme-base));\n  }\n\n  /* ── Root panel ──────────────────────────────────────────────────────────── */\n\n  .calendar {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    min-width: 18rem;\n    padding: var(--size-3);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--calendar-shadow, var(--shadow-md));\n  }\n\n  :host([fullwidth]) .calendar {\n    min-width: 0;\n  }\n\n  /* ── Header ──────────────────────────────────────────────────────────────── */\n\n  .cal-header {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    justify-content: space-between;\n    padding-block-end: var(--size-2);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  .nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-8);\n    height: var(--size-8);\n    padding: 0;\n    color: var(--color-contrast-600);\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .nav-btn:hover:not(:disabled) {\n    color: var(--color-contrast-900);\n    background: var(--color-contrast-300);\n  }\n\n  .nav-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .nav-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  .cal-label-btn {\n    flex: 1;\n    padding: var(--size-1) var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-900);\n    text-align: center;\n    cursor: pointer;\n    outline: none;\n    background: transparent;\n    border: none;\n    border-radius: var(--rounded-md);\n    transition: background var(--transition-fast);\n  }\n\n  .cal-label-btn:hover:not(:disabled) {\n    background: var(--color-contrast-300);\n  }\n\n  .cal-label-btn:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-label-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .cal-label-month,\n  .cal-label-year {\n    display: inline-block;\n  }\n\n  .cal-label-sep {\n    display: inline-block;\n    padding-inline: var(--size-1);\n    font-weight: var(--font-normal);\n    color: var(--color-contrast-400);\n  }\n\n  /* ── Grid base ───────────────────────────────────────────────────────────── */\n\n  [hidden] {\n    display: none !important;\n  }\n\n  .cal-grid {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-0-5);\n  }\n\n  .cal-grid-days {\n    display: grid;\n    grid-template-columns: repeat(7, minmax(0, 1fr));\n    gap: var(--size-0-5);\n\n    /* Reserve max height (6 week rows + 1 header) so the panel never shrinks\n       on 5-week months or when switching to month/year view. */\n    min-height: calc(7 * var(--size-10) + 6 * var(--size-0-5));\n  }\n\n  /* role=\"row\" wrappers exist for ARIA grid structure only — `display: contents`\n     removes them from layout so their children still participate directly in the\n     parent's CSS grid tracks. */\n  .cal-grid [role='row'] {\n    display: contents;\n  }\n\n  .cal-cell {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--text-sm);\n    cursor: pointer;\n    outline: none;\n    border-radius: var(--rounded-md);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* ── Column headers ──────────────────────────────────────────────────────── */\n\n  .cal-cell-head {\n    height: var(--size-8);\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: default;\n  }\n\n  /* ── Day cells ───────────────────────────────────────────────────────────── */\n\n  .cal-cell-day {\n    flex-direction: column;\n    gap: var(--size-0-5);\n    min-width: 0;\n    height: var(--size-10);\n    overflow: hidden;\n    color: var(--color-contrast-800);\n  }\n\n  .cal-cell-day:hover:not([data-disabled]) {\n    color: var(--color-contrast-900);\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-day:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-today] {\n    font-weight: var(--font-semibold);\n    color: var(--_day-today-color);\n  }\n\n  .cal-cell-day[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-day[data-outside] {\n    opacity: var(--_day-outside-opacity);\n  }\n\n  .cal-cell-day[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Event dots (normal mode) ────────────────────────────────────────────── */\n\n  .cal-dots {\n    display: flex;\n    gap: 2px;\n    align-items: center;\n    justify-content: center;\n    margin-block-start: var(--size-0-5);\n  }\n\n  .cal-dot {\n    --badge-bg: var(--_day-selected-bg);\n    --badge-border-color: var(--_day-selected-bg);\n  }\n\n  .cal-dot-overflow {\n    font-size: 8px;\n    font-weight: var(--font-semibold);\n    line-height: 1;\n    color: var(--color-contrast-500);\n  }\n\n  /* ── Month / year grids ──────────────────────────────────────────────────── */\n\n  .cal-grid-months,\n  .cal-grid-years {\n    /* 4-column grid — same width as cal-grid-days, natural height. */\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: var(--size-1);\n  }\n\n  .cal-cell-month,\n  .cal-cell-year {\n    height: var(--size-10);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-800);\n    cursor: pointer;\n    border-radius: var(--rounded-md);\n  }\n\n  .cal-cell-month:hover:not([data-disabled]),\n  .cal-cell-year:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 15%, transparent);\n  }\n\n  .cal-cell-month:focus-visible,\n  .cal-cell-year:focus-visible {\n    box-shadow: 0 0 0 2px var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-selected],\n  .cal-cell-year[data-selected] {\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    background: var(--_day-selected-bg);\n  }\n\n  .cal-cell-month[data-disabled],\n  .cal-cell-year[data-disabled] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.3;\n  }\n\n  /* ── Expanded variant ────────────────────────────────────────────────────── */\n\n  :host([expanded]) {\n    display: block;\n    width: 100%;\n  }\n\n  :host([expanded]) .calendar {\n    width: 100%;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-header {\n    padding: var(--size-3) var(--size-4);\n  }\n\n  :host([expanded]) .cal-label-btn {\n    font-size: var(--text-base);\n  }\n\n  :host([expanded]) .cal-grid {\n    gap: 0;\n  }\n\n  :host([expanded]) .cal-grid-days {\n    gap: 0;\n    border-block-start: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell {\n    border-radius: 0;\n  }\n\n  :host([expanded]) .cal-cell-head {\n    height: var(--size-9);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  :host([expanded]) .cal-cell-day {\n    position: relative;\n    flex-direction: column;\n    gap: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    height: auto;\n    min-height: var(--calendar-expanded-cell-height, var(--size-28));\n    aspect-ratio: auto;\n    padding: var(--size-2);\n    font-size: var(--text-sm);\n    vertical-align: top;\n    border-block-end: var(--border) solid var(--_border-color);\n    border-inline-end: var(--border) solid var(--_border-color);\n  }\n\n  /* Remove right border on last column */\n  :host([expanded]) .cal-cell-day:nth-child(7n) {\n    border-inline-end: none;\n  }\n\n  :host([expanded]) .cal-cell-day:hover:not([data-disabled]) {\n    background: color-mix(in oklch, var(--_day-selected-bg) 6%, transparent);\n  }\n\n  /* Selected day — circle around the number only */\n  :host([expanded]) .cal-cell-day[data-selected] {\n    color: inherit;\n    background: transparent;\n  }\n\n  :host([expanded]) .cal-cell-day[data-selected]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-selected-bg);\n    border-radius: var(--rounded-full);\n  }\n\n  /* Today — circle in accent colour */\n  :host([expanded]) .cal-cell-day[data-today] {\n    font-weight: inherit;\n    color: inherit;\n  }\n\n  :host([expanded]) .cal-cell-day[data-today]::before {\n    position: absolute;\n    top: var(--size-1-5);\n    left: var(--size-1-5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-7);\n    height: var(--size-7);\n    font-size: var(--text-sm);\n    font-weight: var(--font-semibold);\n    color: var(--color-white, #fff);\n    content: attr(data-day);\n    background: var(--_day-today-color);\n    border-radius: var(--rounded-full);\n  }\n\n  /* When both today AND selected — selected wins */\n  :host([expanded]) .cal-cell-day[data-today][data-selected]::before {\n    background: var(--_day-selected-bg);\n  }\n\n  /* ── Expanded event pills ────────────────────────────────────────────────── */\n\n  /* Push events below the day-number circle row */\n  :host([expanded]) .cal-events {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    width: 100%;\n    margin-block-start: var(--size-4);\n    overflow: hidden;\n  }\n\n  :host([expanded]) .cal-event-pill {\n    max-width: 100%;\n\n    --badge-max-width: 100%;\n  }\n\n  :host([expanded]) .cal-event-pill-overflow {\n    padding-inline: var(--size-1);\n    font-size: 10px;\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n  }\n\n  /* Dots are hidden in expanded mode — pills take over */\n  :host([expanded]) .cal-dots {\n    display: none;\n  }\n\n  :host([expanded]) .cal-cell-day[data-outside] {\n    background: color-mix(in oklch, var(--color-contrast-900) 2%, transparent);\n  }\n\n  /* Expanded month / year grids */\n  :host([expanded]) .cal-grid-months,\n  :host([expanded]) .cal-grid-years {\n    gap: var(--size-2);\n    min-height: 0;\n    padding: var(--size-4);\n  }\n\n  :host([expanded]) .cal-cell-month,\n  :host([expanded]) .cal-cell-year {\n    min-height: var(--size-16);\n    font-size: var(--text-base);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--rounded-lg);\n  }\n\n  :host([expanded]) .cal-cell-month[data-selected],\n  :host([expanded]) .cal-cell-year[data-selected] {\n    border-color: transparent;\n  }\n\n  /* ── Disabled host ───────────────────────────────────────────────────────── */\n\n  :host(.is-disabled) .calendar {\n    pointer-events: none;\n    opacity: 0.6;\n  }\n\n  /* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-btn,\n    .cal-label-btn,\n    .cal-cell {\n      transition: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/inputs/calendar/calendar.d.ts

@@ -0,0 +1,134 @@
+import type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';
+import '../../content/icon/icon';
+import '../../feedback/badge/badge';
+export type OreCalendarEvents = {
+    change: {
+        isoValue: string | null;
+    };
+};
+/**
+ * A calendar event entry.
+ * Dates must be ISO 8601 strings (yyyy-MM-dd).
+ *
+ * The `color` field accepts any valid CSS color value (e.g. `'#e11d48'`,
+ * `'var(--color-primary)'`). An invalid value silently falls back to the
+ * component's theme color. Only pass values you control.
+ */
+export type CalendarEvent = {
+    /**
+     * Any CSS color value for the event dot / pill.
+     * Defaults to the component's theme color when omitted.
+     * Rendered via `styleMap()`, which strips `;`/`{`/`}` so the value can't break out of
+     * its custom-property declaration — it is not a full CSS-color syntax validator, so an
+     * invalid (but injection-safe) value may still render as no color.
+     */
+    color?: string;
+    /** ISO date the event falls on (yyyy-MM-dd) */
+    date: string;
+    /** Unique identifier */
+    id: string;
+    /** Short label shown in the calendar cell */
+    label: string;
+};
+export type OreCalendarProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable all date selection */
+    disabled?: boolean;
+    /**
+     * Array of calendar events to display on day cells.
+     * In normal mode each event renders as a small colored dot (max 3 dots, then "+N").
+     * In expanded mode each event renders as a full-width colored pill with its label.
+     * Pass as a JS property or as a JSON-encoded attribute.
+     * @example
+     * ```js
+     * calendar.events = [
+     *   { id: '1', date: '2025-06-15', label: 'Team standup', color: 'var(--color-primary)' },
+     *   { id: '2', date: '2025-06-20', label: 'Release', color: '#e11d48' },
+     * ];
+     * ```
+     */
+    events?: CalendarEvent[];
+    /**
+     * Expanded layout — large cells with top-aligned day numbers suitable
+     * for a full-page calendar app view.
+     */
+    expanded?: boolean;
+    /** Expand to container width */
+    fullwidth?: boolean;
+    /** Locale for day/month names (default: browser locale) */
+    locale?: string;
+    /** Latest selectable date in ISO 8601 format (yyyy-MM-dd) */
+    max?: string;
+    /** Earliest selectable date in ISO 8601 format (yyyy-MM-dd) */
+    min?: string;
+    /** Form field name (when used inside a form) */
+    name?: string;
+    /** Mark field as required */
+    required?: boolean;
+    /** Border radius override */
+    rounded?: RoundedSize;
+    /** Component size */
+    size?: ComponentSize;
+    /**
+     * Selected date in ISO 8601 format (yyyy-MM-dd).
+     * @example '2025-06-15'
+     */
+    value?: string;
+    /**
+     * Day-of-week indices to disable (0 = Sunday … 6 = Saturday).
+     * Pass as a JSON array attribute or a JS property.
+     * @example
+     * ```html
+     * <ore-calendar weekend-days="[0,6]"></ore-calendar>
+     * ```
+     */
+    'weekend-days'?: number[];
+};
+/**
+ * An accessible, keyboard-navigable inline calendar component.
+ * Supports day/month/year drill-down views, min/max bounds, disabled weekend
+ * days, and optional form association.
+ *
+ * @element ore-calendar
+ *
+ * @attr {string} value - Selected date in ISO 8601 format (yyyy-MM-dd)
+ * @attr {string} min - Minimum selectable date (yyyy-MM-dd)
+ * @attr {string} max - Maximum selectable date (yyyy-MM-dd)
+ * @attr {boolean} disabled - Disable all interaction
+ * @attr {boolean} required - Required field (form association)
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {string} locale - BCP 47 locale string
+ * @attr {string} weekend-days - JSON array of day indices to disable (0=Sun…6=Sat)
+ * @attr {boolean} fullwidth - Expand to full container width
+ * @attr {boolean} expanded - Large-cell calendar-app layout with top-aligned day numbers
+ *
+ * @fires change - Fired when a date is selected. detail: { isoValue: string | null }
+ *
+ * @cssprop --calendar-bg - Calendar background
+ * @cssprop --calendar-border-color - Calendar border color
+ * @cssprop --calendar-radius - Calendar border radius
+ * @cssprop --calendar-shadow - Calendar drop shadow
+ * @cssprop --calendar-day-selected-bg - Background of selected day cell
+ * @cssprop --calendar-day-today-color - Colour of today's date number
+ * @cssprop --calendar-day-outside-opacity - Opacity of days outside visible month
+ *
+ * @part calendar - The root calendar panel
+ * @part header - Calendar header (nav + label)
+ * @part grid - Day grid
+ * @part day - Individual day cell
+ *
+ * @example
+ * ```html
+ * <!-- Single date with bounds -->
+ * <ore-calendar value="2025-06-15" min="2025-01-01" max="2025-12-31" color="primary"></ore-calendar>
+ *
+ * <!-- Expanded calendar-app layout -->
+ * <ore-calendar expanded fullwidth color="primary"></ore-calendar>
+ * ```
+ */
+export declare const CALENDAR_TAG: "ore-calendar";
+//# sourceMappingURL=calendar.d.ts.map

package/dist/inputs/calendar/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/inputs/calendar/calendar.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE3E,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AAQpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/inputs/checkbox/checkbox.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}input:focus-visible+.box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500)}.helper-text:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}`;exports.default=e;
+//# sourceMappingURL=checkbox.css?inline.cjs.map

package/dist/inputs/checkbox/checkbox.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.css?inline.cjs","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible + .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: var(--_icon-color);\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  .checkmark::part(svg),\n  .dash::part(svg) {\n    width: calc(var(--_size) * 0.6);\n    height: calc(var(--_size) * 0.6);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/checkbox/checkbox.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/checkbox/checkbox.css?inline
+var e = "@layer refine.base{:host{--_size:var(--checkbox-size,var(--size-5));--_radius:var(--checkbox-radius,var(--rounded-lg));--_font-size:var(--checkbox-font-size,var(--text-sm));--_bg:var(--checkbox-bg,var(--color-contrast-200));--_border:var(--checkbox-border-color,var(--color-contrast-300));gap:var(--_gap,var(--size-2));min-height:var(--_touch-target);cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.checkbox-wrapper{width:var(--_size);height:var(--_size);flex-shrink:0;display:block;position:relative}.box{box-sizing:border-box;width:var(--_size);height:var(--_size);background:var(--_bg);border:var(--border-2) solid var(--_border);border-radius:var(--_radius);transition:background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);position:relative}input:focus-visible+.box{box-shadow:var(--_focus-shadow)}.checkmark,.dash{color:var(--_icon-color);opacity:0;transition:opacity var(--transition-spring), transform var(--transition-spring);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.checkmark::part(svg),.dash::part(svg){width:calc(var(--_size) * .6);height:calc(var(--_size) * .6);fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.label{font-size:var(--_font-size);color:var(--color-contrast)}.helper-text[hidden]{display:none}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500)}.helper-text:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--_size) + var(--size-2))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_size) + var(--size-2))}.helper-text[role=alert]{color:var(--color-error)}}@layer refine.overrides{:host{--_active-bg:var(--checkbox-checked-bg,var(--_theme-base));--_icon-color:var(--checkbox-color,var(--_theme-contrast));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .box,:host([indeterminate]) .box{background:var(--_active-bg);border-color:var(--_active-bg)}:host([checked]) .checkmark,:host([indeterminate]:not([checked])) .dash{opacity:1;transform:translate(-50%,-50%)scale(1)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=checkbox.css?inline.js.map

package/dist/inputs/checkbox/checkbox.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.css?inline.js","names":[],"sources":["../../../src/inputs/checkbox/checkbox.css?inline"],"sourcesContent":["@layer refine.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--checkbox-size, var(--size-5));\n    --_radius: var(--checkbox-radius, var(--rounded-lg));\n    --_font-size: var(--checkbox-font-size, var(--text-sm));\n    --_bg: var(--checkbox-bg, var(--color-contrast-200));\n    --_border: var(--checkbox-border-color, var(--color-contrast-300));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    min-height: var(--_touch-target);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .checkbox-wrapper {\n    position: relative;\n    display: block;\n    flex-shrink: 0;\n    width: var(--_size);\n    height: var(--_size);\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: var(--_size);\n    height: var(--_size);\n    background: var(--_bg);\n    border: var(--border-2) solid var(--_border);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal);\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible + .box {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Icons (Checkmark & Dash)\n       ======================================== */\n\n  .checkmark,\n  .dash {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: var(--_icon-color);\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.5);\n    transition:\n      opacity var(--transition-spring),\n      transform var(--transition-spring);\n  }\n\n  .checkmark::part(svg),\n  .dash::part(svg) {\n    width: calc(var(--_size) * 0.6);\n    height: calc(var(--_size) * 0.6);\n    fill: none;\n    stroke: currentcolor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_size) + var(--size-2));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n\n@layer refine.overrides {\n  /* Map theme variables to checkbox-specific variables */\n  :host {\n    --_active-bg: var(--checkbox-checked-bg, var(--_theme-base));\n    --_icon-color: var(--checkbox-color, var(--_theme-contrast));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked & Indeterminate States\n       ======================================== */\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background: var(--_active-bg);\n    border-color: var(--_active-bg);\n  }\n\n  :host([checked]) .checkmark,\n  :host([indeterminate]:not([checked])) .dash {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n"],"mappings":""}

package/dist/inputs/checkbox/checkbox.d.ts

@@ -0,0 +1,60 @@
+import type { CheckableProps, ComponentSize, ThemeColor } from '../../types';
+import { type CheckableChangePayload } from '../../headless';
+import '../../content/icon/icon';
+export type OreCheckboxEvents = {
+    change: CheckableChangePayload;
+};
+export type OreCheckboxProps = CheckableProps & {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interaction */
+    disabled?: boolean;
+    /** Error message (marks field as invalid) */
+    error?: string;
+    /** Helper text displayed below the checkbox */
+    helper?: string;
+    /** Indeterminate state (partially checked) */
+    indeterminate?: boolean;
+    /** Component size */
+    size?: ComponentSize;
+};
+/**
+ * A customizable checkbox component with theme colors, sizes, and indeterminate state support.
+ *
+ * @element ore-checkbox
+ *
+ * @attr {boolean} checked - Checked state
+ * @attr {boolean} disabled - Disable checkbox interaction
+ * @attr {boolean} indeterminate - Indeterminate (partially checked) state
+ * @attr {string} value - Field value submitted with forms
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Checkbox size: 'sm' | 'md' | 'lg'
+ * @attr {string} error - Error message (marks field as invalid)
+ * @attr {string} helper - Helper text displayed below the checkbox
+ *
+ * @fires change - Emitted when checkbox is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }
+ *
+ * @slot - Checkbox label text
+ *
+ * @cssprop --checkbox-size - Control size (width and height)
+ * @cssprop --checkbox-radius - Control border radius
+ * @cssprop --checkbox-bg - Unchecked background color
+ * @cssprop --checkbox-border-color - Unchecked border color
+ * @cssprop --checkbox-checked-bg - Checked/indeterminate background color
+ * @cssprop --checkbox-color - Checkmark icon color
+ * @cssprop --checkbox-font-size - Label font size
+ * @part checkbox - The checkbox wrapper element
+ * @part box - The visual checkbox box
+ * @part label - The label element
+ * @part helper-text - The helper/error text element
+ *
+ * @example
+ * ```html
+ * <ore-checkbox name="agree" required>I agree to the terms</ore-checkbox>
+ * <ore-checkbox checked color="primary" size="lg">Enabled by default</ore-checkbox>
+ * <ore-checkbox error="This field is required" helper="Check to continue">Accept</ore-checkbox>
+ * ```
+ */
+export declare const CHECKBOX_TAG: "ore-checkbox";
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/inputs/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox/checkbox.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7E,OAAO,EAAE,KAAK,sBAAsB,EAAoC,MAAM,gBAAgB,CAAC;AAC/F,OAAO,yBAAyB,CAAC;AAejC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,sBAAsB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}

package/dist/inputs/checkbox-group/checkbox-group.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{display:block}fieldset{border:none;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--size-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-600);padding:0}legend[hidden]{display:none}.checkbox-group-items{flex-direction:var(--checkbox-group-direction,column);gap:var(--checkbox-group-gap,var(--size-2));display:flex}.helper-text[hidden]{display:none}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.error-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-error);padding-left:2px;padding-right:2px}}@layer refine.variants{:host([orientation=horizontal]) .checkbox-group-items{--checkbox-group-direction:row;flex-wrap:wrap}}`;exports.default=e;
+//# sourceMappingURL=checkbox-group.css?inline.cjs.map

package/dist/inputs/checkbox-group/checkbox-group.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.css?inline.cjs","names":[],"sources":["../../../src/inputs/checkbox-group/checkbox-group.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .checkbox-group-items {\n    display: flex;\n    flex-direction: var(--checkbox-group-direction, column);\n    gap: var(--checkbox-group-gap, var(--size-2));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  :host([orientation='horizontal']) .checkbox-group-items {\n    --checkbox-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/checkbox-group/checkbox-group.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/checkbox-group/checkbox-group.css?inline
+var e = "@layer refine.base{:host{display:block}fieldset{border:none;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--size-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-contrast-600);padding:0}legend[hidden]{display:none}.checkbox-group-items{flex-direction:var(--checkbox-group-direction,column);gap:var(--checkbox-group-gap,var(--size-2));display:flex}.helper-text[hidden]{display:none}.helper-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}.error-text{margin-top:var(--size-1-5);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-error);padding-left:2px;padding-right:2px}}@layer refine.variants{:host([orientation=horizontal]) .checkbox-group-items{--checkbox-group-direction:row;flex-wrap:wrap}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=checkbox-group.css?inline.js.map

package/dist/inputs/checkbox-group/checkbox-group.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.css?inline.js","names":[],"sources":["../../../src/inputs/checkbox-group/checkbox-group.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    display: block;\n  }\n\n  fieldset {\n    min-width: 0;\n    padding: 0;\n    margin: 0;\n    border: none;\n  }\n\n  legend {\n    padding: 0;\n    margin-bottom: var(--size-2);\n    font-size: var(--text-sm);\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-600);\n  }\n\n  legend[hidden] {\n    display: none;\n  }\n\n  .checkbox-group-items {\n    display: flex;\n    flex-direction: var(--checkbox-group-direction, column);\n    gap: var(--checkbox-group-gap, var(--size-2));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .error-text {\n    padding-inline: 2px;\n    margin-top: var(--size-1-5);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-error);\n  }\n}\n\n@layer refine.variants {\n  :host([orientation='horizontal']) .checkbox-group-items {\n    --checkbox-group-direction: row;\n\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/inputs/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,75 @@
+import { type Readable } from '@vielzeug/ripple';
+import type { ComponentSize, ThemeColor } from '../../types';
+import { type ChoiceChangeDetail } from '../../headless';
+export type CheckboxGroupContext = {
+    color: Readable<ThemeColor | undefined>;
+    disabled: Readable<boolean>;
+    size: Readable<ComponentSize | undefined>;
+    toggle: (value: string, originalEvent?: Event) => void;
+    values: Readable<string[]>;
+};
+export declare const CHECKBOX_GROUP_CTX: import("@vielzeug/ore").InjectionKey<CheckboxGroupContext>;
+export type OreCheckboxGroupProps = {
+    /** Theme color — propagated to all child ore-checkbox elements */
+    color?: ThemeColor;
+    /** Disable all checkboxes in the group */
+    disabled?: boolean;
+    /** Error message shown below the group */
+    error?: string;
+    /** Helper text shown below the group */
+    helper?: string;
+    /** Legend / label for the fieldset. Required for accessibility. */
+    label?: string;
+    /** Form field name used during submission */
+    name?: string;
+    /** Layout direction of the checkbox options */
+    orientation?: 'vertical' | 'horizontal';
+    /** Mark the group as required */
+    required?: boolean;
+    /** Size — propagated to all child ore-checkbox elements */
+    size?: ComponentSize;
+    /** Comma-separated list of currently checked values */
+    values?: string;
+};
+export type OreCheckboxGroupEvents = {
+    change: ChoiceChangeDetail;
+};
+/**
+ * A fieldset wrapper that groups `ore-checkbox` elements, provides shared
+ * `color` and `size` via context, and manages multi-value selection state.
+ *
+ * @element ore-checkbox-group
+ *
+ * @attr {string} label - Legend text (required for a11y)
+ * @attr {string} values - Comma-separated list of checked values
+ * @attr {boolean} disabled - Disable all checkboxes in the group
+ * @attr {string} error - Error message
+ * @attr {string} helper - Helper text
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string} orientation - Layout: 'vertical' | 'horizontal'
+ * @attr {boolean} required - Required field
+ *
+ * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }
+ *
+ * @slot - Place `ore-checkbox` elements here
+ *
+ * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')
+ * @cssprop --checkbox-group-gap - Gap between checkbox items
+ * @part items - Items container.
+ * @example
+ * ```html
+ * <ore-checkbox-group name="fruits" label="Favourite fruits" required>
+ *   <ore-checkbox value="apple">Apple</ore-checkbox>
+ *   <ore-checkbox value="banana">Banana</ore-checkbox>
+ *   <ore-checkbox value="cherry">Cherry</ore-checkbox>
+ * </ore-checkbox-group>
+ * <ore-checkbox-group name="options" orientation="horizontal" color="primary">
+ *   <ore-checkbox value="a">Option A</ore-checkbox>
+ *   <ore-checkbox value="b">Option B</ore-checkbox>
+ * </ore-checkbox-group>
+ * ```
+ */
+export declare const CHECKBOX_GROUP_TAG: "ore-checkbox-group";
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/inputs/checkbox-group/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,QAAQ,EAAU,MAAM,kBAAkB,CAAC;AAEnE,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EACL,KAAK,kBAAkB,EAKxB,MAAM,gBAAgB,CAAC;AAQxB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,QAAQ,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IACxC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,IAAI,EAAE,QAAQ,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACvD,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,4DAA8D,CAAC;AAI9F,MAAM,MAAM,qBAAqB,GAAG;IAClC,kEAAkE;IAClE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC"}

package/dist/inputs/combobox/combobox-options.cjs

@@ -0,0 +1,2 @@
+function e(e){return e.filter(e=>e.localName===`ore-combobox-option`).map(e=>({disabled:e.hasAttribute(`disabled`),iconEl:e.querySelector(`[slot="icon"]`),label:e.getAttribute(`label`)||[...e.childNodes].filter(e=>e.nodeType===Node.TEXT_NODE).map(e=>e.textContent?.trim()).filter(Boolean).join(` `)||``,value:e.getAttribute(`value`)??``}))}function t(e,t,n){if(n)return e;let r=t.toLowerCase().trim();return r?e.filter(e=>e.label.toLowerCase().includes(r)||e.value.toLowerCase().includes(r)):e}function n(e,t,n){if(!t)return``;let r=e.trim();return r?n.some(e=>e.label.toLowerCase()===r.toLowerCase())?``:`Create "${r}"`:``}function r(e){return`__new__:${e.trim()}`}exports.filterOptions=t,exports.getCreatableLabel=n,exports.makeCreatableValue=r,exports.parseSlottedOptions=e;
+//# sourceMappingURL=combobox-options.cjs.map

package/dist/inputs/combobox/combobox-options.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-options.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox-options.ts"],"sourcesContent":["import type { ComboboxOptionItem } from './combobox.types';\n\nexport function parseSlottedOptions(elements: Element[]): ComboboxOptionItem[] {\n  return elements\n    .filter((el) => el.localName === 'ore-combobox-option')\n    .map((el) => ({\n      disabled: el.hasAttribute('disabled'),\n      iconEl: el.querySelector('[slot=\"icon\"]'),\n      label:\n        el.getAttribute('label') ||\n        [...el.childNodes]\n          .filter((node) => node.nodeType === Node.TEXT_NODE)\n          .map((node) => node.textContent?.trim())\n          .filter(Boolean)\n          .join(' ') ||\n        '',\n      value: el.getAttribute('value') ?? '',\n    }));\n}\n\nexport function filterOptions(options: ComboboxOptionItem[], query: string, noFilter: boolean): ComboboxOptionItem[] {\n  if (noFilter) return options;\n\n  const normalizedQuery = query.toLowerCase().trim();\n\n  if (!normalizedQuery) return options;\n\n  return options.filter(\n    (option) =>\n      option.label.toLowerCase().includes(normalizedQuery) || option.value.toLowerCase().includes(normalizedQuery),\n  );\n}\n\nexport function getCreatableLabel(query: string, creatable: boolean, filteredOptions: ComboboxOptionItem[]): string {\n  if (!creatable) return '';\n\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) return '';\n\n  const exactMatch = filteredOptions.some((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase());\n\n  return exactMatch ? '' : `Create \"${trimmedQuery}\"`;\n}\n\nexport function makeCreatableValue(query: string): string {\n  return `__new__:${query.trim()}`;\n}\n"],"mappings":"AAEA,SAAgB,EAAoB,EAA2C,CAC7E,OAAO,EACJ,OAAQ,GAAO,EAAG,YAAc,qBAAqB,CAAC,CACtD,IAAK,IAAQ,CACZ,SAAU,EAAG,aAAa,UAAU,EACpC,OAAQ,EAAG,cAAc,eAAe,EACxC,MACE,EAAG,aAAa,OAAO,GACvB,CAAC,GAAG,EAAG,UAAU,CAAC,CACf,OAAQ,GAAS,EAAK,WAAa,KAAK,SAAS,CAAC,CAClD,IAAK,GAAS,EAAK,aAAa,KAAK,CAAC,CAAC,CACvC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACX,GACF,MAAO,EAAG,aAAa,OAAO,GAAK,EACrC,EAAE,CACN,CAEA,SAAgB,EAAc,EAA+B,EAAe,EAAyC,CACnH,GAAI,EAAU,OAAO,EAErB,IAAM,EAAkB,EAAM,YAAY,CAAC,CAAC,KAAK,EAIjD,OAFK,EAEE,EAAQ,OACZ,GACC,EAAO,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,GAAK,EAAO,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,CAC/G,EAL6B,CAM/B,CAEA,SAAgB,EAAkB,EAAe,EAAoB,EAA+C,CAClH,GAAI,CAAC,EAAW,MAAO,GAEvB,IAAM,EAAe,EAAM,KAAK,EAMhC,OAJK,EAEc,EAAgB,KAAM,GAAW,EAAO,MAAM,YAAY,IAAM,EAAa,YAAY,CAErG,EAAa,GAAK,WAAW,EAAa,GAJvB,EAK5B,CAEA,SAAgB,EAAmB,EAAuB,CACxD,MAAO,WAAW,EAAM,KAAK,GAC/B"}

package/dist/inputs/combobox/combobox-options.d.ts

@@ -0,0 +1,6 @@
+import type { ComboboxOptionItem } from './combobox.types';
+export declare function parseSlottedOptions(elements: Element[]): ComboboxOptionItem[];
+export declare function filterOptions(options: ComboboxOptionItem[], query: string, noFilter: boolean): ComboboxOptionItem[];
+export declare function getCreatableLabel(query: string, creatable: boolean, filteredOptions: ComboboxOptionItem[]): string;
+export declare function makeCreatableValue(query: string): string;
+//# sourceMappingURL=combobox-options.d.ts.map

package/dist/inputs/combobox/combobox-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-options.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE,CAgB7E;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,kBAAkB,EAAE,CAWnH;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAUlH;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAExD"}

package/dist/inputs/combobox/combobox-options.js

@@ -0,0 +1,26 @@
+//#region src/inputs/combobox/combobox-options.ts
+function e(e) {
+	return e.filter((e) => e.localName === "ore-combobox-option").map((e) => ({
+		disabled: e.hasAttribute("disabled"),
+		iconEl: e.querySelector("[slot=\"icon\"]"),
+		label: e.getAttribute("label") || [...e.childNodes].filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => e.textContent?.trim()).filter(Boolean).join(" ") || "",
+		value: e.getAttribute("value") ?? ""
+	}));
+}
+function t(e, t, n) {
+	if (n) return e;
+	let r = t.toLowerCase().trim();
+	return r ? e.filter((e) => e.label.toLowerCase().includes(r) || e.value.toLowerCase().includes(r)) : e;
+}
+function n(e, t, n) {
+	if (!t) return "";
+	let r = e.trim();
+	return r ? n.some((e) => e.label.toLowerCase() === r.toLowerCase()) ? "" : `Create "${r}"` : "";
+}
+function r(e) {
+	return `__new__:${e.trim()}`;
+}
+//#endregion
+export { t as filterOptions, n as getCreatableLabel, r as makeCreatableValue, e as parseSlottedOptions };
+
+//# sourceMappingURL=combobox-options.js.map

package/dist/inputs/combobox/combobox-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-options.js","names":[],"sources":["../../../src/inputs/combobox/combobox-options.ts"],"sourcesContent":["import type { ComboboxOptionItem } from './combobox.types';\n\nexport function parseSlottedOptions(elements: Element[]): ComboboxOptionItem[] {\n  return elements\n    .filter((el) => el.localName === 'ore-combobox-option')\n    .map((el) => ({\n      disabled: el.hasAttribute('disabled'),\n      iconEl: el.querySelector('[slot=\"icon\"]'),\n      label:\n        el.getAttribute('label') ||\n        [...el.childNodes]\n          .filter((node) => node.nodeType === Node.TEXT_NODE)\n          .map((node) => node.textContent?.trim())\n          .filter(Boolean)\n          .join(' ') ||\n        '',\n      value: el.getAttribute('value') ?? '',\n    }));\n}\n\nexport function filterOptions(options: ComboboxOptionItem[], query: string, noFilter: boolean): ComboboxOptionItem[] {\n  if (noFilter) return options;\n\n  const normalizedQuery = query.toLowerCase().trim();\n\n  if (!normalizedQuery) return options;\n\n  return options.filter(\n    (option) =>\n      option.label.toLowerCase().includes(normalizedQuery) || option.value.toLowerCase().includes(normalizedQuery),\n  );\n}\n\nexport function getCreatableLabel(query: string, creatable: boolean, filteredOptions: ComboboxOptionItem[]): string {\n  if (!creatable) return '';\n\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) return '';\n\n  const exactMatch = filteredOptions.some((option) => option.label.toLowerCase() === trimmedQuery.toLowerCase());\n\n  return exactMatch ? '' : `Create \"${trimmedQuery}\"`;\n}\n\nexport function makeCreatableValue(query: string): string {\n  return `__new__:${query.trim()}`;\n}\n"],"mappings":";AAEA,SAAgB,EAAoB,GAA2C;CAC7E,OAAO,EACJ,QAAQ,MAAO,EAAG,cAAc,qBAAqB,CAAC,CACtD,KAAK,OAAQ;EACZ,UAAU,EAAG,aAAa,UAAU;EACpC,QAAQ,EAAG,cAAc,iBAAe;EACxC,OACE,EAAG,aAAa,OAAO,KACvB,CAAC,GAAG,EAAG,UAAU,CAAC,CACf,QAAQ,MAAS,EAAK,aAAa,KAAK,SAAS,CAAC,CAClD,KAAK,MAAS,EAAK,aAAa,KAAK,CAAC,CAAC,CACvC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KACX;EACF,OAAO,EAAG,aAAa,OAAO,KAAK;CACrC,EAAE;AACN;AAEA,SAAgB,EAAc,GAA+B,GAAe,GAAyC;CACnH,IAAI,GAAU,OAAO;CAErB,IAAM,IAAkB,EAAM,YAAY,CAAC,CAAC,KAAK;CAIjD,OAFK,IAEE,EAAQ,QACZ,MACC,EAAO,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,KAAK,EAAO,MAAM,YAAY,CAAC,CAAC,SAAS,CAAe,CAC/G,IAL6B;AAM/B;AAEA,SAAgB,EAAkB,GAAe,GAAoB,GAA+C;CAClH,IAAI,CAAC,GAAW,OAAO;CAEvB,IAAM,IAAe,EAAM,KAAK;CAMhC,OAJK,IAEc,EAAgB,MAAM,MAAW,EAAO,MAAM,YAAY,MAAM,EAAa,YAAY,CAErG,IAAa,KAAK,WAAW,EAAa,KAJvB;AAK5B;AAEA,SAAgB,EAAmB,GAAuB;CACxD,OAAO,WAAW,EAAM,KAAK;AAC/B"}

package/dist/inputs/combobox/combobox.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer refine.base{:host{--_dropdown-bg:var(--combobox-dropdown-bg,var(--color-canvas));--_dropdown-border-color:var(--combobox-dropdown-border-color,var(--color-contrast-200));--_option-hover-bg:var(--combobox-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--combobox-option-focus-bg,color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100)));--_option-selected-bg:var(--combobox-option-selected-bg,color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50)));--_option-selected-focus-bg:var(--combobox-option-selected-focus-bg,color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100)));flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}:host([fullwidth]){width:100%;display:block}.trigger::part(input){cursor:text}.trigger::part(field){height:auto;min-height:var(--input-height,var(--size-10))}.trigger::part(input-row){row-gap:var(--size-1);flex-wrap:wrap;align-items:center}.chips-row,.chips-list{display:contents}ore-chip:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-1)}ore-chip:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-1)}.combobox-suffix{gap:var(--size-1);flex-shrink:0;align-items:center;display:flex}.clear-btn{color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.clear-btn[hidden]{display:none}.clear-btn:hover{color:var(--color-contrast-600)}.combobox-suffix-end{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.chevron{transition:var(--_motion-transition,transform var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex}:host([open]) .chevron{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;text-align:start;pointer-events:none;scrollbar-width:thin;background:var(--_dropdown-bg);border:var(--border) solid var(--_dropdown-border-color);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);margin:0;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:not(.option-check,.option-icon){text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.option:hover:not([data-disabled]){background:var(--_option-hover-bg)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:var(--_option-focus-bg)}.option[data-selected],.option[aria-selected=true]{font-weight:var(--font-medium);color:var(--_theme-base);background:var(--_option-selected-bg)}.option[data-selected][data-focused],.option[aria-selected=true][data-focused]{background:var(--_option-selected-focus-bg)}.option[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.option-check:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.option[data-selected] .option-check,.option[aria-selected=true] .option-check{opacity:1}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);color:var(--_theme-content,var(--color-primary-content));text-align:start;cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(ore-combobox-option){display:none}}`;exports.default=e;
+//# sourceMappingURL=combobox.css?inline.cjs.map

package/dist/inputs/combobox/combobox.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.css?inline.cjs","names":[],"sources":["../../../src/inputs/combobox/combobox.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_dropdown-bg: var(--combobox-dropdown-bg, var(--color-canvas));\n    --_dropdown-border-color: var(--combobox-dropdown-border-color, var(--color-contrast-200));\n    --_option-hover-bg: var(--combobox-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --combobox-option-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))\n    );\n    --_option-selected-bg: var(\n      --combobox-option-selected-bg,\n      color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))\n    );\n    --_option-selected-focus-bg: var(\n      --combobox-option-selected-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))\n    );\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in combobox.ts) */\n\n  /* ore-input cursor override so the field still feels like a text input */\n  .trigger::part(input) {\n    cursor: text;\n  }\n\n  /* Allow the field to grow vertically when chips wrap to multiple rows. */\n  .trigger::part(field) {\n    height: auto;\n    min-height: var(--input-height, var(--size-10));\n  }\n\n  /* Wrap chips + input across rows; suffix stays on same row as input.\n     Only row-gap is set here — column spacing between chips is handled\n     via margin on ore-chip so the empty prefix slot adds no extra offset\n     (which would shift the input rightward vs the inset label). */\n  .trigger::part(input-row) {\n    flex-wrap: wrap;\n    row-gap: var(--size-1);\n    align-items: center;\n  }\n\n  /* ========================================\n       Chips (prefix slot)\n       ======================================== */\n\n  /* display:contents removes chips-row from the flex layout so chips\n     become direct flex items of input-row — no extra gap before input\n     when there are no chips (fixes inset-label alignment). */\n  .chips-row {\n    display: contents;\n  }\n\n  /* chips-list is also display:contents so individual ore-chip elements\n     are the direct flex items, wrapping inline with the search input. */\n  .chips-list {\n    display: contents;\n  }\n\n  /* Trailing space after each chip covers both inter-chip spacing and\n     the gap between the last chip and the search input. */\n  ore-chip {\n    margin-inline-end: var(--size-1);\n  }\n\n  /* ========================================\n       Suffix: clear button + loader + chevron\n       ======================================== */\n\n  .combobox-suffix {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .clear-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 0;\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: none;\n    border: 0;\n  }\n\n  .clear-btn[hidden] {\n    display: none;\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-600);\n  }\n\n  .combobox-suffix-end {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .chevron {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown / Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    max-height: min(16rem, 50dvh);\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    scrollbar-width: thin;\n    background: var(--_dropdown-bg);\n    border: var(--border) solid var(--_dropdown-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels so options always stay single-line (fixed virtualizer row height). */\n  .option > span:not(.option-check, .option-icon) {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: var(--_option-focus-bg);\n  }\n\n  .option[data-selected],\n  .option[aria-selected='true'] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: var(--_option-selected-bg);\n  }\n\n  .option[data-selected][data-focused],\n  .option[aria-selected='true'][data-focused] {\n    background: var(--_option-selected-focus-bg);\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check,\n  .option[aria-selected='true'] .option-check {\n    opacity: 1;\n  }\n\n  .no-results,\n  .no-results-create,\n  .dropdown-loading {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .no-results-create {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: 100%;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--_theme-content, var(--color-primary-content));\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--rounded-sm);\n  }\n\n  .no-results-create:hover,\n  .no-results-create[data-focused] {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 10%, transparent);\n  }\n\n  /* ========================================\n       Option Icon\n       ======================================== */\n\n  .option-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  /* ========================================\n       Slotted option elements (hidden data nodes)\n       ======================================== */\n\n  ::slotted(ore-combobox-option) {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/inputs/combobox/combobox.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/combobox/combobox.css?inline
+var e = "@layer refine.base{:host{--_dropdown-bg:var(--combobox-dropdown-bg,var(--color-canvas));--_dropdown-border-color:var(--combobox-dropdown-border-color,var(--color-contrast-200));--_option-hover-bg:var(--combobox-option-hover-bg,var(--color-contrast-100));--_option-focus-bg:var(--combobox-option-focus-bg,color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100)));--_option-selected-bg:var(--combobox-option-selected-bg,color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50)));--_option-selected-focus-bg:var(--combobox-option-selected-focus-bg,color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100)));flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}:host([fullwidth]){width:100%;display:block}.trigger::part(input){cursor:text}.trigger::part(field){height:auto;min-height:var(--input-height,var(--size-10))}.trigger::part(input-row){row-gap:var(--size-1);flex-wrap:wrap;align-items:center}.chips-row,.chips-list{display:contents}ore-chip:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:var(--size-1)}ore-chip:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:var(--size-1)}.combobox-suffix{gap:var(--size-1);flex-shrink:0;align-items:center;display:flex}.clear-btn{color:var(--color-contrast-400);cursor:pointer;background:0 0;border:0;flex-shrink:0;align-items:center;padding:0;display:inline-flex}.clear-btn[hidden]{display:none}.clear-btn:hover{color:var(--color-contrast-600)}.combobox-suffix-end{gap:var(--size-1);color:var(--color-contrast-500);align-items:center;display:flex}.chevron{transition:var(--_motion-transition,transform var(--transition-fast));flex-shrink:0;align-items:center;display:inline-flex}:host([open]) .chevron{transform:rotate(180deg)}.loader{width:1em;height:1em;animation:var(--_motion-animation,spin var(--transition-loader) infinite);border:2px solid;border-radius:50%;flex-shrink:0;display:none}.loader:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-right-color:#0000}.loader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}:host([loading]) .loader{display:inline-block}.dropdown{z-index:calc(var(--z-popover,1000) + 1);box-sizing:border-box;max-height:min(16rem,50dvh);padding:var(--size-1);overscroll-behavior:contain;text-align:start;pointer-events:none;scrollbar-width:thin;background:var(--_dropdown-bg);border:var(--border) solid var(--_dropdown-border-color);border-radius:var(--_radius);box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));transform:translateY(var(--overlay-enter-translate-y));transition:var(--_motion-transition,opacity var(--transition-fast), transform var(--transition-fast), display var(--transition-fast) allow-discrete);margin:0;position:fixed;inset:0 auto auto 0;overflow-y:auto}.dropdown[data-open]{pointer-events:auto;opacity:1;transform:translateY(0)}@starting-style{.dropdown[data-open]{opacity:0;transform:translateY(var(--overlay-enter-translate-y))}}.option{gap:var(--size-2);padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);line-height:var(--leading-normal);cursor:pointer;border-radius:var(--rounded-sm);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;display:flex}.option>span:not(.option-check,.option-icon){text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.option:hover:not([data-disabled]){background:var(--_option-hover-bg)}.option[data-focused]:not([data-disabled]){color:var(--_theme-base);background:var(--_option-focus-bg)}.option[data-selected],.option[aria-selected=true]{font-weight:var(--font-medium);color:var(--_theme-base);background:var(--_option-selected-bg)}.option[data-selected][data-focused],.option[aria-selected=true][data-focused]{background:var(--_option-selected-focus-bg)}.option[data-disabled]{color:var(--color-contrast-400);cursor:not-allowed;opacity:.6}.option-check{color:var(--_theme-base);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;display:inline-flex}.option-check:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-left:auto}.option-check:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:auto}.option[data-selected] .option-check,.option[aria-selected=true] .option-check{opacity:1}.no-results,.no-results-create,.dropdown-loading{padding:var(--size-3) var(--size-2-5);font-size:var(--text-sm);color:var(--color-contrast-400);text-align:center}.no-results-create{gap:var(--size-1-5);width:100%;padding:var(--size-1-5) var(--size-2-5);font-size:var(--text-sm);color:var(--_theme-content,var(--color-primary-content));text-align:start;cursor:pointer;border-radius:var(--rounded-sm);background:0 0;border:0;align-items:center;display:flex}.no-results-create:hover,.no-results-create[data-focused]{background:color-mix(in oklch, var(--_theme-base,var(--color-primary)) 10%, transparent)}.option-icon{flex-shrink:0;align-items:center;display:inline-flex}::slotted(ore-combobox-option){display:none}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=combobox.css?inline.js.map

package/dist/inputs/combobox/combobox.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.css?inline.js","names":[],"sources":["../../../src/inputs/combobox/combobox.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    --_dropdown-bg: var(--combobox-dropdown-bg, var(--color-canvas));\n    --_dropdown-border-color: var(--combobox-dropdown-border-color, var(--color-contrast-200));\n    --_option-hover-bg: var(--combobox-option-hover-bg, var(--color-contrast-100));\n    --_option-focus-bg: var(\n      --combobox-option-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 12%, var(--color-contrast-100))\n    );\n    --_option-selected-bg: var(\n      --combobox-option-selected-bg,\n      color-mix(in oklch, var(--_theme-base) 10%, var(--color-contrast-50))\n    );\n    --_option-selected-focus-bg: var(\n      --combobox-option-selected-focus-bg,\n      color-mix(in oklch, var(--_theme-base) 20%, var(--color-contrast-100))\n    );\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  :host([fullwidth]) {\n    display: block;\n    width: 100%;\n  }\n\n  /* .sr-only is provided by the shared srOnlyMixin (see styles: [...] in combobox.ts) */\n\n  /* ore-input cursor override so the field still feels like a text input */\n  .trigger::part(input) {\n    cursor: text;\n  }\n\n  /* Allow the field to grow vertically when chips wrap to multiple rows. */\n  .trigger::part(field) {\n    height: auto;\n    min-height: var(--input-height, var(--size-10));\n  }\n\n  /* Wrap chips + input across rows; suffix stays on same row as input.\n     Only row-gap is set here — column spacing between chips is handled\n     via margin on ore-chip so the empty prefix slot adds no extra offset\n     (which would shift the input rightward vs the inset label). */\n  .trigger::part(input-row) {\n    flex-wrap: wrap;\n    row-gap: var(--size-1);\n    align-items: center;\n  }\n\n  /* ========================================\n       Chips (prefix slot)\n       ======================================== */\n\n  /* display:contents removes chips-row from the flex layout so chips\n     become direct flex items of input-row — no extra gap before input\n     when there are no chips (fixes inset-label alignment). */\n  .chips-row {\n    display: contents;\n  }\n\n  /* chips-list is also display:contents so individual ore-chip elements\n     are the direct flex items, wrapping inline with the search input. */\n  .chips-list {\n    display: contents;\n  }\n\n  /* Trailing space after each chip covers both inter-chip spacing and\n     the gap between the last chip and the search input. */\n  ore-chip {\n    margin-inline-end: var(--size-1);\n  }\n\n  /* ========================================\n       Suffix: clear button + loader + chevron\n       ======================================== */\n\n  .combobox-suffix {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .clear-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 0;\n    color: var(--color-contrast-400);\n    cursor: pointer;\n    background: none;\n    border: 0;\n  }\n\n  .clear-btn[hidden] {\n    display: none;\n  }\n\n  .clear-btn:hover {\n    color: var(--color-contrast-600);\n  }\n\n  .combobox-suffix-end {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n    color: var(--color-contrast-500);\n  }\n\n  .chevron {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    transition: var(--_motion-transition, transform var(--transition-fast));\n  }\n\n  :host([open]) .chevron {\n    transform: rotate(180deg);\n  }\n\n  .loader {\n    display: none;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    border: 2px solid currentcolor;\n    border-inline-end-color: transparent;\n    border-radius: 50%;\n    animation: var(--_motion-animation, spin var(--transition-loader) infinite);\n  }\n\n  /* Keyframe must live in shadow DOM — @keyframes don't inherit across shadow roots */\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([loading]) .loader {\n    display: inline-block;\n  }\n\n  /* ========================================\n       Dropdown / Listbox\n       ======================================== */\n\n  .dropdown {\n    position: fixed;\n    inset: 0 auto auto 0;\n    z-index: calc(var(--z-popover, 1000) + 1);\n    box-sizing: border-box;\n    max-height: min(16rem, 50dvh);\n    padding: var(--size-1);\n    margin: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    text-align: start;\n    pointer-events: none;\n    scrollbar-width: thin;\n    background: var(--_dropdown-bg);\n    border: var(--border) solid var(--_dropdown-border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-lg);\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-md));\n    transform: translateY(var(--overlay-enter-translate-y));\n    transition: var(\n      --_motion-transition,\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete\n    );\n  }\n\n  .dropdown[data-open] {\n    pointer-events: auto;\n    opacity: 1;\n    transform: translateY(0);\n\n    @starting-style {\n      opacity: 0;\n      transform: translateY(var(--overlay-enter-translate-y));\n    }\n  }\n\n  /* ========================================\n       Option Items\n       ======================================== */\n\n  .option {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    cursor: pointer;\n    border-radius: var(--rounded-sm);\n    transition:\n      background var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  /* Truncate long labels so options always stay single-line (fixed virtualizer row height). */\n  .option > span:not(.option-check, .option-icon) {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .option:hover:not([data-disabled]) {\n    background: var(--_option-hover-bg);\n  }\n\n  .option[data-focused]:not([data-disabled]) {\n    color: var(--_theme-base);\n    background: var(--_option-focus-bg);\n  }\n\n  .option[data-selected],\n  .option[aria-selected='true'] {\n    font-weight: var(--font-medium);\n    color: var(--_theme-base);\n    background: var(--_option-selected-bg);\n  }\n\n  .option[data-selected][data-focused],\n  .option[aria-selected='true'][data-focused] {\n    background: var(--_option-selected-focus-bg);\n  }\n\n  .option[data-disabled] {\n    color: var(--color-contrast-400);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .option-check {\n    display: inline-flex;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--_theme-base);\n    opacity: 0;\n    transition: opacity var(--transition-fast);\n  }\n\n  .option[data-selected] .option-check,\n  .option[aria-selected='true'] .option-check {\n    opacity: 1;\n  }\n\n  .no-results,\n  .no-results-create,\n  .dropdown-loading {\n    padding: var(--size-3) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .no-results-create {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n    width: 100%;\n    padding: var(--size-1-5) var(--size-2-5);\n    font-size: var(--text-sm);\n    color: var(--_theme-content, var(--color-primary-content));\n    text-align: start;\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--rounded-sm);\n  }\n\n  .no-results-create:hover,\n  .no-results-create[data-focused] {\n    background: color-mix(in oklch, var(--_theme-base, var(--color-primary)) 10%, transparent);\n  }\n\n  /* ========================================\n       Option Icon\n       ======================================== */\n\n  .option-icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  /* ========================================\n       Slotted option elements (hidden data nodes)\n       ======================================== */\n\n  ::slotted(ore-combobox-option) {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/inputs/combobox/combobox.d.ts

@@ -0,0 +1,45 @@
+import '../../feedback/chip/chip';
+import '../input/input';
+export type { OreComboboxEvents, OreComboboxProps } from './combobox.types';
+/**
+ * A searchable select field with multiple selection, custom option creation, and large-list support.
+ *
+ * @element ore-combobox
+ *
+ * @attr {string} value - Selected value(s). Use comma-separated for multiple.
+ * @attr {boolean} multiple - Enable multiple selection
+ * @attr {boolean} creatable - Allow users to create custom options from search query
+ * @attr {boolean} no-filter - Disable client-side filtering (useful for server-side search)
+ * @attr {string} placeholder - Placeholder text
+ *
+ * @fires {CustomEvent} change - Emitted when selection changes. detail: { value: string | string[], values: string[], labels: string[] }
+ * @fires {CustomEvent} search - Emitted when user types. detail: { query: string }
+ *
+ * @slot - Slotted combobox options and option groups
+ * @cssprop --combobox-dropdown-bg - Dropdown panel background color
+ * @cssprop --combobox-dropdown-border-color - Dropdown panel border color
+ * @cssprop --combobox-option-hover-bg - Option background on hover
+ * @cssprop --combobox-option-focus-bg - Option background when keyboard-focused
+ * @cssprop --combobox-option-selected-bg - Option background when selected
+ * @cssprop --combobox-option-selected-focus-bg - Option background when selected and focused
+ * @cssprop --input-bg - Field background (passed through to ore-input)
+ * @cssprop --input-border-color - Field border color (passed through to ore-input)
+ *
+ * @part wrapper - Root wrapper around the entire field
+ * @part label - Label element shown inside or outside the field
+ * @part field - Field container that holds the trigger input and clear button
+ * @part input - Search input used to filter and select options
+ * @part clear-btn - Button that clears the current selection/query
+ * @part dropdown - Popup list container for options
+ * @part helper-text - Helper text displayed below the field
+ * @example
+ * ```html
+ * <ore-combobox label="Country" name="country">
+ *   <ore-combobox-option value="us">United States</ore-combobox-option>
+ *   <ore-combobox-option value="gb">United Kingdom</ore-combobox-option>
+ *   <ore-combobox-option value="de" disabled>Germany</ore-combobox-option>
+ * </ore-combobox>
+ * ```
+ */
+export declare const COMBOBOX_TAG: "ore-combobox";
+//# sourceMappingURL=combobox.d.ts.map

package/dist/inputs/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/inputs/combobox/combobox.ts"],"names":[],"mappings":"AAiBA,OAAO,0BAA0B,CAAC;AAClC,OAAO,gBAAgB,CAAC;AAGxB,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,YAAY,EAAG,cAAuB,CAAC"}