@shwfed/config 2.10.11 → 2.11.0

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.switch.local/config.vue

@@ -12,8 +12,15 @@ import {
   InputGroupInput,
   InputGroupNumberField
 } from "../../../../ui/input-group";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../../../ui/dropdown-menu";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
 import { Markdown } from "../../../../ui/markdown";
+import { Switch } from "../../../../ui/switch";
 import DerivedValueEditor from "../../../../form/DerivedValueEditor.vue";
 import { schema } from "./schema";
 defineOptions({ name: "ShwfedTableSwitchRendererConfig" });
@@ -22,6 +29,14 @@ const fieldSchema = schema(() => {
 });
 const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
 const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const ALIGN_OPTIONS = [
+  { value: "left", label: "\u5DE6\u5BF9\u9F50", icon: "fluent:text-align-left-20-regular" },
+  { value: "center", label: "\u5C45\u4E2D", icon: "fluent:text-align-center-20-regular" },
+  { value: "right", label: "\u53F3\u5BF9\u9F50", icon: "fluent:text-align-right-20-regular" }
+];
+const currentAlignIcon = computed(
+  () => (ALIGN_OPTIONS.find((o) => o.value === (value.value.align ?? "center")) ?? ALIGN_OPTIONS[1]).icon
+);
 const ROW_VARS = {
   row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
   index: { type: "number", label: "\u884C\u7D22\u5F15" }
@@ -38,17 +53,6 @@ const bindingText = computed({
     }
   }
 });
