@wrrdev/fenix-ui 1.1.5 → 1.1.7

package/dist/components/knob/knob.js.map

@@ -1 +1 @@
-{"version":3,"file":"knob.js","sources":["../../../src/components/knob/knob.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-knob> - Controle giratorio circular para ajuste de valor.\n *\n * Similar ao Knob do PrimeVue, permite ajustar um valor arrastando o mouse\n * ou usando as setas do teclado. Exibe um arco de progresso circular com\n * o valor central configuravel via valueTemplate.\n *\n * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,\n * readonly, disabled, valueTemplate.\n * Evento: `change` (composed, detail: { value }).\n */\nexport class FxKnob extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --_size: 100px;\n      --_stroke-width: 8px;\n      --_value-color: var(--fx-color-primary);\n      --_range-color: var(--fx-border-default);\n    }\n    :host([size='sm']) { --_size: 60px; }\n    :host([size='lg']) { --_size: 140px; }\n    .knob {\n      position: relative;\n      width: var(--_size);\n      height: var(--_size);\n      cursor: pointer;\n      user-select: none;\n      touch-action: none;\n    }\n    :host([readonly]) .knob,\n    :host([disabled]) .knob {\n      cursor: default;\n      pointer-events: none;\n    }\n    :host([disabled]) .knob {\n      opacity: 0.55;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      transform: rotate(-90deg);\n    }\n    .track {\n      fill: none;\n      stroke: var(--_range-color);\n      stroke-width: var(--_stroke-width);\n    }\n    .value {\n      fill: none;\n      stroke: var(--_value-color);\n      stroke-width: var(--_stroke-width);\n      stroke-linecap: round;\n      transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .label {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 600;\n      color: var(--fx-text-default);\n      pointer-events: none;\n    }\n    :host([size='sm']) .label { font-size: 11px; }\n    :host([size='md']) .label { font-size: 14px; }\n    :host([size='lg']) .label { font-size: 18px; }\n    .knob:focus-visible {\n      outline: none;\n    }\n    .knob:focus-visible svg {\n      filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return [\n      'value',\n      'min',\n      'max',\n      'step',\n      'size',\n      'stroke-width',\n      'value-color',\n      'range-color',\n      'readonly',\n      'disabled',\n      'value-template',\n    ];\n  }\n\n  get value(): number {\n    return this.clampValue(Number(this.getAttr('value', '0')) || 0);\n  }\n  set value(v: number) {\n    if (this.readonly || this.disabled) return;\n    const clamped = this.clampValue(v);\n    const current = this.clampValue(Number(this.getAttr('value', '0')) || 0);\n    if (clamped !== current) {\n      this.setAttribute('value', String(clamped));\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  get min(): number {\n    return Number(this.getAttr('min', '0')) || 0;\n  }\n  set min(v: number) {\n    this.setAttribute('min', String(v));\n  }\n\n  get max(): number {\n    return Number(this.getAttr('max', '100')) || 100;\n  }\n  set max(v: number) {\n    this.setAttribute('max', String(v));\n  }\n\n  get step(): number {\n    return Number(this.getAttr('step', '1')) || 1;\n  }\n  set step(v: number) {\n    this.setAttribute('step', String(v));\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(v: string) {\n    this.setAttribute('size', v);\n  }\n\n  get strokeWidth(): number {\n    return Number(this.getAttr('stroke-width', '8')) || 8;\n  }\n  set strokeWidth(v: number) {\n    this.setAttribute('stroke-width', String(v));\n  }\n\n  get valueColor(): string {\n    return this.getAttr('value-color', '');\n  }\n  set valueColor(v: string) {\n    this.setAttribute('value-color', v);\n  }\n\n  get rangeColor(): string {\n    return this.getAttr('range-color', '');\n  }\n  set rangeColor(v: string) {\n    this.setAttribute('range-color', v);\n  }\n\n  get readonly(): boolean {\n    return this.hasAttr('readonly');\n  }\n  set readonly(v: boolean) {\n    this.toggleAttr('readonly', Boolean(v));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(v: boolean) {\n    this.toggleAttr('disabled', Boolean(v));\n  }\n\n  get valueTemplate(): string {\n    return this.getAttr('value-template', '{value}');\n  }\n  set valueTemplate(v: string) {\n    this.setAttribute('value-template', v);\n  }\n\n  private _isDragging = false;\n  private _startY = 0;\n  private _startValue = 0;\n\n  protected override render(): void {\n    const min = this.min;\n    const max = this.max;\n    const value = this.clampValue(this.value);\n    const range = max - min;\n    const pct = range > 0 ? (value - min) / range : 0;\n\n    const sizeNum = this.getSizeNum();\n    const strokeW = this.strokeWidth;\n    const radius = (sizeNum - strokeW) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference * (1 - pct);\n\n    const vc = this.valueColor ? this.safeColor(this.valueColor) : '';\n    const rc = this.rangeColor ? this.safeColor(this.rangeColor) : '';\n    const valueColorStyle = vc ? `--_value-color: ${vc};` : '';\n    const rangeColorStyle = rc ? `--_range-color: ${rc};` : '';\n\n    const displayValue = this.valueTemplate.replace('{value}', String(Math.round(value)));\n\n    this.setTemplate(`\n      <div class=\"knob\" part=\"knob\" tabindex=\"${this.disabled ? '-1' : '0'}\"\n        role=\"slider\" aria-valuenow=\"${value}\" aria-valuemin=\"${min}\" aria-valuemax=\"${max}\"\n        aria-readonly=\"${this.readonly}\" aria-disabled=\"${this.disabled}\"\n        style=\"${valueColorStyle}${rangeColorStyle}\">\n        <svg viewBox=\"0 0 ${sizeNum} ${sizeNum}\" part=\"svg\">\n          <circle class=\"track\" part=\"track\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\" />\n          <circle class=\"value\" part=\"value\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\"\n            stroke-dasharray=\"${circumference}\"\n            stroke-dashoffset=\"${offset}\" />\n        </svg>\n        <div class=\"label\" part=\"label\">${esc(displayValue)}</div>\n      </div>\n    `);\n\n    this.attachListeners();\n  }\n\n  private getSizeNum(): number {\n    const s = this.size;\n    if (s === 'sm') return 60;\n    if (s === 'lg') return 140;\n    return 100;\n  }\n\n  /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */\n  private safeColor(value: string): string {\n    const v = value.trim();\n    if (/^#[0-9a-fA-F]{3,8}$/.test(v)) return v;\n    if (/^(rgb|rgba|hsl|hsla)\\([\\d\\s.,%()]+\\)$/i.test(v)) return v;\n    if (/^var\\(--[\\w-]+(,\\s*[^)]*)?\\)$/.test(v)) return v;\n    if (/^[a-zA-Z]+$/.test(v)) return v;\n    return '';\n  }\n\n  private clampValue(v: number): number {\n    const min = this.min;\n    const max = this.max;\n    const step = this.step;\n    let clamped = Math.min(max, Math.max(min, v));\n    if (step > 0) {\n      clamped = Math.round((clamped - min) / step) * step + min;\n      clamped = Math.min(max, Math.max(min, clamped));\n    }\n    return clamped;\n  }\n\n  private emitChange(newValue: number): void {\n    const clamped = this.clampValue(newValue);\n    if (clamped !== this.value) {\n      this.value = clamped;\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  private attachListeners(): void {\n    const knob = this.root.querySelector<HTMLElement>('.knob');\n    if (!knob) return;\n\n    knob.addEventListener('mousedown', (e: MouseEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.clientY;\n      this._startValue = this.value;\n      knob.focus();\n      document.addEventListener('mousemove', this._onMouseMove);\n      document.addEventListener('mouseup', this._onMouseUp);\n    });\n\n    knob.addEventListener('touchstart', (e: TouchEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.touches[0].clientY;\n      this._startValue = this.value;\n      knob.focus();\n    }, { passive: false });\n\n    knob.addEventListener('touchmove', (e: TouchEvent) => {\n      if (!this._isDragging || this.readonly || this.disabled) return;\n      e.preventDefault();\n      const deltaY = this._startY - e.touches[0].clientY;\n      const sensitivity = (this.max - this.min) / 100;\n      this.emitChange(this._startValue + deltaY * sensitivity);\n    }, { passive: false });\n\n    knob.addEventListener('touchend', () => {\n      this._isDragging = false;\n    });\n\n    knob.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (this.readonly || this.disabled) return;\n      const step = this.step;\n      switch (e.key) {\n        case 'ArrowUp':\n        case 'ArrowRight':\n          e.preventDefault();\n          this.emitChange(this.value + step);\n          break;\n        case 'ArrowDown':\n        case 'ArrowLeft':\n          e.preventDefault();\n          this.emitChange(this.value - step);\n          break;\n        case 'Home':\n          e.preventDefault();\n          this.emitChange(this.min);\n          break;\n        case 'End':\n          e.preventDefault();\n          this.emitChange(this.max);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          this.emitChange(this.value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          this.emitChange(this.value - step * 10);\n          break;\n      }\n    });\n  }\n\n  private _onMouseMove = (e: MouseEvent): void => {\n    if (!this._isDragging) return;\n    const deltaY = this._startY - e.clientY;\n    const sensitivity = (this.max - this.min) / 100;\n    this.emitChange(this._startValue + deltaY * sensitivity);\n  };\n\n  private _onMouseUp = (): void => {\n    this._isDragging = false;\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n  };\n\n  protected override disconnectedCallback(): void {\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n    super.disconnectedCallback();\n  }\n}\n\nexport function defineFxKnob(): typeof FxKnob {\n  return defineElement('fx-knob', FxKnob);\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"knob.js","sources":["../../../src/components/knob/knob.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-knob> - Controle giratorio circular para ajuste de valor.\n *\n * permite ajustar um valor arrastando o mouse\n * ou usando as setas do teclado. Exibe um arco de progresso circular com\n * o valor central configuravel via valueTemplate.\n *\n * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,\n * readonly, disabled, valueTemplate.\n * Evento: `change` (composed, detail: { value }).\n */\nexport class FxKnob extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --_size: 100px;\n      --_stroke-width: 8px;\n      --_value-color: var(--fx-color-primary);\n      --_range-color: var(--fx-border-default);\n    }\n    :host([size='sm']) { --_size: 60px; }\n    :host([size='lg']) { --_size: 140px; }\n    .knob {\n      position: relative;\n      width: var(--_size);\n      height: var(--_size);\n      cursor: pointer;\n      user-select: none;\n      touch-action: none;\n    }\n    :host([readonly]) .knob,\n    :host([disabled]) .knob {\n      cursor: default;\n      pointer-events: none;\n    }\n    :host([disabled]) .knob {\n      opacity: 0.55;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      transform: rotate(-90deg);\n    }\n    .track {\n      fill: none;\n      stroke: var(--_range-color);\n      stroke-width: var(--_stroke-width);\n    }\n    .value {\n      fill: none;\n      stroke: var(--_value-color);\n      stroke-width: var(--_stroke-width);\n      stroke-linecap: round;\n      transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .label {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 600;\n      color: var(--fx-text-default);\n      pointer-events: none;\n    }\n    :host([size='sm']) .label { font-size: 11px; }\n    :host([size='md']) .label { font-size: 14px; }\n    :host([size='lg']) .label { font-size: 18px; }\n    .knob:focus-visible {\n      outline: none;\n    }\n    .knob:focus-visible svg {\n      /* Mesmo fallback none dos demais componentes: sem motor de tema (ou com\n         effect.focus-ring desligado) não há anel de foco. */\n      filter: drop-shadow(var(--fx-effect-focus-ring, none));\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return [\n      'value',\n      'min',\n      'max',\n      'step',\n      'size',\n      'stroke-width',\n      'value-color',\n      'range-color',\n      'readonly',\n      'disabled',\n      'value-template',\n    ];\n  }\n\n  get value(): number {\n    return this.clampValue(Number(this.getAttr('value', '0')) || 0);\n  }\n  set value(v: number) {\n    if (this.readonly || this.disabled) return;\n    const clamped = this.clampValue(v);\n    const current = this.clampValue(Number(this.getAttr('value', '0')) || 0);\n    if (clamped !== current) {\n      this.setAttribute('value', String(clamped));\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  get min(): number {\n    return Number(this.getAttr('min', '0')) || 0;\n  }\n  set min(v: number) {\n    this.setAttribute('min', String(v));\n  }\n\n  get max(): number {\n    return Number(this.getAttr('max', '100')) || 100;\n  }\n  set max(v: number) {\n    this.setAttribute('max', String(v));\n  }\n\n  get step(): number {\n    return Number(this.getAttr('step', '1')) || 1;\n  }\n  set step(v: number) {\n    this.setAttribute('step', String(v));\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(v: string) {\n    this.setAttribute('size', v);\n  }\n\n  get strokeWidth(): number {\n    return Number(this.getAttr('stroke-width', '8')) || 8;\n  }\n  set strokeWidth(v: number) {\n    this.setAttribute('stroke-width', String(v));\n  }\n\n  get valueColor(): string {\n    return this.getAttr('value-color', '');\n  }\n  set valueColor(v: string) {\n    this.setAttribute('value-color', v);\n  }\n\n  get rangeColor(): string {\n    return this.getAttr('range-color', '');\n  }\n  set rangeColor(v: string) {\n    this.setAttribute('range-color', v);\n  }\n\n  get readonly(): boolean {\n    return this.hasAttr('readonly');\n  }\n  set readonly(v: boolean) {\n    this.toggleAttr('readonly', Boolean(v));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(v: boolean) {\n    this.toggleAttr('disabled', Boolean(v));\n  }\n\n  get valueTemplate(): string {\n    return this.getAttr('value-template', '{value}');\n  }\n  set valueTemplate(v: string) {\n    this.setAttribute('value-template', v);\n  }\n\n  private _isDragging = false;\n  private _startY = 0;\n  private _startValue = 0;\n\n  protected override render(): void {\n    const min = this.min;\n    const max = this.max;\n    const value = this.clampValue(this.value);\n    const range = max - min;\n    const pct = range > 0 ? (value - min) / range : 0;\n\n    const sizeNum = this.getSizeNum();\n    const strokeW = this.strokeWidth;\n    const radius = (sizeNum - strokeW) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference * (1 - pct);\n\n    const vc = this.valueColor ? this.safeColor(this.valueColor) : '';\n    const rc = this.rangeColor ? this.safeColor(this.rangeColor) : '';\n    const valueColorStyle = vc ? `--_value-color: ${vc};` : '';\n    const rangeColorStyle = rc ? `--_range-color: ${rc};` : '';\n\n    const displayValue = this.valueTemplate.replace('{value}', String(Math.round(value)));\n\n    this.setTemplate(`\n      <div class=\"knob\" part=\"knob\" tabindex=\"${this.disabled ? '-1' : '0'}\"\n        role=\"slider\" aria-valuenow=\"${value}\" aria-valuemin=\"${min}\" aria-valuemax=\"${max}\"\n        aria-readonly=\"${this.readonly}\" aria-disabled=\"${this.disabled}\"\n        style=\"${valueColorStyle}${rangeColorStyle}\">\n        <svg viewBox=\"0 0 ${sizeNum} ${sizeNum}\" part=\"svg\">\n          <circle class=\"track\" part=\"track\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\" />\n          <circle class=\"value\" part=\"value\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\"\n            stroke-dasharray=\"${circumference}\"\n            stroke-dashoffset=\"${offset}\" />\n        </svg>\n        <div class=\"label\" part=\"label\">${esc(displayValue)}</div>\n      </div>\n    `);\n\n    this.attachListeners();\n  }\n\n  private getSizeNum(): number {\n    const s = this.size;\n    if (s === 'sm') return 60;\n    if (s === 'lg') return 140;\n    return 100;\n  }\n\n  /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */\n  private safeColor(value: string): string {\n    const v = value.trim();\n    if (/^#[0-9a-fA-F]{3,8}$/.test(v)) return v;\n    if (/^(rgb|rgba|hsl|hsla)\\([\\d\\s.,%()]+\\)$/i.test(v)) return v;\n    if (/^var\\(--[\\w-]+(,\\s*[^)]*)?\\)$/.test(v)) return v;\n    if (/^[a-zA-Z]+$/.test(v)) return v;\n    return '';\n  }\n\n  private clampValue(v: number): number {\n    const min = this.min;\n    const max = this.max;\n    const step = this.step;\n    let clamped = Math.min(max, Math.max(min, v));\n    if (step > 0) {\n      clamped = Math.round((clamped - min) / step) * step + min;\n      clamped = Math.min(max, Math.max(min, clamped));\n    }\n    return clamped;\n  }\n\n  private emitChange(newValue: number): void {\n    const clamped = this.clampValue(newValue);\n    if (clamped !== this.value) {\n      this.value = clamped;\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  private attachListeners(): void {\n    const knob = this.root.querySelector<HTMLElement>('.knob');\n    if (!knob) return;\n\n    knob.addEventListener('mousedown', (e: MouseEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.clientY;\n      this._startValue = this.value;\n      knob.focus();\n      document.addEventListener('mousemove', this._onMouseMove);\n      document.addEventListener('mouseup', this._onMouseUp);\n    });\n\n    knob.addEventListener('touchstart', (e: TouchEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.touches[0].clientY;\n      this._startValue = this.value;\n      knob.focus();\n    }, { passive: false });\n\n    knob.addEventListener('touchmove', (e: TouchEvent) => {\n      if (!this._isDragging || this.readonly || this.disabled) return;\n      e.preventDefault();\n      const deltaY = this._startY - e.touches[0].clientY;\n      const sensitivity = (this.max - this.min) / 100;\n      this.emitChange(this._startValue + deltaY * sensitivity);\n    }, { passive: false });\n\n    knob.addEventListener('touchend', () => {\n      this._isDragging = false;\n    });\n\n    knob.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (this.readonly || this.disabled) return;\n      const step = this.step;\n      switch (e.key) {\n        case 'ArrowUp':\n        case 'ArrowRight':\n          e.preventDefault();\n          this.emitChange(this.value + step);\n          break;\n        case 'ArrowDown':\n        case 'ArrowLeft':\n          e.preventDefault();\n          this.emitChange(this.value - step);\n          break;\n        case 'Home':\n          e.preventDefault();\n          this.emitChange(this.min);\n          break;\n        case 'End':\n          e.preventDefault();\n          this.emitChange(this.max);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          this.emitChange(this.value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          this.emitChange(this.value - step * 10);\n          break;\n      }\n    });\n  }\n\n  private _onMouseMove = (e: MouseEvent): void => {\n    if (!this._isDragging) return;\n    const deltaY = this._startY - e.clientY;\n    const sensitivity = (this.max - this.min) / 100;\n    this.emitChange(this._startValue + deltaY * sensitivity);\n  };\n\n  private _onMouseUp = (): void => {\n    this._isDragging = false;\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n  };\n\n  protected override disconnectedCallback(): void {\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n    super.disconnectedCallback();\n  }\n}\n\nexport function defineFxKnob(): typeof FxKnob {\n  return defineElement('fx-knob', FxKnob);\n}"],"names":[],"mappings":"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"}

package/dist/components/multiselect/multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,OAAgB,MAAM,SA0NpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IAErC,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAezB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,WAAW;IAMnB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;CAwIlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,OAAgB,MAAM,SAqOpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IAErC,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAezB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,WAAW;IAMnB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;CAwIlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}

package/dist/components/multiselect/multiselect.js

@@ -199,17 +199,23 @@ _FxMultiselect.styles = css`
       font-family: var(--fx-font-family);
       font-size: var(--fx-font-size);
       position: relative;
+      /* Largura padrão no HOST: CSS externo, classes e style inline no elemento
+         vencem este default naturalmente (regras do documento > :host). */
+      width: var(--fx-multiselect-width, 240px);
     }
     .trigger {
       display: inline-flex;
       align-items: center;
       flex-wrap: nowrap;
       gap: var(--fx-space-xs);
-      width: 240px;
+      /* Acompanha a largura definida no :host. */
+      width: 100%;
       box-sizing: border-box;
       min-height: var(--fx-size-md);
       padding: var(--fx-space-xs) var(--fx-space-md);
       font: inherit;
+      /* Altura determinística: a caixa fica no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
@@ -228,33 +234,38 @@ _FxMultiselect.styles = css`
       min-width: 0;
       overflow: hidden;
     }
-    :host([size='sm']) .trigger { min-height: var(--fx-size-sm); width: 200px; }
-    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); width: 280px; font-size: calc(var(--fx-font-size) + 4px); }
+    :host([size='sm']) { width: var(--fx-multiselect-width-sm, 200px); }
+    :host([size='sm']) .trigger { min-height: var(--fx-size-sm); }
+    :host([size='lg']) { width: var(--fx-multiselect-width-lg, 280px); }
+    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }
     /* Full width: o host estica até o pai e o trigger acompanha. */
     :host([full]) { display: block; width: 100%; }
     :host([full]) .trigger { width: 100%; }
-    /* Validação */
+    /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho
+       segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */
     :host([error]) .trigger,
     :host([invalid]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([error]) .trigger:focus-visible,
     :host([invalid]) .trigger:focus-visible,
     :host([error][open]) .trigger,
     :host([invalid][open]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .trigger,
     :host([valid]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([success]) .trigger:focus-visible,
     :host([valid]) .trigger:focus-visible,
     :host([success][open]) .trigger,
     :host([valid][open]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     .trigger:hover { border-color: var(--fx-border-hover); }
     .trigger:focus-visible {

package/dist/components/multiselect/multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-multiselect> — Seleção múltipla .\n *\n * Dropdown customizado com painel (overlay), checkbox por item, pesquisa\n * opcional e ação de limpar. Opções via <option> nativos no light DOM.\n *\n * Atributos: values (CSV), searchable, clearable, disabled, placeholder,\n * size (sm|md|lg), no-results.\n * Evento: `change` (composed, detail: { values: string[] }).\n */\nexport class FxMultiselect extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      position: relative;\n    }\n    .trigger {\n      display: inline-flex;\n      align-items: center;\n      flex-wrap: nowrap;\n      gap: var(--fx-space-xs);\n      width: 240px;\n      box-sizing: border-box;\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      font: inherit;\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      cursor: pointer;\n      text-align: left;\n      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    /* Área dos chips: encolhe e quebra linha internamente,\n       mantendo os ícones sempre dentro do componente. */\n    .lead {\n      display: inline-flex;\n      flex-wrap: wrap;\n      gap: var(--fx-space-xs);\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n    }\n    :host([size='sm']) .trigger { min-height: var(--fx-size-sm); width: 200px; }\n    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); width: 280px; font-size: calc(var(--fx-font-size) + 4px); }\n    /* Full width: o host estica até o pai e o trigger acompanha. */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .trigger { width: 100%; }\n    /* Validação */\n    :host([error]) .trigger,\n    :host([invalid]) .trigger {\n      border-color: var(--fx-color-danger, #dc2626);\n    }\n    :host([error]) .trigger:focus-visible,\n    :host([invalid]) .trigger:focus-visible,\n    :host([error][open]) .trigger,\n    :host([invalid][open]) .trigger {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);\n    }\n    :host([success]) .trigger,\n    :host([valid]) .trigger {\n      border-color: var(--fx-color-success, #16a34a);\n    }\n    :host([success]) .trigger:focus-visible,\n    :host([valid]) .trigger:focus-visible,\n    :host([success][open]) .trigger,\n    :host([valid][open]) .trigger {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);\n    }\n    .trigger:hover { border-color: var(--fx-border-hover); }\n    .trigger:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }\n    .placeholder { color: var(--fx-text-muted); }\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n      color: var(--fx-color-primary);\n      border-radius: var(--fx-radius-sm);\n      padding: 2px 6px;\n      font-size: calc(var(--fx-font-size) - 2px);\n    }\n    .chip__x {\n      border: none;\n      background: none;\n      color: inherit;\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) - 1px);\n      line-height: 1;\n      padding: 0;\n    }\n    .trigger-right {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--fx-text-muted);\n    }\n    .icon-btn {\n      border: none;\n      background: none;\n      color: inherit;\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1;\n      padding: 0 2px;\n      border-radius: var(--fx-radius-full);\n    }\n    .icon-btn:hover { color: var(--fx-color-danger); }\n    .caret {\n      font-size: calc(var(--fx-font-size) - 3px);\n      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([open]) .caret { transform: rotate(180deg); }\n\n    /* Painel (overlay ) */\n    .panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      z-index: var(--fx-z-dropdown, 1000);\n      width: max(100%, 240px);\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      display: none;\n      overflow: hidden;\n    }\n    :host([up]) .panel {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n    :host([open]) .panel { display: block; }\n    .panel-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border-bottom: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-surface-hover);\n    }\n    .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n    .clear-all {\n      border: none;\n      background: none;\n      font: inherit;\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-color-primary);\n      cursor: pointer;\n      padding: 0;\n    }\n    .clear-all:hover { text-decoration: underline; }\n    .search {\n      width: 100%;\n      box-sizing: border-box;\n      font: inherit;\n      color: var(--fx-text-default);\n      background: var(--fx-surface-background);\n      border: none;\n      border-bottom: 1px solid var(--fx-border-default);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      outline: none;\n    }\n    .list {\n      max-height: 240px;\n      overflow-y: auto;\n      list-style: none;\n      margin: 0;\n      padding: var(--fx-space-3xs, 4px);\n    }\n    .opt {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      width: 100%;\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border: none;\n      background: none;\n      font: inherit;\n      color: var(--fx-text-default);\n      cursor: pointer;\n      border-radius: var(--fx-radius-sm);\n      text-align: left;\n    }\n    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\n    .opt[aria-selected='true'] {\n      background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);\n      color: var(--fx-color-primary);\n      font-weight: var(--fx-font-weight);\n    }\n    /* Checkbox visual */\n    .box {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fx-border-default);\n      border-radius: calc(var(--fx-radius-sm) / 2);\n      font-size: 11px;\n      line-height: 1;\n      color: transparent;\n      transition:\n        background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .opt[aria-selected='true'] .box {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n    }\n    .opt[aria-selected='true'] .box::after { content: '✓'; }\n    .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }\n    :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n    // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n    return ['disabled', 'placeholder', 'error', 'invalid', 'success', 'valid'];\n  }\n\n  private observer?: MutationObserver;\n  private docListener?: (e: Event) => void;\n  private selected = new Set<string>();\n\n  /** Valores selecionados (CSV no atributo / array na propriedade). */\n  get values(): string[] {\n    const csv = this.getAttr('values');\n    return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n  }\n  set values(list: string[]) {\n    this.setAttribute('values', list.join(','));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  private get options(): { value: string; label: string }[] {\n    return [...this.querySelectorAll('option')].map((o) => ({\n      value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\n      label: o.textContent?.trim() ?? '',\n    }));\n  }\n\n  protected override connectedCallback(): void {\n    // Popula a seleção ANTES do primeiro render (super chama render).\n    this.selected = new Set(this.values);\n    super.connectedCallback();\n    this.observer = new MutationObserver(() => this.render());\n    this.observer.observe(this, { childList: true, subtree: true, characterData: true });\n    this.docListener = (e: Event) => {\n      if (!this.hasAttr('open')) return;\n      if (e.composedPath().includes(this)) return;\n      this.removeAttribute('open');\n      this.render();\n    };\n    document.addEventListener('click', this.docListener);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.observer?.disconnect();\n    if (this.docListener) document.removeEventListener('click', this.docListener);\n  }\n\n  /** Aplica a seleção, reflete e emite change. */\n  private commit(): void {\n    this.values = [...this.selected];\n    this.render();\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { values: [...this.selected] },\n      }),\n    );\n  }\n\n  private toggleValue(value: string): void {\n    if (this.selected.has(value)) this.selected.delete(value);\n    else this.selected.add(value);\n    this.commit();\n  }\n\n  /** Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */\n  private _navigateOptions(e: KeyboardEvent): void {\n    e.preventDefault();\n    if (!this.hasAttr('open')) {\n      this.toggleAttribute('open');\n      this.render();\n    }\n    const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n    if (!opts.length) return;\n    const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n    let next = 0;\n    if (e.key === 'ArrowDown') next = current === -1 ? 0 : Math.min(current + 1, opts.length - 1);\n    else if (e.key === 'ArrowUp') next = current === -1 ? opts.length - 1 : Math.max(current - 1, 0);\n    else if (e.key === 'Home') next = 0;\n    else if (e.key === 'End') next = opts.length - 1;\n    opts[next]?.focus();\n  }\n\n  protected override render(): void {\n    const wasOpen = this.hasAttr('open');\n    // Preserva o estado do campo de pesquisa entre re-renders.\n    const search = this.root.querySelector<HTMLInputElement>('.search')?.value ?? '';\n\n    const opts = this.options;\n    for (const v of [...this.selected]) {\n      if (!opts.some((o) => o.value === v)) this.selected.delete(v);\n    }\n\n    const chips = opts.filter((o) => this.selected.has(o.value));\n    const placeholder = this.getAttr('placeholder', 'Selecione…');\n    const filtered = search\n      ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\n      : opts;\n\n    this.setTemplate(`\n      <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${wasOpen}\" aria-disabled=\"${this.disabled}\">\n        <span class=\"lead\">\n        ${\n          chips.length\n            ? chips.map((c) => `\n              <span class=\"chip\" data-value=\"${esc(c.value)}\">\n                ${esc(c.label)}\n                <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${esc(c.label)}\">×</span>\n              </span>`).join('')\n            : `<span class=\"placeholder\">${esc(placeholder)}</span>`\n        }\n        </span>\n        <span class=\"trigger-right\">\n          ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"icon-btn clear\" part=\"clear\" aria-label=\"Limpar seleção\">×</button>' : ''}\n          <span class=\"caret\">▼</span>\n        </span>\n      </span>\n      <div class=\"panel\" part=\"panel\" role=\"listbox\" aria-multiselectable=\"true\">\n        <div class=\"panel-header\">\n          <span class=\"count\">${chips.length} selecionado${chips.length === 1 ? '' : 's'}</span>\n          ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"clear-all\">Limpar tudo</button>' : ''}\n        </div>\n        ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" placeholder=\"${esc(this.getAttr('search-placeholder', 'Pesquisar…'))}\">` : ''}\n        <ul class=\"list\">\n          ${filtered.map((o) => `\n            <li><button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${esc(o.value)}\"\n              aria-selected=\"${this.selected.has(o.value)}\">\n              <span class=\"box\" aria-hidden=\"true\"></span>${esc(o.label)}\n            </button></li>`).join('')}\n          ${filtered.length === 0 ? `<li class=\"empty\">${esc(this.getAttr('no-results', 'Nenhum resultado'))}</li>` : ''}\n        </ul>\n      </div>\n    `);\n\n    // Reabre o painel se estava aberto antes do re-render.\n    if (wasOpen) this.setAttribute('open', '');\n\n    const searchInput = this.root.querySelector<HTMLInputElement>('.search');\n    if (searchInput) {\n      searchInput.value = search;\n      // Preserva foco e posição do cursor entre os re-renders da digitação.\n      searchInput.addEventListener('input', () => {\n        const pos = searchInput.selectionStart ?? searchInput.value.length;\n        this.render();\n        const si = this.root.querySelector<HTMLInputElement>('.search');\n        if (si) {\n          si.focus();\n          si.setSelectionRange(pos, pos);\n        }\n      });\n      searchInput.addEventListener('click', (e) => e.stopPropagation());\n    }\n\n    const trigger = this.root.querySelector<HTMLElement>('.trigger');\n    if (!trigger) return;\n\n    trigger.addEventListener('click', (e) => {\n      if (this.disabled) return;\n      if ((e.target as HTMLElement).closest('.clear')) return;\n      if ((e.target as HTMLElement).closest('.chip__x')) return;\n      this.toggleAttribute('open');\n      // Flip vertical: se não cabe abaixo, abre para cima.\n      if (this.hasAttr('open')) {\n        const r = this.getBoundingClientRect();\n        this.toggleAttribute('up', r.bottom + 300 > window.innerHeight && r.top > 300);\n      } else {\n        this.removeAttribute('up');\n      }\n      this.render();\n    });\n\n    // Acessibilidade: Enter/Espaço abrem o painel (span role=button); setas navegam.\n    trigger.addEventListener('keydown', (e) => {\n      if (this.disabled) return;\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n        return;\n      }\n      if (e.key === 'Escape') {\n        if (this.hasAttr('open')) {\n          this.removeAttribute('open');\n          this.render();\n          this.root.querySelector<HTMLElement>('.trigger')?.focus();\n        }\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n        this._navigateOptions(e);\n      }\n    });\n\n    // × de limpar tudo no trigger.\n    this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.selected.clear();\n      this.commit();\n    });\n\n    // \"Limpar tudo\" no cabeçalho do painel.\n    this.root.querySelector('.clear-all')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.selected.clear();\n      this.commit();\n    });\n\n    // Remover chip individual.\n    this.root.querySelectorAll<HTMLElement>('.chip').forEach((chip) => {\n      chip.querySelector('.chip__x')?.addEventListener('click', (e) => {\n        e.stopPropagation();\n        this.toggleValue(chip.dataset.value!);\n      });\n    });\n\n    // Alternar opções.\n    this.root.querySelectorAll<HTMLElement>('.opt').forEach((opt) => {\n      opt.addEventListener('click', () => this.toggleValue(opt.dataset.value!));\n    });\n  }\n}\n\nexport function defineFxMultiselect(): typeof FxMultiselect {\n  return defineElement('fx-multiselect', FxMultiselect);\n}\n\n"],"names":[],"mappings":";;;;AAeO,MAAM,iBAAN,MAAM,uBAAsB,UAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAqOL,SAAQ,+BAAe,IAAA;AAAA,EAAY;AAAA,EARnC,WAAoB,qBAA+B;AAGjD,WAAO,CAAC,YAAY,eAAe,SAAS,WAAW,WAAW,OAAO;AAAA,EAC3E;AAAA;AAAA,EAOA,IAAI,SAAmB;AACrB,UAAM,MAAM,KAAK,QAAQ,QAAQ;AACjC,WAAO,MAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,OAAO,IAAI,CAAA;AAAA,EACrE;AAAA,EACA,IAAI,OAAO,MAAgB;AACzB,SAAK,aAAa,UAAU,KAAK,KAAK,GAAG,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAY,UAA8C;AACxD,WAAO,CAAC,GAAG,KAAK,iBAAiB,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO;AAAA,MACtD,OAAO,EAAE,aAAa,OAAO,KAAK,EAAE,aAAa,UAAU;AAAA,MAC3D,OAAO,EAAE,aAAa,UAAU;AAAA,IAAA,EAChC;AAAA,EACJ;AAAA,EAEmB,oBAA0B;AAE3C,SAAK,WAAW,IAAI,IAAI,KAAK,MAAM;AACnC,UAAM,kBAAA;AACN,SAAK,WAAW,IAAI,iBAAiB,MAAM,KAAK,QAAQ;AACxD,SAAK,SAAS,QAAQ,MAAM,EAAE,WAAW,MAAM,SAAS,MAAM,eAAe,KAAA,CAAM;AACnF,SAAK,cAAc,CAAC,MAAa;AAC/B,UAAI,CAAC,KAAK,QAAQ,MAAM,EAAG;AAC3B,UAAI,EAAE,aAAA,EAAe,SAAS,IAAI,EAAG;AACrC,WAAK,gBAAgB,MAAM;AAC3B,WAAK,OAAA;AAAA,IACP;AACA,aAAS,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACrD;AAAA,EAEmB,uBAA6B;AAC9C,UAAM,qBAAA;AACN,SAAK,UAAU,WAAA;AACf,QAAI,KAAK,YAAa,UAAS,oBAAoB,SAAS,KAAK,WAAW;AAAA,EAC9E;AAAA;AAAA,EAGQ,SAAe;AACrB,SAAK,SAAS,CAAC,GAAG,KAAK,QAAQ;AAC/B,SAAK,OAAA;AACL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,QAAQ,CAAC,GAAG,KAAK,QAAQ,EAAA;AAAA,MAAE,CACtC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,YAAY,OAAqB;AACvC,QAAI,KAAK,SAAS,IAAI,KAAK,EAAG,MAAK,SAAS,OAAO,KAAK;AAAA,QACnD,MAAK,SAAS,IAAI,KAAK;AAC5B,SAAK,OAAA;AAAA,EACP;AAAA;AAAA,EAGQ,iBAAiB,GAAwB;AAC/C,MAAE,eAAA;AACF,QAAI,CAAC,KAAK,QAAQ,MAAM,GAAG;AACzB,WAAK,gBAAgB,MAAM;AAC3B,WAAK,OAAA;AAAA,IACP;AACA,UAAM,OAAO,MAAM,KAAK,KAAK,KAAK,iBAAoC,MAAM,CAAC;AAC7E,QAAI,CAAC,KAAK,OAAQ;AAClB,UAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,aAAkC;AACzE,QAAI,OAAO;AACX,QAAI,EAAE,QAAQ,YAAa,QAAO,YAAY,KAAK,IAAI,KAAK,IAAI,UAAU,GAAG,KAAK,SAAS,CAAC;AAAA,aACnF,EAAE,QAAQ,UAAW,QAAO,YAAY,KAAK,KAAK,SAAS,IAAI,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,aACtF,EAAE,QAAQ,OAAQ,QAAO;AAAA,aACzB,EAAE,QAAQ,MAAO,QAAO,KAAK,SAAS;AAC/C,SAAK,IAAI,GAAG,MAAA;AAAA,EACd;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,MAAM;AAEnC,UAAM,SAAS,KAAK,KAAK,cAAgC,SAAS,GAAG,SAAS;AAE9E,UAAM,OAAO,KAAK;AAClB,eAAW,KAAK,CAAC,GAAG,KAAK,QAAQ,GAAG;AAClC,UAAI,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,EAAG,MAAK,SAAS,OAAO,CAAC;AAAA,IAC9D;AAEA,UAAM,QAAQ,KAAK,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,KAAK,CAAC;AAC3D,UAAM,cAAc,KAAK,QAAQ,eAAe,YAAY;AAC5D,UAAM,WAAW,SACb,KAAK,OAAO,CAAC,MAAM,EAAE,MAAM,YAAA,EAAc,SAAS,OAAO,YAAA,CAAa,CAAC,IACvE;AAEJ,SAAK,YAAY;AAAA,qEACgD,KAAK,WAAW,KAAK,CAAC,4CAA4C,OAAO,oBAAoB,KAAK,QAAQ;AAAA;AAAA,UAGrK,MAAM,SACF,MAAM,IAAI,CAAC,MAAM;AAAA,+CACgB,IAAI,EAAE,KAAK,CAAC;AAAA,kBACzC,IAAI,EAAE,KAAK,CAAC;AAAA,0EAC4C,IAAI,EAAE,KAAK,CAAC;AAAA,sBAChE,EAAE,KAAK,EAAE,IACjB,6BAA6B,IAAI,WAAW,CAAC,SACnD;AAAA;AAAA;AAAA,YAGI,KAAK,QAAQ,WAAW,KAAK,MAAM,SAAS,qGAAqG,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAM/H,MAAM,MAAM,eAAe,MAAM,WAAW,IAAI,KAAK,GAAG;AAAA,YAC5E,KAAK,QAAQ,WAAW,KAAK,MAAM,SAAS,iEAAiE,EAAE;AAAA;AAAA,UAEjH,KAAK,QAAQ,YAAY,IAAI,gEAAgE,IAAI,KAAK,QAAQ,sBAAsB,YAAY,CAAC,CAAC,OAAO,EAAE;AAAA;AAAA,YAEzJ,SAAS,IAAI,CAAC,MAAM;AAAA,8EAC8C,IAAI,EAAE,KAAK,CAAC;AAAA,+BAC3D,KAAK,SAAS,IAAI,EAAE,KAAK,CAAC;AAAA,4DACG,IAAI,EAAE,KAAK,CAAC;AAAA,2BAC7C,EAAE,KAAK,EAAE,CAAC;AAAA,YACzB,SAAS,WAAW,IAAI,qBAAqB,IAAI,KAAK,QAAQ,cAAc,kBAAkB,CAAC,CAAC,UAAU,EAAE;AAAA;AAAA;AAAA,KAGnH;AAGD,QAAI,QAAS,MAAK,aAAa,QAAQ,EAAE;AAEzC,UAAM,cAAc,KAAK,KAAK,cAAgC,SAAS;AACvE,QAAI,aAAa;AACf,kBAAY,QAAQ;AAEpB,kBAAY,iBAAiB,SAAS,MAAM;AAC1C,cAAM,MAAM,YAAY,kBAAkB,YAAY,MAAM;AAC5D,aAAK,OAAA;AACL,cAAM,KAAK,KAAK,KAAK,cAAgC,SAAS;AAC9D,YAAI,IAAI;AACN,aAAG,MAAA;AACH,aAAG,kBAAkB,KAAK,GAAG;AAAA,QAC/B;AAAA,MACF,CAAC;AACD,kBAAY,iBAAiB,SAAS,CAAC,MAAM,EAAE,iBAAiB;AAAA,IAClE;AAEA,UAAM,UAAU,KAAK,KAAK,cAA2B,UAAU;AAC/D,QAAI,CAAC,QAAS;AAEd,YAAQ,iBAAiB,SAAS,CAAC,MAAM;AACvC,UAAI,KAAK,SAAU;AACnB,UAAK,EAAE,OAAuB,QAAQ,QAAQ,EAAG;AACjD,UAAK,EAAE,OAAuB,QAAQ,UAAU,EAAG;AACnD,WAAK,gBAAgB,MAAM;AAE3B,UAAI,KAAK,QAAQ,MAAM,GAAG;AACxB,cAAM,IAAI,KAAK,sBAAA;AACf,aAAK,gBAAgB,MAAM,EAAE,SAAS,MAAM,OAAO,eAAe,EAAE,MAAM,GAAG;AAAA,MAC/E,OAAO;AACL,aAAK,gBAAgB,IAAI;AAAA,MAC3B;AACA,WAAK,OAAA;AAAA,IACP,CAAC;AAGD,YAAQ,iBAAiB,WAAW,CAAC,MAAM;AACzC,UAAI,KAAK,SAAU;AACnB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,UAAE,eAAA;AACF,gBAAQ,cAAc,IAAI,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAChE;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,UAAU;AACtB,YAAI,KAAK,QAAQ,MAAM,GAAG;AACxB,eAAK,gBAAgB,MAAM;AAC3B,eAAK,OAAA;AACL,eAAK,KAAK,cAA2B,UAAU,GAAG,MAAA;AAAA,QACpD;AACA;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,OAAO;AACvF,aAAK,iBAAiB,CAAC;AAAA,MACzB;AAAA,IACF,CAAC;AAGD,SAAK,KAAK,cAAc,QAAQ,GAAG,iBAAiB,SAAS,CAAC,MAAM;AAClE,QAAE,gBAAA;AACF,WAAK,SAAS,MAAA;AACd,WAAK,OAAA;AAAA,IACP,CAAC;AAGD,SAAK,KAAK,cAAc,YAAY,GAAG,iBAAiB,SAAS,CAAC,MAAM;AACtE,QAAE,gBAAA;AACF,WAAK,SAAS,MAAA;AACd,WAAK,OAAA;AAAA,IACP,CAAC;AAGD,SAAK,KAAK,iBAA8B,OAAO,EAAE,QAAQ,CAAC,SAAS;AACjE,WAAK,cAAc,UAAU,GAAG,iBAAiB,SAAS,CAAC,MAAM;AAC/D,UAAE,gBAAA;AACF,aAAK,YAAY,KAAK,QAAQ,KAAM;AAAA,MACtC,CAAC;AAAA,IACH,CAAC;AAGD,SAAK,KAAK,iBAA8B,MAAM,EAAE,QAAQ,CAAC,QAAQ;AAC/D,UAAI,iBAAiB,SAAS,MAAM,KAAK,YAAY,IAAI,QAAQ,KAAM,CAAC;AAAA,IAC1E,CAAC;AAAA,EACH;AACF;AA/bE,eAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,gBAAN;AAkcA,SAAS,sBAA4C;AAC1D,SAAO,cAAc,kBAAkB,aAAa;AACtD;"}
+{"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-multiselect> — Seleção múltipla .\n *\n * Dropdown customizado com painel (overlay), checkbox por item, pesquisa\n * opcional e ação de limpar. Opções via <option> nativos no light DOM.\n *\n * Atributos: values (CSV), searchable, clearable, disabled, placeholder,\n * size (sm|md|lg), no-results.\n * Evento: `change` (composed, detail: { values: string[] }).\n */\nexport class FxMultiselect extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      position: relative;\n      /* Largura padrão no HOST: CSS externo, classes e style inline no elemento\n         vencem este default naturalmente (regras do documento > :host). */\n      width: var(--fx-multiselect-width, 240px);\n    }\n    .trigger {\n      display: inline-flex;\n      align-items: center;\n      flex-wrap: nowrap;\n      gap: var(--fx-space-xs);\n      /* Acompanha a largura definida no :host. */\n      width: 100%;\n      box-sizing: border-box;\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      font: inherit;\n      /* Altura determinística: a caixa fica no token --fx-size-*. */\n      line-height: var(--fx-font-line-height);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      cursor: pointer;\n      text-align: left;\n      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    /* Área dos chips: encolhe e quebra linha internamente,\n       mantendo os ícones sempre dentro do componente. */\n    .lead {\n      display: inline-flex;\n      flex-wrap: wrap;\n      gap: var(--fx-space-xs);\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n    }\n    :host([size='sm']) { width: var(--fx-multiselect-width-sm, 200px); }\n    :host([size='sm']) .trigger { min-height: var(--fx-size-sm); }\n    :host([size='lg']) { width: var(--fx-multiselect-width-lg, 280px); }\n    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }\n    /* Full width: o host estica até o pai e o trigger acompanha. */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .trigger { width: 100%; }\n    /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho\n       segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */\n    :host([error]) .trigger,\n    :host([invalid]) .trigger {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n    }\n    :host([error]) .trigger:focus-visible,\n    :host([invalid]) .trigger:focus-visible,\n    :host([error][open]) .trigger,\n    :host([invalid][open]) .trigger {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n    }\n    :host([success]) .trigger,\n    :host([valid]) .trigger {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n    }\n    :host([success]) .trigger:focus-visible,\n    :host([valid]) .trigger:focus-visible,\n    :host([success][open]) .trigger,\n    :host([valid][open]) .trigger {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n    }\n    .trigger:hover { border-color: var(--fx-border-hover); }\n    .trigger:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }\n    .placeholder { color: var(--fx-text-muted); }\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n      color: var(--fx-color-primary);\n      border-radius: var(--fx-radius-sm);\n      padding: 2px 6px;\n      font-size: calc(var(--fx-font-size) - 2px);\n    }\n    .chip__x {\n      border: none;\n      background: none;\n      color: inherit;\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) - 1px);\n      line-height: 1;\n      padding: 0;\n    }\n    .trigger-right {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--fx-text-muted);\n    }\n    .icon-btn {\n      border: none;\n      background: none;\n      color: inherit;\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1;\n      padding: 0 2px;\n      border-radius: var(--fx-radius-full);\n    }\n    .icon-btn:hover { color: var(--fx-color-danger); }\n    .caret {\n      font-size: calc(var(--fx-font-size) - 3px);\n      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([open]) .caret { transform: rotate(180deg); }\n\n    /* Painel (overlay ) */\n    .panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      z-index: var(--fx-z-dropdown, 1000);\n      width: max(100%, 240px);\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      display: none;\n      overflow: hidden;\n    }\n    :host([up]) .panel {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n    :host([open]) .panel { display: block; }\n    .panel-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border-bottom: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-surface-hover);\n    }\n    .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n    .clear-all {\n      border: none;\n      background: none;\n      font: inherit;\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-color-primary);\n      cursor: pointer;\n      padding: 0;\n    }\n    .clear-all:hover { text-decoration: underline; }\n    .search {\n      width: 100%;\n      box-sizing: border-box;\n      font: inherit;\n      color: var(--fx-text-default);\n      background: var(--fx-surface-background);\n      border: none;\n      border-bottom: 1px solid var(--fx-border-default);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      outline: none;\n    }\n    .list {\n      max-height: 240px;\n      overflow-y: auto;\n      list-style: none;\n      margin: 0;\n      padding: var(--fx-space-3xs, 4px);\n    }\n    .opt {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      width: 100%;\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border: none;\n      background: none;\n      font: inherit;\n      color: var(--fx-text-default);\n      cursor: pointer;\n      border-radius: var(--fx-radius-sm);\n      text-align: left;\n    }\n    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\n    .opt[aria-selected='true'] {\n      background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);\n      color: var(--fx-color-primary);\n      font-weight: var(--fx-font-weight);\n    }\n    /* Checkbox visual */\n    .box {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fx-border-default);\n      border-radius: calc(var(--fx-radius-sm) / 2);\n      font-size: 11px;\n      line-height: 1;\n      color: transparent;\n      transition:\n        background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .opt[aria-selected='true'] .box {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n    }\n    .opt[aria-selected='true'] .box::after { content: '✓'; }\n    .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }\n    :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n    // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n    return ['disabled', 'placeholder', 'error', 'invalid', 'success', 'valid'];\n  }\n\n  private observer?: MutationObserver;\n  private docListener?: (e: Event) => void;\n  private selected = new Set<string>();\n\n  /** Valores selecionados (CSV no atributo / array na propriedade). */\n  get values(): string[] {\n    const csv = this.getAttr('values');\n    return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n  }\n  set values(list: string[]) {\n    this.setAttribute('values', list.join(','));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  private get options(): { value: string; label: string }[] {\n    return [...this.querySelectorAll('option')].map((o) => ({\n      value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\n      label: o.textContent?.trim() ?? '',\n    }));\n  }\n\n  protected override connectedCallback(): void {\n    // Popula a seleção ANTES do primeiro render (super chama render).\n    this.selected = new Set(this.values);\n    super.connectedCallback();\n    this.observer = new MutationObserver(() => this.render());\n    this.observer.observe(this, { childList: true, subtree: true, characterData: true });\n    this.docListener = (e: Event) => {\n      if (!this.hasAttr('open')) return;\n      if (e.composedPath().includes(this)) return;\n      this.removeAttribute('open');\n      this.render();\n    };\n    document.addEventListener('click', this.docListener);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.observer?.disconnect();\n    if (this.docListener) document.removeEventListener('click', this.docListener);\n  }\n\n  /** Aplica a seleção, reflete e emite change. */\n  private commit(): void {\n    this.values = [...this.selected];\n    this.render();\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { values: [...this.selected] },\n      }),\n    );\n  }\n\n  private toggleValue(value: string): void {\n    if (this.selected.has(value)) this.selected.delete(value);\n    else this.selected.add(value);\n    this.commit();\n  }\n\n  /** Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */\n  private _navigateOptions(e: KeyboardEvent): void {\n    e.preventDefault();\n    if (!this.hasAttr('open')) {\n      this.toggleAttribute('open');\n      this.render();\n    }\n    const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n    if (!opts.length) return;\n    const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n    let next = 0;\n    if (e.key === 'ArrowDown') next = current === -1 ? 0 : Math.min(current + 1, opts.length - 1);\n    else if (e.key === 'ArrowUp') next = current === -1 ? opts.length - 1 : Math.max(current - 1, 0);\n    else if (e.key === 'Home') next = 0;\n    else if (e.key === 'End') next = opts.length - 1;\n    opts[next]?.focus();\n  }\n\n  protected override render(): void {\n    const wasOpen = this.hasAttr('open');\n    // Preserva o estado do campo de pesquisa entre re-renders.\n    const search = this.root.querySelector<HTMLInputElement>('.search')?.value ?? '';\n\n    const opts = this.options;\n    for (const v of [...this.selected]) {\n      if (!opts.some((o) => o.value === v)) this.selected.delete(v);\n    }\n\n    const chips = opts.filter((o) => this.selected.has(o.value));\n    const placeholder = this.getAttr('placeholder', 'Selecione…');\n    const filtered = search\n      ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\n      : opts;\n\n    this.setTemplate(`\n      <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${wasOpen}\" aria-disabled=\"${this.disabled}\">\n        <span class=\"lead\">\n        ${\n          chips.length\n            ? chips.map((c) => `\n              <span class=\"chip\" data-value=\"${esc(c.value)}\">\n                ${esc(c.label)}\n                <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${esc(c.label)}\">×</span>\n              </span>`).join('')\n            : `<span class=\"placeholder\">${esc(placeholder)}</span>`\n        }\n        </span>\n        <span class=\"trigger-right\">\n          ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"icon-btn clear\" part=\"clear\" aria-label=\"Limpar seleção\">×</button>' : ''}\n          <span class=\"caret\">▼</span>\n        </span>\n      </span>\n      <div class=\"panel\" part=\"panel\" role=\"listbox\" aria-multiselectable=\"true\">\n        <div class=\"panel-header\">\n          <span class=\"count\">${chips.length} selecionado${chips.length === 1 ? '' : 's'}</span>\n          ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"clear-all\">Limpar tudo</button>' : ''}\n        </div>\n        ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" placeholder=\"${esc(this.getAttr('search-placeholder', 'Pesquisar…'))}\">` : ''}\n        <ul class=\"list\">\n          ${filtered.map((o) => `\n            <li><button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${esc(o.value)}\"\n              aria-selected=\"${this.selected.has(o.value)}\">\n              <span class=\"box\" aria-hidden=\"true\"></span>${esc(o.label)}\n            </button></li>`).join('')}\n          ${filtered.length === 0 ? `<li class=\"empty\">${esc(this.getAttr('no-results', 'Nenhum resultado'))}</li>` : ''}\n        </ul>\n      </div>\n    `);\n\n    // Reabre o painel se estava aberto antes do re-render.\n    if (wasOpen) this.setAttribute('open', '');\n\n    const searchInput = this.root.querySelector<HTMLInputElement>('.search');\n    if (searchInput) {\n      searchInput.value = search;\n      // Preserva foco e posição do cursor entre os re-renders da digitação.\n      searchInput.addEventListener('input', () => {\n        const pos = searchInput.selectionStart ?? searchInput.value.length;\n        this.render();\n        const si = this.root.querySelector<HTMLInputElement>('.search');\n        if (si) {\n          si.focus();\n          si.setSelectionRange(pos, pos);\n        }\n      });\n      searchInput.addEventListener('click', (e) => e.stopPropagation());\n    }\n\n    const trigger = this.root.querySelector<HTMLElement>('.trigger');\n    if (!trigger) return;\n\n    trigger.addEventListener('click', (e) => {\n      if (this.disabled) return;\n      if ((e.target as HTMLElement).closest('.clear')) return;\n      if ((e.target as HTMLElement).closest('.chip__x')) return;\n      this.toggleAttribute('open');\n      // Flip vertical: se não cabe abaixo, abre para cima.\n      if (this.hasAttr('open')) {\n        const r = this.getBoundingClientRect();\n        this.toggleAttribute('up', r.bottom + 300 > window.innerHeight && r.top > 300);\n      } else {\n        this.removeAttribute('up');\n      }\n      this.render();\n    });\n\n    // Acessibilidade: Enter/Espaço abrem o painel (span role=button); setas navegam.\n    trigger.addEventListener('keydown', (e) => {\n      if (this.disabled) return;\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n        return;\n      }\n      if (e.key === 'Escape') {\n        if (this.hasAttr('open')) {\n          this.removeAttribute('open');\n          this.render();\n          this.root.querySelector<HTMLElement>('.trigger')?.focus();\n        }\n        return;\n      }\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n        this._navigateOptions(e);\n      }\n    });\n\n    // × de limpar tudo no trigger.\n    this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.selected.clear();\n      this.commit();\n    });\n\n    // \"Limpar tudo\" no cabeçalho do painel.\n    this.root.querySelector('.clear-all')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.selected.clear();\n      this.commit();\n    });\n\n    // Remover chip individual.\n    this.root.querySelectorAll<HTMLElement>('.chip').forEach((chip) => {\n      chip.querySelector('.chip__x')?.addEventListener('click', (e) => {\n        e.stopPropagation();\n        this.toggleValue(chip.dataset.value!);\n      });\n    });\n\n    // Alternar opções.\n    this.root.querySelectorAll<HTMLElement>('.opt').forEach((opt) => {\n      opt.addEventListener('click', () => this.toggleValue(opt.dataset.value!));\n    });\n  }\n}\n\nexport function defineFxMultiselect(): typeof FxMultiselect {\n  return defineElement('fx-multiselect', FxMultiselect);\n}\n\n"],"names":[],"mappings":"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"}

package/dist/components/orderlist/orderlist.js

@@ -600,7 +600,7 @@ _FxOrderList.styles = css`
     .select-all-bar input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }
     .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }
     .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 14px center; transition: var(--orderlist-transition); }
-    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 20%, transparent); }
+    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }
     .filter-input::placeholder { color: var(--orderlist-text-muted); }
     .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }
     .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }
@@ -643,7 +643,7 @@ _FxOrderList.styles = css`
     button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }
     button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }
     button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }
-    button.control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 30%, transparent); }
+    button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }
     button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
     .control-btn-icon { font-size: 18px; line-height: 1; }
     /* Tooltip nos botoes */

package/dist/components/orderlist/orderlist.js.map

@@ -1 +1 @@
-{"version":3,"file":"orderlist.js","sources":["../../../src/components/orderlist/orderlist.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\nexport interface OrderListItem {\n  [key: string]: unknown;\n}\n\n/**\n * <fx-orderlist> - Componente para ordenar uma colecao de itens.\n *\n * Permite reordenar itens arrastando ou usando botoes de controle.\n * Suporta filtro, selecao, checkbox e templates customizados.\n *\n * Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,\n * dragdrop, selection-mode, striped, show-select-all.\n * Evento: `reorder` (composed, detail: { items }).\n * Evento: `selection-change` (composed, detail: { selection }).\n */\nexport class FxOrderList extends FxElement {\n  static override styles = css`\n\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --orderlist-primary: var(--fx-color-primary, #3b82f6);\n      --orderlist-border: var(--fx-border-default, #e2e8f0);\n      --orderlist-bg: var(--fx-surface-background, #ffffff);\n      --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);\n      --orderlist-text: var(--fx-text-default, #1e293b);\n      --orderlist-text-muted: var(--fx-text-muted, #64748b);\n      --orderlist-radius: var(--fx-radius-md, 8px);\n      --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n      --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    * { box-sizing: border-box; }\n    .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }\n    .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }\n    .select-all-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: linear-gradient(135deg, var(--orderlist-bg), var(--orderlist-bg-hover)); border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-size: 0.9em; font-weight: 500; }\n    .select-all-bar label { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); cursor: pointer; user-select: none; color: var(--orderlist-text); }\n    .select-all-bar input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }\n    .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }\n    .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\") no-repeat 14px center; transition: var(--orderlist-transition); }\n    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 20%, transparent); }\n    .filter-input::placeholder { color: var(--orderlist-text-muted); }\n    .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }\n    .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }\n    .list::-webkit-scrollbar { width: 6px; }\n    .list::-webkit-scrollbar-track { background: transparent; }\n    .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }\n    .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }\n    .selection-count { font-size: 0.85em; color: var(--orderlist-primary); background: color-mix(in srgb, var(--orderlist-primary) 12%, transparent); padding: 4px 12px; border-radius: 20px; font-weight: 600; }\n    :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }\n    .list-item { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: var(--orderlist-bg); border-bottom: 1px solid var(--orderlist-border); cursor: pointer; user-select: none; transition: var(--orderlist-transition); }\n    .list-item:last-child { border-bottom: none; }\n    .list-item:hover { background: var(--orderlist-bg-hover); }\n    .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }\n    .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n    .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }\n    .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }\n    .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }\n    .drag-handle:hover { opacity: 1; }\n    .drag-handle:active { cursor: grabbing; }\n    .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }\n    .checkbox:hover { transform: scale(1.1); }\n    .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }\n    .controls-bar {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      padding: var(--fx-space-xs, 6px);\n      background: var(--orderlist-bg);\n      border: 1px solid var(--orderlist-border);\n      border-radius: var(--orderlist-radius);\n      box-shadow: var(--orderlist-shadow);\n      height: fit-content;\n      position: sticky;\n      top: 0;\n      align-self: flex-start;\n    }\n    .control-group { display: flex; flex-direction: column; gap: 3px; }\n    .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }\n    button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }\n    button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }\n    button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n    button.control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 30%, transparent); }\n    button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }\n    .control-btn-icon { font-size: 18px; line-height: 1; }\n    /* Tooltip nos botoes */\n    button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }\n    @media (max-width: 640px) { .main-row { flex-direction: column; } .controls-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; } .control-group { flex-direction: row; } .control-group + .control-group { margin-top: 0; margin-left: 4px; padding-top: 0; padding-left: 4px; border-top: none; border-left: 1px solid var(--orderlist-border); } button.control-btn { width: 44px; height: 40px; } button.control-btn::after { display: none; } .list { max-height: 300px; } }\n    @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\n    .list-item { animation: slideIn 0.2s ease-out; }\n    `;\n\n  static override get observedAttributes(): string[] {\n    return [\n      'data',\n      'data-key',\n      'filter',\n      'filter-by',\n      'filter-placeholder',\n      'breakpoint',\n      'controls-location',\n      'dragdrop',\n      'striped',\n      'selection-mode',\n      'show-select-all',\n    ]\n      }\n\n  set data(value: OrderListItem[]) {\n    this._data = value;\n    this._filteredData = null;\n    this.render();\n  }\n  get data(): OrderListItem[] {\n    return this._data;\n  }\n  private _data: OrderListItem[] = [];\n  private _filteredData: OrderListItem[] | null = null;\n\n  set selection(value: OrderListItem[]) {\n    this._selection = value;\n    this.render();\n  }\n  get selection(): OrderListItem[] {\n    return this._selection;\n  }\n    private _selection: OrderListItem[] = [];\n\n  get dataKey(): string {\n    return this.getAttr('data-key', '');\n  }\n  set dataKey(v: string) {\n    this.setAttribute('data-key', v);\n  }\n\n  get filter(): boolean {\n    return this.hasAttr('filter');\n  }\n    set filter(v: boolean) {\n    this.toggleAttr('filter', v);\n  }\n\n  get filterBy(): string {\n    return this.getAttr('filter-by', 'label');\n  }\n  set filterBy(v: string) {\n    this.setAttribute('filter-by', v);\n  }\n\n  get filterPlaceholder(): string {\n    return this.getAttr('filter-placeholder', 'Buscar...');\n  }\n  set filterPlaceholder(v: string) {\n        this.setAttribute('filter-placeholder', v);\n  }\n\n  get breakpoint(): string {\n    return this.getAttr('breakpoint', '960px');\n  }\n  set breakpoint(v: string) {\n    this.setAttribute('breakpoint', v);\n  }\n\n  get dragdrop(): boolean {\n    return this.hasAttr('dragdrop');\n  }\n  set dragdrop(v: boolean) {\n    this.toggleAttr('dragdrop', v);\n  }\n\n  get striped(): boolean {\n    return this.hasAttr('striped');\n  }\n    set striped(v: boolean) {\n    this.toggleAttr('striped', v);\n  }\n\n  get selectionMode(): string {\n    const s = this.getAttr('selection-mode', '');\n    return s === 'single' || s === 'multiple' ? s : '';\n  }\n  set selectionMode(v: string) {\n    this.setAttribute('selection-mode', v);\n  }\n\n  get showSelectAll(): boolean {\n    return this.hasAttr('show-select-all');\n  }\n    set showSelectAll(v: boolean) {\n    this.toggleAttr('show-select-all', v);\n  }\n\n  get filterValue(): string {\n    return this._filterValue;\n  }\n  set filterValue(v: string) {\n    this._filterValue = v;\n    this._applyFilter();\n    this._updateListDisplay();\n  }\n  private _filterValue = '';\n\n  private _draggedIndex: number | null = null;\n  private _listenersAttached = false;\n  private _optionTemplate: ((item: OrderListItem) => string) | null = null;\n\n  setOptionTemplate(template: (item: OrderListItem) => string): void {\n    this._optionTemplate = template;\n        this.render();\n  }\n\n  protected override connectedCallback(): void {\n    this._parseDataAttribute();\n    super.connectedCallback();\n  }\n\n  protected override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (this.getAttr('data', '') !== '') {\n      this._parseDataAttribute();\n    }\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  private _parseDataAttribute(): void {\n    const dataAttr = this.getAttr('data', '');\n    if (dataAttr) {\n      try {\n        this._data = JSON.parse(dataAttr);\n        this._filteredData = null;\n      } catch {\n        this._data = [];\n      }\n    }\n  }\n\n  private _applyFilter(): void {\n    if (!this._filterValue) {\n      this._filteredData = null;\n      return;\n    }\n    const filterFields = this.filterBy.split(',').map(f => f.trim());\n    this._filteredData = this._data.filter(item => {\n      return filterFields.some(field => {\n        const value = item[field];\n        if (value == null) return false;\n        return String(value).toLowerCase().includes(this._filterValue.toLowerCase());\n      });\n    });\n  }\n\n  private _getDisplayData(): OrderListItem[] {\n    return this._filteredData || this._data;\n  }\n\n  private _getItemKey(item: OrderListItem, index: number): string {\n    if (this.dataKey && item[this.dataKey] != null) {\n      return String(item[this.dataKey]);\n    }\n    if (item['id'] != null) return String(item['id']);\n    if (item['key'] != null) return String(item['key']);\n    if (item['label'] != null) return String(item['label']);\n    if (item['name'] != null) return String(item['name']);\n    if (item['value'] != null) return String(item['value']);\n    return String(index);\n  }\n\n  private _getItemLabel(item: OrderListItem): string {\n    const fields = ['label', 'name', 'title', 'text', 'value'];\n    for (const field of fields) {\n      if (item[field] != null) {\n        return String(item[field]);\n      }\n    }\n        return JSON.stringify(item);\n  }\n\n  private _isSelected(item: OrderListItem): boolean {\n    return this._selection.some(s => this._getItemKey(s, -1) === this._getItemKey(item, -1));\n  }\n\n  private _moveItem(fromIndex: number, toIndex: number): void {\n    const actualFrom = this._getActualIndex(fromIndex);\n    const actualTo = this._getActualIndex(toIndex);\n    if (actualFrom === -1 || actualTo === -1) return;\n    const item = this._data.splice(actualFrom, 1)[0];\n    this._data.splice(actualTo, 0, item);\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _getActualIndex(displayIndex: number): number {\n    if (this._filteredData) {\n      const item = this._filteredData[displayIndex];\n      return this._data.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(item, -1));\n    }\n    return displayIndex;\n  }\n\n  private _emitReorder(): void {\n    this.dispatchEvent(new CustomEvent('reorder', {\n      bubbles: true,\n      composed: true,\n      detail: { items: [...this._data] },\n    }));\n  }\n\n  private _emitSelectionChange(): void {\n    this.dispatchEvent(new CustomEvent('selection-change', {\n      bubbles: true,\n      composed: true,\n            detail: { selection: [...this._selection] },\n    }));\n  }\n\n  private _toggleSelection(item: OrderListItem): void {\n    const key = this._getItemKey(item, -1);\n    const index = this._selection.findIndex(s => this._getItemKey(s, -1) === key);\n    if (index >= 0) {\n      this._selection.splice(index, 1);\n    } else if (this.selectionMode === 'multiple') {\n      this._selection.push(item);\n    } else {\n      this._selection = [item];\n    }\n    this._emitSelectionChange();\n    this._updateListDisplay();\n    this._updateControlsState();\n  }\n\n  private _selectAll(): void {\n    const displayData = this._getDisplayData();\n    this._selection = [...displayData];\n    this._emitSelectionChange();\n    this._updateListDisplay();\n    this._updateControlsState();\n  }\n\n  private _deselectAll(): void {\n    this._selection = [];\n    this._emitSelectionChange();\n    this._updateListDisplay();\n    this._updateControlsState();\n  }\n\n  private _toggleSelectAll(): void {\n    const displayData = this._getDisplayData();\n    if (this._selection.length === displayData.length) {\n      this._deselectAll();\n    } else {\n            this._selectAll();\n    }\n  }\n\n  protected override render(): void {\n    const displayData = this._getDisplayData();\n    const hasSelection = this.selectionMode;\n    const hasMultipleSelection = this.selectionMode === 'multiple';\n    const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n    this.setTemplate(`\n      <div class=\"container\" part=\"container\">\n        ${this.filter ? `\n          <div class=\"filter-wrapper\" part=\"filter-wrapper\">\n            <input type=\"text\" class=\"filter-input\" part=\"filter-input\"\n              placeholder=\"${this.filterPlaceholder}\"\n              value=\"${esc(this._filterValue)}\"\n              aria-label=\"Filtrar lista\" />\n          </div>\n        ` : ''}\n        <div class=\"main-row\" part=\"main-row\">\n          <div class=\"controls-bar\" part=\"controls-bar\">\n            <div class=\"control-group\">\n              <button class=\"control-btn\" data-action=\"top\" part=\"control-btn\" aria-label=\"Mover para o inicio\">\n                <span class=\"control-btn-icon\">\\u00AB</span>\n              </button>\n              <button class=\"control-btn\" data-action=\"up\" part=\"control-btn\" aria-label=\"Mover para cima\">\n                <span class=\"control-btn-icon\">\\u2191</span>\n              </button>\n            </div>\n            <div class=\"control-group\">\n              <button class=\"control-btn\" data-action=\"down\" part=\"control-btn\" aria-label=\"Mover para baixo\">\n                <span class=\"control-btn-icon\">\\u2193</span>\n              </button>\n              <button class=\"control-btn\" data-action=\"bottom\" part=\"control-btn\" aria-label=\"Mover para o fim\">\n                <span class=\"control-btn-icon\">\\u00BB</span>\n              </button>\n            </div>\n          </div>\n          <div class=\"list-wrapper\" part=\"list-wrapper\">\n            ${hasMultipleSelection && this.showSelectAll ? `\n              <div class=\"select-all-bar\" part=\"select-all-bar\">\n                <label>\n                  <input type=\"checkbox\" class=\"select-all-checkbox\"\n                    ${allSelected ? 'checked' : ''}\n                    aria-label=\"Selecionar todos\" />\n                  Selecionar Todos\n                </label>\n                <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n              </div>\n            ` : ''}\n            <ul class=\"list\" part=\"list\" role=\"listbox\"\n              aria-multiselectable=\"${hasMultipleSelection}\"\n              tabindex=\"0\">\n              ${displayData.length === 0 ? `\n                <li class=\"empty-message\" part=\"empty-message\">\n                  ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n                </li>\n              ` : displayData.map((item, index) => {\n                const key = this._getItemKey(item, index);\n                const label = this._getItemLabel(item);\n                const isSelected = this._isSelected(item);\n                const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n                return `\n                  <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n                    data-index=\"${index}\" data-key=\"${esc(key)}\"\n                    role=\"option\" aria-selected=\"${isSelected}\"\n                    ${this.dragdrop ? 'draggable=\"true\"' : ''}\n                    tabindex=\"0\">\n                    ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n                    ${hasSelection ? `\n                      <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n                        ${isSelected ? 'checked' : ''}\n                        aria-label=\"Selecionar ${esc(label)}\" />\n                    ` : ''}\n                    <span class=\"item-content\" part=\"item-content\">${content}</span>\n                  </li>\n                `;\n              }).join('')}\n            </ul>\n          </div>\n        </div>\n      </div>\n    `);\n\n        this._attachListeners();\n        this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n        this._updateControlsState();\n  }\n\n  private _attachListeners(): void {\n    if (this._listenersAttached) return;\n    this._listenersAttached = true;\n    const root = this.root;\n\n    // Filtro - delega input\n    root.addEventListener('input', (e) => {\n      const t = e.target as HTMLElement;\n      if (t.classList.contains('filter-input')) {\n        this.filterValue = (t as HTMLInputElement).value;\n      }\n    });\n\n    // Selecionar todos - delega change\n    root.addEventListener('change', (e) => {\n      const t = e.target as HTMLElement;\n      if (t.classList.contains('select-all-checkbox')) {\n        this._toggleSelectAll();\n      }\n    });\n\n    // Clique - delega click nos botoes (itens anexados direto em cada render)\n    root.addEventListener('click', (e) => {\n      const target = e.target as HTMLElement;\n      const btn = target.closest('.control-btn') as HTMLButtonElement;\n      if (btn) {\n        this._handleMoveAction(btn.dataset.action);\n      }\n    });\n\n    // Drag and drop\n    // Drag and drop - delega no root\n    let dragOverElement: HTMLElement | null = null;\n    root.addEventListener('dragstart', (e) => {\n      const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n      if (!target) return;\n      this._draggedIndex = Number(target.dataset.index);\n      target.classList.add('dragging');\n      (e as DragEvent).dataTransfer!.effectAllowed = 'move';\n    });\n    root.addEventListener('dragend', (e) => {\n      const target = e.target as HTMLElement;\n      target.classList.remove('dragging');\n      this._draggedIndex = null;\n      root.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));\n      dragOverElement = null;\n    });\n    root.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n      if (!target || target.classList.contains('dragging')) return;\n      if (dragOverElement) dragOverElement.classList.remove('drag-over');\n      target.classList.add('drag-over');\n      dragOverElement = target;\n    });\n    root.addEventListener('drop', (e) => {\n      e.preventDefault();\n      if (this._draggedIndex === null) return;\n      const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n      if (!target) return;\n      const toIndex = Number(target.dataset.index);\n      target.classList.remove('drag-over');\n      dragOverElement = null;\n      this._moveItem(this._draggedIndex, toIndex);\n      this._draggedIndex = null;\n    });\n    this._updateControlsState();\n  }\n\n  private _attachItemListeners(list: HTMLElement): void {\n    if (!list) return;\n    list.addEventListener('click', (e) => {\n      const target = e.target as HTMLElement;\n      const itemEl = target.closest('.list-item') as HTMLElement;\n      if (!itemEl) return;\n      if (target.classList.contains('checkbox')) {\n        e.stopPropagation();\n        const idxC = Number(itemEl.dataset.index);\n        this._toggleSelection(this._getDisplayData()[idxC]);\n        return;\n      }\n      const idxI = Number(itemEl.dataset.index);\n      this._toggleSelection(this._getDisplayData()[idxI]);\n    });\n    list.addEventListener('keydown', (e) => {\n      const target = e.target as HTMLElement;\n      if (!target.classList.contains('list-item')) return;\n      const items = Array.from(list.querySelectorAll('.list-item')) as HTMLElement[];\n      const currentIndex = items.indexOf(target);\n      const ke = e as KeyboardEvent;\n      switch (ke.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          if (currentIndex > 0) items[currentIndex - 1].focus();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (currentIndex < items.length - 1) items[currentIndex + 1].focus();\n          break;\n        case ' ':\n        case 'Enter':\n          e.preventDefault();\n          if (this.selectionMode) {\n            const index = Number(target.dataset.index);\n            this._toggleSelection(this._getDisplayData()[index]);\n          }\n          break;\n      }\n    });\n  }\n  private _updateListDisplay(): void {\n    const listWrapper = this.root.querySelector('.list-wrapper');\n    if (!listWrapper) {\n      this.render();\n      return;\n    }\n    const displayData = this._getDisplayData();\n    const hasSelection = this.selectionMode;\n    const hasMultipleSelection = this.selectionMode === 'multiple';\n    const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n    listWrapper.innerHTML = `\n      ${hasMultipleSelection && this.showSelectAll ? `\n        <div class=\"select-all-bar\" part=\"select-all-bar\">\n          <label>\n            <input type=\"checkbox\" class=\"select-all-checkbox\"\n              ${allSelected ? 'checked' : ''}\n              aria-label=\"Selecionar todos\" />\n            Selecionar Todos\n          </label>\n          <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n        </div>\n      ` : ''}\n      <ul class=\"list\" part=\"list\" role=\"listbox\"\n        aria-multiselectable=\"${hasMultipleSelection}\"\n        tabindex=\"0\">\n        ${displayData.length === 0 ? `\n          <li class=\"empty-message\" part=\"empty-message\">\n            ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n          </li>\n        ` : displayData.map((item, index) => {\n          const key = this._getItemKey(item, index);\n          const label = this._getItemLabel(item);\n          const isSelected = this._isSelected(item);\n          const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n          return `\n            <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n              data-index=\"${index}\" data-key=\"${esc(key)}\"\n              role=\"option\" aria-selected=\"${isSelected}\"\n              ${this.dragdrop ? 'draggable=\"true\"' : ''}\n              tabindex=\"0\">\n              ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n              ${hasSelection ? `\n                <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n                  ${isSelected ? 'checked' : ''}\n                  aria-label=\"Selecionar ${esc(label)}\" />\n              ` : ''}\n              <span class=\"item-content\" part=\"item-content\">${content}</span>\n            </li>\n          `;\n        }).join('')}\n            </ul>\n    `;\n    this._attachListeners();\n    this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n  }\n\n\n  private _handleMoveAction(action: string | undefined): void {\n    if (!this._selection.length) return;\n    const displayData = this._getDisplayData();\n    const selectedIndices = this._selection\n      .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n      .filter(i => i >= 0)\n      .sort((a, b) => a - b);\n\n    if (selectedIndices.length === 0) return;\n\n    switch (action) {\n      case 'top':\n        this._moveSelectedToStart(selectedIndices);\n        break;\n      case 'up':\n        this._moveSelectedByOne(selectedIndices, -1);\n        break;\n      case 'down':\n        this._moveSelectedByOne(selectedIndices, 1);\n        break;\n      case 'bottom':\n        this._moveSelectedToEnd(selectedIndices);\n        break;\n    }\n  }\n\n  private _moveSelectedToStart(indices: number[]): void {\n    const items: OrderListItem[] = [];\n    const actualIndices: number[] = [];\n\n    for (const idx of indices) {\n      const actualIdx = this._getActualIndex(idx);\n      items.push(this._data[actualIdx]);\n      actualIndices.push(actualIdx);\n    }\n\n    actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n    const insertIdx = this._getActualIndex(0);\n    this._data.splice(insertIdx, 0, ...items);\n\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _moveSelectedToEnd(indices: number[]): void {\n    const items: OrderListItem[] = [];\n    const actualIndices: number[] = [];\n\n    for (const idx of indices) {\n      const actualIdx = this._getActualIndex(idx);\n      items.push(this._data[actualIdx]);\n      actualIndices.push(actualIdx);\n    }\n\n    actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n    const displayData = this._getDisplayData();\n    const insertIdx = this._getActualIndex(displayData.length - 1);\n    this._data.splice(insertIdx + 1, 0, ...items);\n\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _moveSelectedByOne(indices: number[], delta: number): void {\n    const displayData = this._getDisplayData();\n    if (displayData.length === 0) return;\n\n    // Get actual indices in _data array and sort them\n    const actualIndices = indices\n      .map(idx => this._getActualIndex(idx))\n      .filter(idx => idx >= 0)\n      .sort((a, b) => a - b);\n\n    if (actualIndices.length === 0) return;\n\n    // Check if movement is possible\n    if (delta < 0 && actualIndices[0] <= 0) return;\n    if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;\n\n    // Extract selected items in order\n    const selectedItems = actualIndices.map(idx => this._data[idx]);\n\n    // Remove selected items from data (from highest to lowest to preserve indices)\n    for (let i = actualIndices.length - 1; i >= 0; i--) {\n      this._data.splice(actualIndices[i], 1);\n    }\n\n    // Calculate new insertion point\n    let insertIndex: number;\n    if (delta < 0) {\n      // Moving up: insert before the first selected item position\n      insertIndex = actualIndices[0] - 1;\n    } else {\n      // Moving down: insert after the last selected item position\n      // Since we removed items, we need to adjust\n      insertIndex = actualIndices[actualIndices.length - 1] - actualIndices.length + 1 + 1;\n    }\n\n    // Ensure insertIndex is within bounds\n    insertIndex = Math.max(0, Math.min(insertIndex, this._data.length));\n\n    // Insert items at new position\n    this._data.splice(insertIndex, 0, ...selectedItems);\n\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _updateControlsState(): void {\n    const displayData = this._getDisplayData();\n    const selectedIndices = this._selection\n      .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n      .filter(i => i >= 0);\n\n    const buttons = this.root.querySelectorAll<HTMLButtonElement>('.control-btn');\n    buttons.forEach(btn => {\n      const action = btn.dataset.action;\n      let disabled = selectedIndices.length === 0;\n\n      if (!disabled) {\n        switch (action) {\n          case 'top':\n          case 'up':\n            disabled = selectedIndices[0] === 0;\n            break;\n          case 'bottom':\n          case 'down':\n            disabled = selectedIndices[selectedIndices.length - 1] === displayData.length - 1;\n            break;\n        }\n      }\n\n      btn.disabled = disabled;\n    });\n  }\n}\n\nexport function defineFxOrderList(): typeof FxOrderList {\n  return defineElement('fx-orderlist', FxOrderList);\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"orderlist.js","sources":["../../../src/components/orderlist/orderlist.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\nexport interface OrderListItem {\n  [key: string]: unknown;\n}\n\n/**\n * <fx-orderlist> - Componente para ordenar uma colecao de itens.\n *\n * Permite reordenar itens arrastando ou usando botoes de controle.\n * Suporta filtro, selecao, checkbox e templates customizados.\n *\n * Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,\n * dragdrop, selection-mode, striped, show-select-all.\n * Evento: `reorder` (composed, detail: { items }).\n * Evento: `selection-change` (composed, detail: { selection }).\n */\nexport class FxOrderList extends FxElement {\n  static override styles = css`\n\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --orderlist-primary: var(--fx-color-primary, #3b82f6);\n      --orderlist-border: var(--fx-border-default, #e2e8f0);\n      --orderlist-bg: var(--fx-surface-background, #ffffff);\n      --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);\n      --orderlist-text: var(--fx-text-default, #1e293b);\n      --orderlist-text-muted: var(--fx-text-muted, #64748b);\n      --orderlist-radius: var(--fx-radius-md, 8px);\n      --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n      --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    * { box-sizing: border-box; }\n    .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }\n    .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }\n    .select-all-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: linear-gradient(135deg, var(--orderlist-bg), var(--orderlist-bg-hover)); border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-size: 0.9em; font-weight: 500; }\n    .select-all-bar label { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); cursor: pointer; user-select: none; color: var(--orderlist-text); }\n    .select-all-bar input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }\n    .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }\n    .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\") no-repeat 14px center; transition: var(--orderlist-transition); }\n    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }\n    .filter-input::placeholder { color: var(--orderlist-text-muted); }\n    .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }\n    .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }\n    .list::-webkit-scrollbar { width: 6px; }\n    .list::-webkit-scrollbar-track { background: transparent; }\n    .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }\n    .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }\n    .selection-count { font-size: 0.85em; color: var(--orderlist-primary); background: color-mix(in srgb, var(--orderlist-primary) 12%, transparent); padding: 4px 12px; border-radius: 20px; font-weight: 600; }\n    :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }\n    .list-item { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: var(--orderlist-bg); border-bottom: 1px solid var(--orderlist-border); cursor: pointer; user-select: none; transition: var(--orderlist-transition); }\n    .list-item:last-child { border-bottom: none; }\n    .list-item:hover { background: var(--orderlist-bg-hover); }\n    .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }\n    .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n    .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }\n    .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }\n    .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }\n    .drag-handle:hover { opacity: 1; }\n    .drag-handle:active { cursor: grabbing; }\n    .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }\n    .checkbox:hover { transform: scale(1.1); }\n    .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }\n    .controls-bar {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      padding: var(--fx-space-xs, 6px);\n      background: var(--orderlist-bg);\n      border: 1px solid var(--orderlist-border);\n      border-radius: var(--orderlist-radius);\n      box-shadow: var(--orderlist-shadow);\n      height: fit-content;\n      position: sticky;\n      top: 0;\n      align-self: flex-start;\n    }\n    .control-group { display: flex; flex-direction: column; gap: 3px; }\n    .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }\n    button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }\n    button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }\n    button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n    button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }\n    button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }\n    .control-btn-icon { font-size: 18px; line-height: 1; }\n    /* Tooltip nos botoes */\n    button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }\n    @media (max-width: 640px) { .main-row { flex-direction: column; } .controls-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; } .control-group { flex-direction: row; } .control-group + .control-group { margin-top: 0; margin-left: 4px; padding-top: 0; padding-left: 4px; border-top: none; border-left: 1px solid var(--orderlist-border); } button.control-btn { width: 44px; height: 40px; } button.control-btn::after { display: none; } .list { max-height: 300px; } }\n    @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\n    .list-item { animation: slideIn 0.2s ease-out; }\n    `;\n\n  static override get observedAttributes(): string[] {\n    return [\n      'data',\n      'data-key',\n      'filter',\n      'filter-by',\n      'filter-placeholder',\n      'breakpoint',\n      'controls-location',\n      'dragdrop',\n      'striped',\n      'selection-mode',\n      'show-select-all',\n    ]\n      }\n\n  set data(value: OrderListItem[]) {\n    this._data = value;\n    this._filteredData = null;\n    this.render();\n  }\n  get data(): OrderListItem[] {\n    return this._data;\n  }\n  private _data: OrderListItem[] = [];\n  private _filteredData: OrderListItem[] | null = null;\n\n  set selection(value: OrderListItem[]) {\n    this._selection = value;\n    this.render();\n  }\n  get selection(): OrderListItem[] {\n    return this._selection;\n  }\n    private _selection: OrderListItem[] = [];\n\n  get dataKey(): string {\n    return this.getAttr('data-key', '');\n  }\n  set dataKey(v: string) {\n    this.setAttribute('data-key', v);\n  }\n\n  get filter(): boolean {\n    return this.hasAttr('filter');\n  }\n    set filter(v: boolean) {\n    this.toggleAttr('filter', v);\n  }\n\n  get filterBy(): string {\n    return this.getAttr('filter-by', 'label');\n  }\n  set filterBy(v: string) {\n    this.setAttribute('filter-by', v);\n  }\n\n  get filterPlaceholder(): string {\n    return this.getAttr('filter-placeholder', 'Buscar...');\n  }\n  set filterPlaceholder(v: string) {\n        this.setAttribute('filter-placeholder', v);\n  }\n\n  get breakpoint(): string {\n    return this.getAttr('breakpoint', '960px');\n  }\n  set breakpoint(v: string) {\n    this.setAttribute('breakpoint', v);\n  }\n\n  get dragdrop(): boolean {\n    return this.hasAttr('dragdrop');\n  }\n  set dragdrop(v: boolean) {\n    this.toggleAttr('dragdrop', v);\n  }\n\n  get striped(): boolean {\n    return this.hasAttr('striped');\n  }\n    set striped(v: boolean) {\n    this.toggleAttr('striped', v);\n  }\n\n  get selectionMode(): string {\n    const s = this.getAttr('selection-mode', '');\n    return s === 'single' || s === 'multiple' ? s : '';\n  }\n  set selectionMode(v: string) {\n    this.setAttribute('selection-mode', v);\n  }\n\n  get showSelectAll(): boolean {\n    return this.hasAttr('show-select-all');\n  }\n    set showSelectAll(v: boolean) {\n    this.toggleAttr('show-select-all', v);\n  }\n\n  get filterValue(): string {\n    return this._filterValue;\n  }\n  set filterValue(v: string) {\n    this._filterValue = v;\n    this._applyFilter();\n    this._updateListDisplay();\n  }\n  private _filterValue = '';\n\n  private _draggedIndex: number | null = null;\n  private _listenersAttached = false;\n  private _optionTemplate: ((item: OrderListItem) => string) | null = null;\n\n  setOptionTemplate(template: (item: OrderListItem) => string): void {\n    this._optionTemplate = template;\n        this.render();\n  }\n\n  protected override connectedCallback(): void {\n    this._parseDataAttribute();\n    super.connectedCallback();\n  }\n\n  protected override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n    if (this.getAttr('data', '') !== '') {\n      this._parseDataAttribute();\n    }\n    super.attributeChangedCallback(name, oldValue, newValue);\n  }\n\n  private _parseDataAttribute(): void {\n    const dataAttr = this.getAttr('data', '');\n    if (dataAttr) {\n      try {\n        this._data = JSON.parse(dataAttr);\n        this._filteredData = null;\n      } catch {\n        this._data = [];\n      }\n    }\n  }\n\n  private _applyFilter(): void {\n    if (!this._filterValue) {\n      this._filteredData = null;\n      return;\n    }\n    const filterFields = this.filterBy.split(',').map(f => f.trim());\n    this._filteredData = this._data.filter(item => {\n      return filterFields.some(field => {\n        const value = item[field];\n        if (value == null) return false;\n        return String(value).toLowerCase().includes(this._filterValue.toLowerCase());\n      });\n    });\n  }\n\n  private _getDisplayData(): OrderListItem[] {\n    return this._filteredData || this._data;\n  }\n\n  private _getItemKey(item: OrderListItem, index: number): string {\n    if (this.dataKey && item[this.dataKey] != null) {\n      return String(item[this.dataKey]);\n    }\n    if (item['id'] != null) return String(item['id']);\n    if (item['key'] != null) return String(item['key']);\n    if (item['label'] != null) return String(item['label']);\n    if (item['name'] != null) return String(item['name']);\n    if (item['value'] != null) return String(item['value']);\n    return String(index);\n  }\n\n  private _getItemLabel(item: OrderListItem): string {\n    const fields = ['label', 'name', 'title', 'text', 'value'];\n    for (const field of fields) {\n      if (item[field] != null) {\n        return String(item[field]);\n      }\n    }\n        return JSON.stringify(item);\n  }\n\n  private _isSelected(item: OrderListItem): boolean {\n    return this._selection.some(s => this._getItemKey(s, -1) === this._getItemKey(item, -1));\n  }\n\n  private _moveItem(fromIndex: number, toIndex: number): void {\n    const actualFrom = this._getActualIndex(fromIndex);\n    const actualTo = this._getActualIndex(toIndex);\n    if (actualFrom === -1 || actualTo === -1) return;\n    const item = this._data.splice(actualFrom, 1)[0];\n    this._data.splice(actualTo, 0, item);\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _getActualIndex(displayIndex: number): number {\n    if (this._filteredData) {\n      const item = this._filteredData[displayIndex];\n      return this._data.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(item, -1));\n    }\n    return displayIndex;\n  }\n\n  private _emitReorder(): void {\n    this.dispatchEvent(new CustomEvent('reorder', {\n      bubbles: true,\n      composed: true,\n      detail: { items: [...this._data] },\n    }));\n  }\n\n  private _emitSelectionChange(): void {\n    this.dispatchEvent(new CustomEvent('selection-change', {\n      bubbles: true,\n      composed: true,\n            detail: { selection: [...this._selection] },\n    }));\n  }\n\n  private _toggleSelection(item: OrderListItem): void {\n    const key = this._getItemKey(item, -1);\n    const index = this._selection.findIndex(s => this._getItemKey(s, -1) === key);\n    if (index >= 0) {\n      this._selection.splice(index, 1);\n    } else if (this.selectionMode === 'multiple') {\n      this._selection.push(item);\n    } else {\n      this._selection = [item];\n    }\n    this._emitSelectionChange();\n    this._updateListDisplay();\n    this._updateControlsState();\n  }\n\n  private _selectAll(): void {\n    const displayData = this._getDisplayData();\n    this._selection = [...displayData];\n    this._emitSelectionChange();\n    this._updateListDisplay();\n    this._updateControlsState();\n  }\n\n  private _deselectAll(): void {\n    this._selection = [];\n    this._emitSelectionChange();\n    this._updateListDisplay();\n    this._updateControlsState();\n  }\n\n  private _toggleSelectAll(): void {\n    const displayData = this._getDisplayData();\n    if (this._selection.length === displayData.length) {\n      this._deselectAll();\n    } else {\n            this._selectAll();\n    }\n  }\n\n  protected override render(): void {\n    const displayData = this._getDisplayData();\n    const hasSelection = this.selectionMode;\n    const hasMultipleSelection = this.selectionMode === 'multiple';\n    const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n    this.setTemplate(`\n      <div class=\"container\" part=\"container\">\n        ${this.filter ? `\n          <div class=\"filter-wrapper\" part=\"filter-wrapper\">\n            <input type=\"text\" class=\"filter-input\" part=\"filter-input\"\n              placeholder=\"${this.filterPlaceholder}\"\n              value=\"${esc(this._filterValue)}\"\n              aria-label=\"Filtrar lista\" />\n          </div>\n        ` : ''}\n        <div class=\"main-row\" part=\"main-row\">\n          <div class=\"controls-bar\" part=\"controls-bar\">\n            <div class=\"control-group\">\n              <button class=\"control-btn\" data-action=\"top\" part=\"control-btn\" aria-label=\"Mover para o inicio\">\n                <span class=\"control-btn-icon\">\\u00AB</span>\n              </button>\n              <button class=\"control-btn\" data-action=\"up\" part=\"control-btn\" aria-label=\"Mover para cima\">\n                <span class=\"control-btn-icon\">\\u2191</span>\n              </button>\n            </div>\n            <div class=\"control-group\">\n              <button class=\"control-btn\" data-action=\"down\" part=\"control-btn\" aria-label=\"Mover para baixo\">\n                <span class=\"control-btn-icon\">\\u2193</span>\n              </button>\n              <button class=\"control-btn\" data-action=\"bottom\" part=\"control-btn\" aria-label=\"Mover para o fim\">\n                <span class=\"control-btn-icon\">\\u00BB</span>\n              </button>\n            </div>\n          </div>\n          <div class=\"list-wrapper\" part=\"list-wrapper\">\n            ${hasMultipleSelection && this.showSelectAll ? `\n              <div class=\"select-all-bar\" part=\"select-all-bar\">\n                <label>\n                  <input type=\"checkbox\" class=\"select-all-checkbox\"\n                    ${allSelected ? 'checked' : ''}\n                    aria-label=\"Selecionar todos\" />\n                  Selecionar Todos\n                </label>\n                <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n              </div>\n            ` : ''}\n            <ul class=\"list\" part=\"list\" role=\"listbox\"\n              aria-multiselectable=\"${hasMultipleSelection}\"\n              tabindex=\"0\">\n              ${displayData.length === 0 ? `\n                <li class=\"empty-message\" part=\"empty-message\">\n                  ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n                </li>\n              ` : displayData.map((item, index) => {\n                const key = this._getItemKey(item, index);\n                const label = this._getItemLabel(item);\n                const isSelected = this._isSelected(item);\n                const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n                return `\n                  <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n                    data-index=\"${index}\" data-key=\"${esc(key)}\"\n                    role=\"option\" aria-selected=\"${isSelected}\"\n                    ${this.dragdrop ? 'draggable=\"true\"' : ''}\n                    tabindex=\"0\">\n                    ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n                    ${hasSelection ? `\n                      <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n                        ${isSelected ? 'checked' : ''}\n                        aria-label=\"Selecionar ${esc(label)}\" />\n                    ` : ''}\n                    <span class=\"item-content\" part=\"item-content\">${content}</span>\n                  </li>\n                `;\n              }).join('')}\n            </ul>\n          </div>\n        </div>\n      </div>\n    `);\n\n        this._attachListeners();\n        this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n        this._updateControlsState();\n  }\n\n  private _attachListeners(): void {\n    if (this._listenersAttached) return;\n    this._listenersAttached = true;\n    const root = this.root;\n\n    // Filtro - delega input\n    root.addEventListener('input', (e) => {\n      const t = e.target as HTMLElement;\n      if (t.classList.contains('filter-input')) {\n        this.filterValue = (t as HTMLInputElement).value;\n      }\n    });\n\n    // Selecionar todos - delega change\n    root.addEventListener('change', (e) => {\n      const t = e.target as HTMLElement;\n      if (t.classList.contains('select-all-checkbox')) {\n        this._toggleSelectAll();\n      }\n    });\n\n    // Clique - delega click nos botoes (itens anexados direto em cada render)\n    root.addEventListener('click', (e) => {\n      const target = e.target as HTMLElement;\n      const btn = target.closest('.control-btn') as HTMLButtonElement;\n      if (btn) {\n        this._handleMoveAction(btn.dataset.action);\n      }\n    });\n\n    // Drag and drop\n    // Drag and drop - delega no root\n    let dragOverElement: HTMLElement | null = null;\n    root.addEventListener('dragstart', (e) => {\n      const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n      if (!target) return;\n      this._draggedIndex = Number(target.dataset.index);\n      target.classList.add('dragging');\n      (e as DragEvent).dataTransfer!.effectAllowed = 'move';\n    });\n    root.addEventListener('dragend', (e) => {\n      const target = e.target as HTMLElement;\n      target.classList.remove('dragging');\n      this._draggedIndex = null;\n      root.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));\n      dragOverElement = null;\n    });\n    root.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n      if (!target || target.classList.contains('dragging')) return;\n      if (dragOverElement) dragOverElement.classList.remove('drag-over');\n      target.classList.add('drag-over');\n      dragOverElement = target;\n    });\n    root.addEventListener('drop', (e) => {\n      e.preventDefault();\n      if (this._draggedIndex === null) return;\n      const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n      if (!target) return;\n      const toIndex = Number(target.dataset.index);\n      target.classList.remove('drag-over');\n      dragOverElement = null;\n      this._moveItem(this._draggedIndex, toIndex);\n      this._draggedIndex = null;\n    });\n    this._updateControlsState();\n  }\n\n  private _attachItemListeners(list: HTMLElement): void {\n    if (!list) return;\n    list.addEventListener('click', (e) => {\n      const target = e.target as HTMLElement;\n      const itemEl = target.closest('.list-item') as HTMLElement;\n      if (!itemEl) return;\n      if (target.classList.contains('checkbox')) {\n        e.stopPropagation();\n        const idxC = Number(itemEl.dataset.index);\n        this._toggleSelection(this._getDisplayData()[idxC]);\n        return;\n      }\n      const idxI = Number(itemEl.dataset.index);\n      this._toggleSelection(this._getDisplayData()[idxI]);\n    });\n    list.addEventListener('keydown', (e) => {\n      const target = e.target as HTMLElement;\n      if (!target.classList.contains('list-item')) return;\n      const items = Array.from(list.querySelectorAll('.list-item')) as HTMLElement[];\n      const currentIndex = items.indexOf(target);\n      const ke = e as KeyboardEvent;\n      switch (ke.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          if (currentIndex > 0) items[currentIndex - 1].focus();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (currentIndex < items.length - 1) items[currentIndex + 1].focus();\n          break;\n        case ' ':\n        case 'Enter':\n          e.preventDefault();\n          if (this.selectionMode) {\n            const index = Number(target.dataset.index);\n            this._toggleSelection(this._getDisplayData()[index]);\n          }\n          break;\n      }\n    });\n  }\n  private _updateListDisplay(): void {\n    const listWrapper = this.root.querySelector('.list-wrapper');\n    if (!listWrapper) {\n      this.render();\n      return;\n    }\n    const displayData = this._getDisplayData();\n    const hasSelection = this.selectionMode;\n    const hasMultipleSelection = this.selectionMode === 'multiple';\n    const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n    listWrapper.innerHTML = `\n      ${hasMultipleSelection && this.showSelectAll ? `\n        <div class=\"select-all-bar\" part=\"select-all-bar\">\n          <label>\n            <input type=\"checkbox\" class=\"select-all-checkbox\"\n              ${allSelected ? 'checked' : ''}\n              aria-label=\"Selecionar todos\" />\n            Selecionar Todos\n          </label>\n          <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n        </div>\n      ` : ''}\n      <ul class=\"list\" part=\"list\" role=\"listbox\"\n        aria-multiselectable=\"${hasMultipleSelection}\"\n        tabindex=\"0\">\n        ${displayData.length === 0 ? `\n          <li class=\"empty-message\" part=\"empty-message\">\n            ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n          </li>\n        ` : displayData.map((item, index) => {\n          const key = this._getItemKey(item, index);\n          const label = this._getItemLabel(item);\n          const isSelected = this._isSelected(item);\n          const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n          return `\n            <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n              data-index=\"${index}\" data-key=\"${esc(key)}\"\n              role=\"option\" aria-selected=\"${isSelected}\"\n              ${this.dragdrop ? 'draggable=\"true\"' : ''}\n              tabindex=\"0\">\n              ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n              ${hasSelection ? `\n                <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n                  ${isSelected ? 'checked' : ''}\n                  aria-label=\"Selecionar ${esc(label)}\" />\n              ` : ''}\n              <span class=\"item-content\" part=\"item-content\">${content}</span>\n            </li>\n          `;\n        }).join('')}\n            </ul>\n    `;\n    this._attachListeners();\n    this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n  }\n\n\n  private _handleMoveAction(action: string | undefined): void {\n    if (!this._selection.length) return;\n    const displayData = this._getDisplayData();\n    const selectedIndices = this._selection\n      .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n      .filter(i => i >= 0)\n      .sort((a, b) => a - b);\n\n    if (selectedIndices.length === 0) return;\n\n    switch (action) {\n      case 'top':\n        this._moveSelectedToStart(selectedIndices);\n        break;\n      case 'up':\n        this._moveSelectedByOne(selectedIndices, -1);\n        break;\n      case 'down':\n        this._moveSelectedByOne(selectedIndices, 1);\n        break;\n      case 'bottom':\n        this._moveSelectedToEnd(selectedIndices);\n        break;\n    }\n  }\n\n  private _moveSelectedToStart(indices: number[]): void {\n    const items: OrderListItem[] = [];\n    const actualIndices: number[] = [];\n\n    for (const idx of indices) {\n      const actualIdx = this._getActualIndex(idx);\n      items.push(this._data[actualIdx]);\n      actualIndices.push(actualIdx);\n    }\n\n    actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n    const insertIdx = this._getActualIndex(0);\n    this._data.splice(insertIdx, 0, ...items);\n\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _moveSelectedToEnd(indices: number[]): void {\n    const items: OrderListItem[] = [];\n    const actualIndices: number[] = [];\n\n    for (const idx of indices) {\n      const actualIdx = this._getActualIndex(idx);\n      items.push(this._data[actualIdx]);\n      actualIndices.push(actualIdx);\n    }\n\n    actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n    const displayData = this._getDisplayData();\n    const insertIdx = this._getActualIndex(displayData.length - 1);\n    this._data.splice(insertIdx + 1, 0, ...items);\n\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _moveSelectedByOne(indices: number[], delta: number): void {\n    const displayData = this._getDisplayData();\n    if (displayData.length === 0) return;\n\n    // Get actual indices in _data array and sort them\n    const actualIndices = indices\n      .map(idx => this._getActualIndex(idx))\n      .filter(idx => idx >= 0)\n      .sort((a, b) => a - b);\n\n    if (actualIndices.length === 0) return;\n\n    // Check if movement is possible\n    if (delta < 0 && actualIndices[0] <= 0) return;\n    if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;\n\n    // Extract selected items in order\n    const selectedItems = actualIndices.map(idx => this._data[idx]);\n\n    // Remove selected items from data (from highest to lowest to preserve indices)\n    for (let i = actualIndices.length - 1; i >= 0; i--) {\n      this._data.splice(actualIndices[i], 1);\n    }\n\n    // Calculate new insertion point\n    let insertIndex: number;\n    if (delta < 0) {\n      // Moving up: insert before the first selected item position\n      insertIndex = actualIndices[0] - 1;\n    } else {\n      // Moving down: insert after the last selected item position\n      // Since we removed items, we need to adjust\n      insertIndex = actualIndices[actualIndices.length - 1] - actualIndices.length + 1 + 1;\n    }\n\n    // Ensure insertIndex is within bounds\n    insertIndex = Math.max(0, Math.min(insertIndex, this._data.length));\n\n    // Insert items at new position\n    this._data.splice(insertIndex, 0, ...selectedItems);\n\n    this._applyFilter();\n    this._updateListDisplay();\n    this._updateControlsState();\n    this._emitReorder();\n  }\n\n  private _updateControlsState(): void {\n    const displayData = this._getDisplayData();\n    const selectedIndices = this._selection\n      .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n      .filter(i => i >= 0);\n\n    const buttons = this.root.querySelectorAll<HTMLButtonElement>('.control-btn');\n    buttons.forEach(btn => {\n      const action = btn.dataset.action;\n      let disabled = selectedIndices.length === 0;\n\n      if (!disabled) {\n        switch (action) {\n          case 'top':\n          case 'up':\n            disabled = selectedIndices[0] === 0;\n            break;\n          case 'bottom':\n          case 'down':\n            disabled = selectedIndices[selectedIndices.length - 1] === displayData.length - 1;\n            break;\n        }\n      }\n\n      btn.disabled = disabled;\n    });\n  }\n}\n\nexport function defineFxOrderList(): typeof FxOrderList {\n  return defineElement('fx-orderlist', FxOrderList);\n}"],"names":[],"mappings":"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"}

package/dist/components/picklist/picklist.js

@@ -599,7 +599,7 @@ _FxPickList.styles = css`
     .filter-input:focus {
       outline: none;
       border-color: var(--picklist-primary);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 20%, transparent);
+      box-shadow: var(--fx-effect-focus-ring, none);
     }
     .filter-input::placeholder {
       color: var(--picklist-text-muted);
@@ -696,7 +696,7 @@ _FxPickList.styles = css`
     }
     button.control-btn:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 30%, transparent);
+      box-shadow: var(--fx-effect-focus-ring, none);
     }
     button.control-btn:disabled {
       opacity: 0.3;