.ts-control{border:1px solid #d0d0d0;border-radius:3px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:8px;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:5px 8px 2px}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}.ts-control>*{display:inline-block;vertical-align:initial}.ts-wrapper.multi .ts-control>div{background:#1da7ee;border:1px solid #0073bb;color:#fff;cursor:pointer;margin:0 3px 3px 0;padding:2px 6px}.ts-wrapper.multi .ts-control>div.active{background:#92c836;border:1px solid #00578d;color:#fff}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#d2d2d2;border:1px solid #aaa;color:#fff}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:#fafafa;opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 3px 3px;border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:#fff;color:#303030;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:rgba(48,48,48,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:5px 8px;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{max-height:200px;overflow:hidden auto;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:2px;top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:color-mix(#fff,#d0d0d0,85%);border-bottom:1px solid #d0d0d0;border-radius:3px 3px 0 0;padding:10px 8px;position:relative}.ts-wrapper .dropdown-header-close{color:#303030;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:8px;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid #d0d0d0;box-shadow:none}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1);display:block;padding:8px;width:100%}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 6px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #0073bb;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#00578d}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#aaa}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #0073bb;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#00578d}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#aaa}:root{--ts-pr-clear-button:0px;--ts-pr-caret:0px;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.ts-wrapper.single .ts-control{--ts-pr-caret:2rem}.ts-wrapper.single .ts-control:after{border-color:grey transparent transparent;border-style:solid;border-width:5px 5px 0;content:" ";display:block;height:0;margin-top:-3px;position:absolute;top:50%;width:0}.ts-wrapper.single .ts-control:not(.rtl):after{right:15px}.ts-wrapper.single .ts-control.rtl:after{left:15px}.ts-wrapper.single.dropdown-active .ts-control:after{border-color:transparent transparent grey;border-width:0 5px 5px;margin-top:-4px}.ts-wrapper.single.input-active .ts-control,.ts-wrapper.single.input-active .ts-control input{cursor:text}.ts-wrapper{display:flex;min-height:36px}.ts-wrapper.multi.has-items .ts-control{padding-left:5px;--ts-pr-min:$padding-x}.ts-wrapper.multi .ts-control [data-value]{background-color:color-mix(#1da7ee,#178ee9,60%);background-image:linear-gradient(180deg,#1da7ee,#178ee9);background-repeat:repeat-x;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px hsla(0,0%,100%,.03);text-shadow:0 1px 0 rgba(0,51,83,.3)}.ts-wrapper.multi .ts-control [data-value].active{background-color:color-mix(#008fd8,#0075cf,60%);background-image:linear-gradient(180deg,#008fd8,#0075cf);background-repeat:repeat-x}.ts-wrapper.multi.disabled .ts-control [data-value]{background:none;box-shadow:none;color:#999;text-shadow:none}.ts-wrapper.multi.disabled .ts-control [data-value],.ts-wrapper.multi.disabled .ts-control [data-value] .remove{border-color:#e6e6e6}.ts-wrapper.multi.disabled .ts-control [data-value] .remove{background:none}.ts-wrapper.single .ts-control{background-color:color-mix(#fefefe,#f2f2f2,60%);background-image:linear-gradient(180deg,#fefefe,#f2f2f2);background-repeat:repeat-x;box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 1px 0 hsla(0,0%,100%,.8)}.ts-dropdown.single,.ts-wrapper.single .ts-control{border-color:#b8b8b8}.dropdown-active .ts-control{border-radius:3px 3px 0 0}.ts-dropdown .optgroup-header{font-size:.85em;font-weight:700;padding-top:7px}.ts-dropdown .optgroup{border-top:1px solid #f0f0f0}.ts-dropdown .optgroup:first-child{border-top:0} /*# sourceMappingURL=tom-select.default.min.css.map */ /* === Tailwind 寄せオーバーライド(iopms 用) — CSS 変数駆動 === 通常の入力(daisyUI input-sm = form_input_class)と同じ外寸 / padding / line-height に揃える。 Tom Select デフォルトの padding:8px / min-height:36px / flex 折返は「飛び出して見える」元凶なので単一 select 用に上書きする。 multi (タグ入力) は引き続き wrap 動作を保つ。 ── 設計原則(再発防止)────────────────────────────── 1. 寸法・フォント・色は下の .ts-wrapper に定義した --ts-* 変数だけが持つ。各ルールは変数参照のみで、生値をルール側に書かない(生値が 1 つでも残ると daisyUI 側の変更に追従できず高さ不一致が再発する)。 2. サイズバリアント(.ts-compact)は変数の差し替え 1 ルールのみ。変数は子孫へ継承されるため、 .input-active 等の状態クラスと特異度で競合しない(旧実装は control/input/item の複製ルール + 4 クラスのセレクタ列挙が必要で、列挙漏れ = focus 瞬間の高さ跳ねの温床だった)。 3. padding は padding-block / padding-inline-start だけを触り、 padding-right には触れない。 vendor の `.ts-control:not(.rtl){padding-right:max(--ts-pr-*)!important}` (caret 用の右端確保)をそのまま生かすため(旧実装は padding 一括指定でこれを潰し、同じ max() 式をバリアントごとに再掲する必要があった)。物理 right と論理 inline-start の混在は rtl 非対応(rtl プラグイン未使用) 前提で許容する。 4. 新しいサイズが要るときは daisyUI の同名バリアントの式を変数へ持ち込む (daisyui.mjs の .input 定義: 高さ = calc(--size-field × N)、 N は xs=6 / sm=8 / md=10。フォントは xs=0.6875rem / sm=0.75rem)。 vendor CSS(1 行目)は tom-select.default.min.css 原本のまま不可侵 (将来の gem/vendor 更新で diff を取れる状態を保つ。未使用プラグイン部の削減は vendor 更新時に --plugins 限定ビルドで行う)。 */ :root { /* daisyUI .input の既定 border 色(--input-color)と同式。 dropdown は body 直下に出て .ts-wrapper の変数継承が届かないため :root に置く。 */ --ts-border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } .ts-wrapper { /* ── サイズトークン(daisyUI input-sm と同じ式で導出)── */ --ts-size: calc(var(--size-field, 0.25rem) * 8); /* = input-sm 高さ 2rem */ --ts-fs: 0.75rem; /* = input-sm フォント */ --ts-py: 0.25rem; /* 縦 padding(高さは min-height が支配し flex 中央揃え) */ --ts-px: 0.75rem; /* 横 padding = daisyUI input の padding-inline */ --ts-line: 1.25rem; /* 内部 input / 選択済 item の行高 */ /* デフォは display:flex; min-height:36px。単一ではこれが通常 input より高くなる原因。 block + min-height:0 で他の input と同じ占有面に。さらに、 Tom Select は元に .ts-compact を付けると、 vendor が class を wrapper にコピーする + combobox(_remote)_controller の carryClasses が wrapper / dropdown に明示付与するため両セレクタで拾う。 */ .ts-compact + .ts-wrapper, .ts-wrapper.ts-compact { --ts-size: calc(var(--size-field, 0.25rem) * 6); /* = input-xs 高さ 1.5rem */ --ts-fs: 0.6875rem; /* = input-xs フォント */ /* IBM Plex Sans JP の和文字面(fontBoundingBoxAscent+Descent)は 0.6875rem 時で約 16px と、このフォントサイズに対する等比の line-height(旧 1rem = 15px)より大きく、 .item(選択済み表示)の overflow:hidden と組み合わさって上下 1px 弱の縦クリップを起こす(test/system/visual_integrity_test.rb の描画ゲートで検出)。字面高を包含する line-height に引き上げて解消する。その分縦 padding は 0 にして content 高(line 1.15rem + border 2px)が min-height(--ts-size = 1.5rem)を超えないようにする(超えると native input-xs より 0.5px 高くなる。縦センタリングは align-items:center + min-height が担うので padding は不要)。 */ --ts-py: 0; --ts-line: 1.15rem; } .ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-wrapper .ts-control { background: #fff !important; background-image: none !important; border: 1px solid var(--ts-border-color) !important; border-radius: var(--radius-field); /* daisyUI input(rounded)と揃える */ box-shadow: none !important; /* padding-right は指定しない(vendor の caret 用 max() 式を生かす。冒頭の設計原則 3 参照)。 */ padding-block: var(--ts-py) !important; padding-inline-start: var(--ts-px) !important; /* form_input_class の h-8 / cell_input_class の h-6 と揃える ─ 検索フォームで text/date/number/select/combobox が同じ高さで並ぶ前提。 */ min-height: var(--ts-size); box-sizing: border-box; font-size: var(--ts-fs); font-family: inherit; color: inherit; line-height: 1.25rem; align-items: center; } /* 単一 select は 1 行で完結させる。 vendor .ts-control は既定 flex-wrap:wrap で、未フォーカス時は input が .input-hidden(絶対配置・枠外)なので折り返さないが、 focus で input が in-flow に戻った瞬間、 .item(選択済み表示)+ input が横幅を超えて 2 行に折り返し、コントロール高さが一瞬跳ねる(min-height を突き破る)現象があった。単一 select に折り返しは不要なので明示的に禁止する。 */ .ts-wrapper.single .ts-control { flex-wrap: nowrap; } /* 内部 : 1 行内で完結させ、通常 input と同じ高さ。デフォルトで height/padding/margin が勝手に効くので 0 に潰して行高・フォントは変数で揃える。 */ .ts-wrapper.single .ts-control > input, .ts-wrapper .ts-control > input { font-size: var(--ts-fs) !important; line-height: var(--ts-line) !important; height: var(--ts-line) !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; } /* クリック(focus)でコントロール幅がガクッと広がる現象の根治。 vendor は .ts-control > input に min-width:7rem を付けている。単一 select は未フォーカス時 input が .input-hidden で position:absolute(枠外)になり、クリックで in-flow に戻る瞬間にこの 7rem がコントロールの想定幅に算入され、特に auto レイアウトのテーブルセル(仕様カードのマトリクス)で列幅が跳ねる。 input は flex:1 1 auto なので幅が要る時は自動で伸びる ─ min-width は 0 で良い。 multi(タグ入力)は typing 領域確保のため vendor の min-width を維持する。 */ .ts-wrapper.single .ts-control > input { min-width: 0 !important; /* 選択直後(focus 継続中)は .item と空の input が同じ nowrap 行に共存する。 vendor の flex:1 1 auto だと input の flex-basis = 固有幅(size 既定 ≈ 20ch)が幅の取り分に算入され、コントロールに十分な幅があっても .item が squeeze されて「7038-A01 ─ 株式会社BAN…」のように省略される(blur で input が絶対配置に戻ると解ける = 選択直後だけ切れて見える)。 basis を 0 にして「.item が内容幅を先に取り、 input は残り全部」へ配分を変える。 */ flex-basis: 0% !important; } /* 単一 select の選択済アイテム表示 (.item)。狭いコントロール(明細の定幅 div 内など)で長い値がはみ出すときは省略記号でクリップする(折り返さない)。 */ .ts-wrapper.single .ts-control .item { font-size: var(--ts-fs); line-height: var(--ts-line); padding: 0 !important; margin: 0 !important; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* caret (▼) 用の右パディング = ▼の右の位置(下の 0.5rem)+ ▼の幅(border 5px × 2 = 10px)+ 隙間 0.25rem。値の右端が▼に重ならない。 clear_button(×)は全廃済み(フォーカスで全選択 → Backspace の UX に置換) のため --ts-pr-clear-button は :root 既定の 0px のまま = caret 分だけの確保で良い。 combobox_controller.js の欄の最小幅も、この computed padding を足して測る。 */ .ts-wrapper.single .ts-control { --ts-pr-caret: calc(0.75rem + 10px); } /* caret (▼) は常に右端(0.5rem)へ固定表示する(vendor 既定は right:15px)。 */ .ts-wrapper.single .ts-control:not(.rtl):after { right: 0.5rem; } /* portal した dropdown(body 直下 / dialog 直下)は、開く瞬間に一旦 display:block(不可視)になってから inline の top/left が計測・設定される(vendor open() の実装順序)。その一瞬、 vendor 既定の top:100%(= containing block の下端起点)が viewport 外へはみ出して縦スクロールバーを出現させ、 mx-auto コンテナが半スクロールバー幅ぶん左へ寄った状態で位置計測される → dropdown だけ約 7.5px 左にずれる (初回 open 時のみ・ページが短い画面のみ)。事前位置を viewport 内(top:0)に固定して flicker を根絶する(実位置は直後の inline style が上書きする)。 */ body > .ts-dropdown, dialog > .ts-dropdown { top: 0; } /* Tom Select は remote ロード中(preload / タイプ検索)に wrapper へ `loading` クラスを付けるが、これが daisyUI のスピナー部品 `.loading`(width:1.5rem + aspect-ratio:1/1 + mask-image のスピナー SVG)と名前衝突し、入力欄全体が 1.5rem 角のスピナーに化けて潰れる(初回クリックで欄が縮み候補が左へずれて見える)。 daisyUI 側の指定を全て打ち消す。ロード中の視覚フィードバックはドロップダウン内の .spinner(vendor)が担う。 */ .ts-wrapper.loading { display: block; width: auto; aspect-ratio: auto; mask-image: none; -webkit-mask-image: none; background-color: transparent; pointer-events: auto; } /* フォーカス時: 他の入力(daisyUI)と同じ 2px primary リングに揃える(トークン参照)。 */ .ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { border-color: var(--color-primary) !important; box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 30%, transparent) !important; /* ドロップダウン展開時は上だけ丸め、下の .ts-dropdown と繋げる */ border-radius: var(--radius-field) var(--radius-field) 0 0; } /* dropdown パネル。 body 直下に出るため .ts-wrapper の --ts-* 変数継承が届かない(フォントは既定値 + .ts-compact 再定義で個別に持つ)。 compact の伝搬は combobox(_remote)_controller の carryClasses が担う。 */ .ts-dropdown { background: #fff; border: 1px solid var(--ts-border-color); /* 展開パネルは下だけ丸め、上の .ts-control(展開時上だけ丸)と繋げる */ border-radius: 0 0 var(--radius-field) var(--radius-field); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); font-size: 0.75rem; /* = input-sm。 wrapper の変数が届かないため個別定義 */ margin-top: 0; /* body レベルでアプリのクローム(モバイル navbar z-30 / サイドナビ drawer z-40)より確実に前面へ来るよう z-index を持ち上げる。 dropdown は開いている間だけ表示される (閉じると Tom Select が display:none にする)ので、常時他要素を覆う心配はない。 */ z-index: 50; /* 候補は 1 行固定(下記 .option の nowrap)。 dropdownParent:'body' は dropdown 幅をコントロール幅へ inline 設定するが、それだと狭いコントロール(明細の定幅 div 内 combobox) で候補が切れて読めない。 min-width:max-content で **候補の最長幅まで横に伸ばす** (inline width はこれに負ける)。 max-width:90vw は既定で、実際の幅は combobox_dropdown_portal.js が窓の幅 - 16px に絞って窓の内側へ寄せる。窓より広い候補だけ上の text-overflow:ellipsis でクリップする。コントロールが候補より広いフォーム用 combobox では max-content < コントロール幅 = inline width が勝ち、従来通り。 */ min-width: max-content; max-width: 90vw; } /* 窓の中で上へ開いたとき(combobox_dropdown_portal.js)は、角と影の向きを逆にして欄の上に繋げる */ .ts-dropdown.ts-dropdown-up { border-radius: var(--radius-field) var(--radius-field) 0 0; box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -2px rgba(0, 0, 0, 0.1); margin: 0; } .ts-wrapper.dropdown-active.ts-dropdown-up .ts-control { border-radius: 0 0 var(--radius-field) var(--radius-field); } .ts-dropdown.ts-compact { font-size: 0.6875rem; /* = input-xs */ } /* ハイライト中の option */ .ts-dropdown .active { background-color: #dbeafe !important; /* blue-100 */ color: #0f172a; /* slate-900 */ } /* dropdown 内 option / header */ .ts-dropdown .option, .ts-dropdown .optgroup-header, .ts-dropdown .no-results, .ts-dropdown .create { padding: 0.375rem 0.5rem; /* 候補は必ず 1 行に統一。長文が 2 行に折り返すと行高がバラついて(1 行/2 行の混在) 非常に選びにくくなるため、 nowrap + はみ出しは省略記号でクリップする。 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 候補に添える注記(combobox_controller の render.option)= 選択不可の理由(disabledNote)・メールで当たった時の検索語(data-search)。候補名より一段小さく淡く出し、名前そのものと読み違えないようにする (淡色化とクリック不可は data-selectable の有無で vendor CSS 側が担保する)。 */ .ts-dropdown .option :is(.ts-option-note, .ts-option-search) { margin-left: 0.375rem; font-size: 0.85em; opacity: 0.75; } /* required 属性が付いた select の表現を保つ(単に妨げないように) */ .ts-wrapper.required .ts-control { border-color: var(--ts-border-color) !important; } /* エラー状態。素のに付け、 combobox_controller の carryClasses が ts-wrapper へ伝搬したもの上の `.ts-wrapper.single .ts-control`(!important)と同specificityのため、 **この位置** (= より後ろ)に置くことで勝たせる。 application.css 側ではなく本ファイルに置くのも同じ理由 (tom_select.css は application.css より後に読み込まれる)。 */ [data-field-error] .ts-wrapper .ts-control, .ts-wrapper:is(.input-error, .select-error) .ts-control { border-color: var(--color-error) !important; } /* ── dropdown の Z 軸(重なり)修正 ────────────────────────────── 現在は combobox_controller の dropdownParent 指定で dropdown を ts-wrapper の外( or