-const hiddenModel = computed({
-  get: () => value.value.hidden ?? "",
-  set: (v) => {
-    if (v === "") {
-      const { hidden: _drop, ...rest } = value.value;
-      value.value = rest;
-    } else {
-      value.value = { ...value.value, hidden: v };
-    }
-  }
-});
 const disabledModel = computed({
   get: () => value.value.disabled ?? "",
   set: (v) => {
@@ -71,6 +75,14 @@ const readonlyModel = computed({
     }
   }
 });
+function onHiddenChange(v) {
+  if (v) {
+    value.value = { ...value.value, hidden: true };
+  } else {
+    const { hidden: _drop, ...rest } = value.value;
+    value.value = rest;
+  }
+}
 const derivedModel = computed({
   get: () => value.value.derived,
   set: (v) => {
@@ -165,6 +177,29 @@ const derivedModel = computed({
           {{ fieldTitle("size") }}
         </FieldLabel>
         <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  variant="ghost"
+                  size="xs"
+                  :title="fieldTitle('align')"
+                >
+                  <Icon :icon="currentAlignIcon" />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem
+                  v-for="opt in ALIGN_OPTIONS"
+                  :key="opt.value"
+                  @select="value = { ...value, align: opt.value }"
+                >
+                  <Icon :icon="opt.icon" />
+                  {{ opt.label }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
           <InputGroupNumberField
             :model-value="value.size"
             :disabled="value.grow"
@@ -223,27 +258,6 @@ const derivedModel = computed({
       </Field>
     </div>
     <div class="grid grid-cols-2 gap-x-6 gap-y-4">
-      <Field orientation="vertical">
-        <FieldLabel class="text-xs text-zinc-500">
-          <template
-            v-if="fieldDescription('hidden')"
-            #tooltip
-          >
-            <Markdown
-              :source="fieldDescription('hidden')"
-              block
-              class="prose prose-sm prose-zinc"
-            />
-          </template>
-          {{ fieldTitle("hidden") }}
-        </FieldLabel>
-        <ExpressionEditor
-          v-model="hiddenModel"
-          placeholder="例：row.archived"
-          result-type="bool"
-          :extra-vars="ROW_VARS"
-        />
-      </Field>
       <Field orientation="vertical">
         <FieldLabel class="text-xs text-zinc-500">
           <template
@@ -347,6 +361,27 @@ const derivedModel = computed({
           </InputGroupAddon>
         </InputGroup>
       </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('hidden')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('hidden')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("hidden") }}
+        </FieldLabel>
+        <div>
+          <Switch
+            :model-value="value.hidden ?? false"
+            @update:model-value="onHiddenChange"
+          />
+        </div>
+      </Field>
     </div>
   </div>
 </template>

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.switch.local/runtime.vue

@@ -8,6 +8,7 @@ import { useFormReadonly } from "../../../../form/utils/readonly";
 import { getLocalizedText } from "../../../../../share/locale";
 import { Switch } from "../../../../ui/switch";
 import { useFieldValue } from "../../../../form/utils/field-value";
+import { JUSTIFY_CLASS } from "../../../utils/runtime";
 defineOptions({ name: "ShwfedTableSwitchRendererRuntime" });
 const props = defineProps({
   column: { type: null, required: true },
@@ -25,7 +26,6 @@ function evalBool(expression, label) {
     return false;
   }
 }
-const isHidden = computed(() => evalBool(props.column.hidden, "hidden"));
 const isDisabled = computed(() => evalBool(props.column.disabled, "disabled"));
 const formReadonly = useFormReadonly();
 const isReadonly = computed(
@@ -40,6 +40,7 @@ const trueText = computed(
 const falseText = computed(
   () => getLocalizedText(props.column.falseLabel, locale.value) || "\u5426"
 );
+const justifyClass = computed(() => JUSTIFY_CLASS[props.column.align ?? "center"] ?? JUSTIFY_CLASS.center);
 const { draft, commit } = useFieldValue({
   binding: () => props.column.binding,
   fromState: (raw) => raw === true,
@@ -56,23 +57,19 @@ function onUpdate(next) {
     Row budget matches the editable text/number cells: 2px outer inset around
     an `h-7` (28px) row — 32px total. The switch is centered inside that row;
     `sm` size (h-3.5) keeps it visually compact against the surrounding cells.
-    Every branch (hidden / readonly / editable) is sized identically so rows
+    Every branch (readonly / editable) is sized identically so rows
     do not jump when a CEL condition flips.
   -->
   <div class="p-[0.125rem] w-full">
     <span
-      v-if="isHidden"
-      class="block h-7 w-full"
-    />
-    <span
-      v-else-if="effectiveReadonly"
-      class="flex items-center justify-center h-7 w-full px-2 text-[0.75rem] text-zinc-700 truncate"
+      v-if="effectiveReadonly"
+      :class="['flex items-center h-7 w-full px-2 text-[0.75rem] text-zinc-700 truncate', justifyClass]"
     >
       {{ draft ? trueText : falseText }}
     </span>
     <span
       v-else
-      class="flex items-center justify-center h-7 w-full"
+      :class="['flex items-center h-7 w-full', justifyClass]"
     >
       <Switch
         size="sm"

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.switch.local/schema.d.ts

@@ -9,7 +9,9 @@ export declare const metadata: {
     readonly icon: "fluent:toggle-left-20-regular";
 };
 export declare function schema(configure: (env: Environment) => void): Schema.Struct<{
-    hidden: Schema.optional<Schema.Schema<string, string, never>>;
+    align: Schema.optionalWith<Schema.Literal<["left", "center", "right"]>, {
+        default: () => "center";
+    }>;
     disabled: Schema.optional<Schema.Schema<string, string, never>>;
     readonly: Schema.optional<Schema.Schema<string, string, never>>;
     trueLabel: Schema.optional<Schema.TupleType<readonly [Schema.Struct<{
@@ -49,6 +51,7 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
         locale: Schema.Literal<["ja", "en", "ko"]>;
         message: Schema.SchemaClass<string, string, never>;
     }>]>>;
+    hidden: Schema.optional<Schema.SchemaClass<boolean, boolean, never>>;
     id: Schema.refine<string, typeof Schema.String>;
     groupId: Schema.optional<typeof Schema.UUID>;
     type: Schema.Literal<["com.shwfed.table.column.switch.local"]>;

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.switch.local/schema.js

@@ -1,7 +1,7 @@
 import { Effect, Schema } from "effect";
 import { getProperty } from "dot-prop";
 import { Locale } from "../../../../../share/locale.js";
-import { CelRowAccess, derivedRowField, editableColumnFields, editableHeader } from "../../../utils/shared.js";
+import { Align, CelRowAccess, derivedRowField, editableColumnFields, editableHeader } from "../../../utils/shared.js";
 export const type = "com.shwfed.table.column.switch.local";
 export const compatibilityDate = "2026-05-20";
 export const metadata = {
@@ -14,10 +14,7 @@ export function schema(configure) {
     type: Schema.Literal(type),
     compatibilityDate: Schema.Literal(compatibilityDate),
     ...editableColumnFields(),
-    hidden: Schema.optional(CelBool.annotations({
-      title: "\u9690\u85CF\u6761\u4EF6",
-      description: "\u8FD4\u56DE `true` \u65F6\u8BE5\u884C\u7684\u5F00\u5173\u4E0D\u6E32\u67D3\uFF08\u5176\u4F59\u884C\u4E0D\u53D7\u5F71\u54CD\uFF09"
-    })),
+    align: Schema.optionalWith(Align.annotations({ title: "\u5BF9\u9F50" }), { default: () => "center" }),
     disabled: Schema.optional(CelBool.annotations({
       title: "\u7981\u7528\u6761\u4EF6",
       description: "\u8FD4\u56DE `true` \u65F6\u5F00\u5173\u4ECD\u7136\u6E32\u67D3\u4F46\u4E0D\u53EF\u5207\u6362"

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.text-input/config.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { computed } from "vue";
+import { computed, inject, onBeforeUnmount, ref, watch } from "vue";
 import { Icon } from "@iconify/vue";
 import { ExpressionEditor } from "../../../../ui/expression-editor";
 import { Separator } from "../../../../ui/separator";
+import { Switch } from "../../../../ui/switch";
+import { Button } from "../../../../ui/button";
 import { Field, FieldLabel } from "../../../../ui/field";
 import { Locale } from "../../../../ui/locale";
 import {
@@ -12,9 +14,19 @@ import {
   InputGroupInput,
   InputGroupNumberField
 } from "../../../../ui/input-group";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../../../ui/dropdown-menu";
+import ActionsConfigEditor from "../../../../actions/config.vue";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
 import { Markdown } from "../../../../ui/markdown";
 import DerivedValueEditor from "../../../../form/DerivedValueEditor.vue";
+import { TABLE_COLUMN_LAYOUT_KEY } from "../../../column-layout";
+import { BREADCRUMB_EXTENSION_KEY } from "../../../../config/breadcrumb-extension";
+import { registerRowVariablesIfAbsent } from "../../../utils/shared";
 import { schema } from "./schema";
 defineOptions({ name: "ShwfedTableTextInputRendererConfig" });
 const value = defineModel({ type: Object, ...{ required: true } });
@@ -22,10 +34,59 @@ const fieldSchema = schema(() => {
 });
 const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
 const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const ALIGN_OPTIONS = [
+  { value: "left", label: "\u5DE6\u5BF9\u9F50", icon: "fluent:text-align-left-20-regular" },
+  { value: "center", label: "\u5C45\u4E2D", icon: "fluent:text-align-center-20-regular" },
+  { value: "right", label: "\u53F3\u5BF9\u9F50", icon: "fluent:text-align-right-20-regular" }
+];
+const currentAlignIcon = computed(
+  () => (ALIGN_OPTIONS.find((o) => o.value === (value.value.align ?? "left")) ?? ALIGN_OPTIONS[0]).icon
+);
 const ROW_VARS = {
   row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
   index: { type: "number", label: "\u884C\u7D22\u5F15" }
 };
+const layout = inject(TABLE_COLUMN_LAYOUT_KEY, null);
+const breadcrumbExt = inject(BREADCRUMB_EXTENSION_KEY, null);
+const editingAddon = ref(false);
+function closeAddon() {
+  editingAddon.value = false;
+}
+const addonCrumb = breadcrumbExt?.add();
+watch(editingAddon, (on) => {
+  if (layout) layout.fullPane.value = on;
+  if (addonCrumb) {
+    addonCrumb.label.value = on ? "\u8F93\u5165\u6846\u5185\u6309\u94AE" : null;
+    addonCrumb.back.value = on ? closeAddon : null;
+  }
+});
+onBeforeUnmount(() => {
+  if (layout) layout.fullPane.value = false;
+  addonCrumb?.dispose();
+});
+const addonItemCount = computed(() => value.value.addon?.items.length ?? 0);
+const addonValue = computed({
+  get: () => ({
+    kind: "shwfed.component.action",
+    size: value.value.addon?.size ?? "xs",
+    gap: value.value.addon?.gap ?? 4,
+    style: value.value.addon?.style,
+    groups: value.value.addon?.groups ?? [],
+    items: value.value.addon?.items ?? []
+  }),
+  set: (next) => {
+    const { size, gap, style, groups, items } = next;
+    if (groups.length === 0 && items.length === 0) {
+      const { addon: _omit, ...rest } = value.value;
+      value.value = rest;
+      return;
+    }
+    value.value = {
+      ...value.value,
+      addon: { size, gap, groups, items, ...style === void 0 ? {} : { style } }
+    };
+  }
+});
 const bindingText = computed({
   get: () => value.value.binding ?? "",
   set: (v) => {
@@ -38,17 +99,14 @@ const bindingText = computed({
     }
   }
 });
-const hiddenModel = computed({
-  get: () => value.value.hidden ?? "",
-  set: (v) => {
-    if (v === "") {
-      const { hidden: _drop, ...rest } = value.value;
-      value.value = rest;
-    } else {
-      value.value = { ...value.value, hidden: v };
-    }
+function onHiddenChange(v) {
+  if (v) {
+    value.value = { ...value.value, hidden: true };
+  } else {
+    const { hidden: _drop, ...rest } = value.value;
+    value.value = rest;
   }
-});
+}
 const disabledModel = computed({
   get: () => value.value.disabled ?? "",
   set: (v) => {
@@ -85,7 +143,17 @@ const derivedModel = computed({
 </script>
 
 <template>
-  <div class="space-y-5">
+  <ActionsConfigEditor
+    v-if="editingAddon"
+    v-model="addonValue"
+    :configure="registerRowVariablesIfAbsent"
+    hide-size
+  />
+
+  <div
+    v-else
+    class="space-y-5"
+  >
     <div class="grid grid-cols-2 gap-x-6 gap-y-4">
       <Field orientation="vertical">
         <FieldLabel class="text-xs text-zinc-500">
@@ -184,6 +252,29 @@ const derivedModel = computed({
           {{ fieldTitle("size") }}
         </FieldLabel>
         <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  variant="ghost"
+                  size="xs"
+                  :title="fieldTitle('align')"
+                >
+                  <Icon :icon="currentAlignIcon" />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem
+                  v-for="opt in ALIGN_OPTIONS"
+                  :key="opt.value"
+                  @select="value = { ...value, align: opt.value }"
+                >
+                  <Icon :icon="opt.icon" />
+                  {{ opt.label }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
           <InputGroupNumberField
             :model-value="value.size"
             :disabled="value.grow"
@@ -202,27 +293,6 @@ const derivedModel = computed({
           </InputGroupAddon>
         </InputGroup>
       </Field>
-      <Field orientation="vertical">
-        <FieldLabel class="text-xs text-zinc-500">
-          <template
-            v-if="fieldDescription('hidden')"
-            #tooltip
-          >
-            <Markdown
-              :source="fieldDescription('hidden')"
-              block
-              class="prose prose-sm prose-zinc"
-            />
-          </template>
-          {{ fieldTitle("hidden") }}
-        </FieldLabel>
-        <ExpressionEditor
-          v-model="hiddenModel"
-          placeholder="例：row.archived"
-          result-type="bool"
-          :extra-vars="ROW_VARS"
-        />
-      </Field>
       <Field orientation="vertical">
         <FieldLabel class="text-xs text-zinc-500">
           <template
@@ -326,6 +396,51 @@ const derivedModel = computed({
           </InputGroupAddon>
         </InputGroup>
       </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('hidden')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('hidden')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("hidden") }}
+        </FieldLabel>
+        <div>
+          <Switch
+            :model-value="value.hidden ?? false"
+            @update:model-value="onHiddenChange"
+          />
+        </div>
+      </Field>
     </div>
+    <Separator />
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template
+          v-if="fieldDescription('addon')"
+          #tooltip
+        >
+          <Markdown
+            :source="fieldDescription('addon')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("addon") }}
+      </FieldLabel>
+      <Button
+        type="button"
+        class="w-full justify-center"
+        @click="editingAddon = true"
+      >
+        <Icon icon="fluent:add-20-regular" />
+        <span>{{ addonItemCount > 0 ? "\u914D\u7F6E\u6309\u94AE" : "\u6DFB\u52A0\u6309\u94AE" }}</span>
+      </Button>
+    </Field>
   </div>
 </template>

package/dist/runtime/components/table/columns/2026-05-20/com.shwfed.table.column.text-input/runtime.vue

@@ -13,7 +13,9 @@ import {
   InputGroupButton,
   InputGroupInput
 } from "../../../../ui/input-group";
+import ShwfedActions from "../../../../actions/components/group.vue";
 import { useFormState } from "../../../../form/utils/state";
+import { JUSTIFY_CLASS, TEXT_ALIGN_CLASS } from "../../../utils/runtime";
 defineOptions({ name: "ShwfedTableTextInputRendererRuntime" });
 const props = defineProps({
   column: { type: null, required: true },
@@ -34,7 +36,6 @@ function evalBool(expression, label) {
     return false;
   }
 }
-const isHidden = computed(() => evalBool(props.column.hidden, "hidden"));
 const isDisabled = computed(() => evalBool(props.column.disabled, "disabled"));
 const formReadonly = useFormReadonly();
 const isReadonly = computed(
@@ -64,7 +65,21 @@ function onBlur() {
   isFocused.value = false;
   commit();
 }
+const addonConfig = computed(() => {
+  const addon = props.column.addon;
+  if (!addon || addon.items.length === 0) return null;
+  return {
+    kind: "shwfed.component.action",
+    size: addon.size ?? "xs",
+    gap: addon.gap,
+    style: addon.style,
+    groups: addon.groups.map((group) => ({ ...group, variant: group.variant ?? "ghost" })),
+    items: addon.items
+  };
+});
 const showClear = computed(() => !isDisabled.value && draft.value.length > 0);
+const justifyClass = computed(() => JUSTIFY_CLASS[props.column.align ?? "left"] ?? JUSTIFY_CLASS.left);
+const textAlignClass = computed(() => TEXT_ALIGN_CLASS[props.column.align ?? "left"] ?? TEXT_ALIGN_CLASS.left);
 function handleClear() {
   draft.value = "";
   commit();
@@ -76,7 +91,7 @@ function handleClear() {
     Row budget: 2px outer inset (`p-[0.125rem]`) on each side around a 28px
     (`h-7`) input — total 32px. The inset is the deliberate gap between the
     input border and the td borders; the 28px input gives the 12px text some
-    vertical breathing room. Every branch (hidden / readonly / editable) is
+    vertical breathing room. Every branch (readonly / editable) is
     sized identically so rows do not jump when a CEL condition flips. The
     default `Input` ships `h-9` + `text-base` + `md:text-sm` — we override
     each at the same breakpoint or `md:text-sm` would beat our unprefixed
@@ -89,10 +104,6 @@ function handleClear() {
     oversized.
   -->
   <div class="p-[0.125rem] w-full">
-    <span
-      v-if="isHidden"
-      class="block h-7 w-full"
-    />
     <!--
       Readonly empty state mirrors the `text` column exactly: a centered,
       faded, non-selectable `-` rendered in `font-mono`, so a readonly grid
@@ -101,10 +112,10 @@ function handleClear() {
       text.
     -->
     <span
-      v-else-if="effectiveReadonly"
+      v-if="effectiveReadonly"
       :class="[
   'flex items-center h-7 w-full px-2 text-[0.75rem] truncate',
-  draft ? 'text-zinc-700' : 'justify-center font-mono text-zinc-300 select-none'
+  draft ? ['text-zinc-700', justifyClass] : 'justify-center font-mono text-zinc-300 select-none'
 ]"
     >
       {{ draft || "-" }}
@@ -125,7 +136,7 @@ function handleClear() {
         v-model="draft"
         :placeholder="placeholderText"
         :disabled="isDisabled"
-        class="h-7 text-[0.75rem] md:text-[0.75rem] px-2"
+        :class="['h-7 text-[0.75rem] md:text-[0.75rem] px-2', textAlignClass]"
         @focus="onFocus"
         @blur="onBlur"
         @keydown.enter="commit"
@@ -149,6 +160,21 @@ function handleClear() {
           />
         </InputGroupButton>
       </InputGroupAddon>
+      <!-- `mr-[-0.45rem]` mirrors the clear addon's `has-[>button]:mr-[-0.45rem]`
+           pull-back: that compensation only fires when the addon's direct child
+           is a `<button>`, but `ShwfedActions` roots a `<div>`, so without it the
+           `inline-end` `pr-3` would leave a ~12px dead gap before the border. -->
+      <InputGroupAddon
+        v-if="addonConfig"
+        align="inline-end"
+        class="field-addon-actions mr-[-0.45rem]"
+      >
+        <ShwfedActions :config="addonConfig" />
+      </InputGroupAddon>
     </InputGroup>
   </div>
 </template>
+
+<style scoped>
+.field-addon-actions :deep([data-slot=buttons]){align-items:center;gap:.125rem}.field-addon-actions :deep([data-slot=buttons-dropdown-trigger]),.field-addon-actions :deep([data-slot=buttons-item]){border-radius:.125rem;color:#71717a;height:1rem;min-width:1rem;padding:0}.field-addon-actions :deep([data-slot=buttons-dropdown-trigger] svg),.field-addon-actions :deep([data-slot=buttons-item] svg){height:.75rem;width:.75rem}.field-addon-actions :deep([data-slot=buttons-dropdown-trigger]:hover:not(:disabled)),.field-addon-actions :deep([data-slot=buttons-item]:hover:not(:disabled)){color:#3f3f46}
+</style>