@orbit-work/ui 0.1.0

package/src/components/primitives/Select/SelectSource.test.mjs

@@ -0,0 +1,94 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+const fselectSource = await readFile(new URL("../../composite/FSelect/index.tsx", import.meta.url), "utf8")
+const modelSelectSource = await readFile(new URL("../../composite/ModelSelect/index.tsx", import.meta.url), "utf8")
+const projectSelectSource = await readFile(new URL("../../composite/ProjectSelect/index.tsx", import.meta.url), "utf8")
+
+test("select trigger is the Field-style three-state shell (rest/hover/open borders, control radius)", () => {
+  assert.ok(source.includes("border-[color:var(--ow-input-border)]"))
+  assert.ok(source.includes("hover:border-[color:var(--ow-input-border-hover)]"))
+  assert.ok(source.includes("border-[color:var(--ow-input-border-focus)]"))
+  // R2：焦点语法全库归一到 .ow-focus-ring（outline 三件套），不再走 --ow-focus-shadow。
+  assert.ok(source.includes('"ow-focus-ring"'))
+  assert.ok(source.includes("[border-radius:var(--ow-radius-control)]"))
+  // 28 / 32 / 40 control heights
+  assert.match(source, /sm: "h-7 /)
+  assert.match(source, /md: "h-8 /)
+  assert.match(source, /lg: "h-10 /)
+  // per-token disabled state, not blanket opacity
+  assert.ok(source.includes("disabled:bg-[var(--ow-input-disabled-bg)]"))
+  assert.ok(!source.includes("disabled:opacity"))
+})
+
+// W5 终扫：三档字号原写死 text-xs/text-sm，与同族 Field 的 text-ow-fs-ui 差一档；
+// 基类过渡缺 §9 唯一缓动 ease-beacon，且 transition-all 范围过宽。
+test("select trigger type scale is the 13px UI tier and motion is fully tokenised", () => {
+  assert.match(source, /sm: "h-7 [^"]*text-ow-fs-ui"/)
+  assert.match(source, /md: "h-8 [^"]*text-ow-fs-ui"/)
+  assert.match(source, /lg: "h-10 [^"]*text-ow-fs-ui"/)
+  // 注释里点名旧写法作文档，禁令只查代码
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+  assert.doesNotMatch(code, /\btext-xs\b|\btext-sm\b/)
+  assert.ok(source.includes("duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]"))
+  assert.ok(!source.includes("transition-all"))
+})
+
+test("select menu follows the popover spec (menu radius, pop shadow, 1px border, dropdown z)", () => {
+  assert.ok(source.includes("[border-radius:var(--ow-radius-menu)]"))
+  assert.ok(source.includes("shadow-[var(--ow-shadow-pop)]"))
+  assert.ok(source.includes("border border-ow-border"))
+  assert.ok(source.includes("z-[var(--ow-z-dropdown)]"))
+})
+
+test("select rows use pop-tier interaction colors and a checkmark, not a filled selected background", () => {
+  assert.ok(source.includes("hover:bg-[var(--ow-hover-pop)]"))
+  assert.ok(source.includes("active:bg-[var(--ow-press-pop)]"))
+  assert.ok(!source.includes("--ow-selected-bg"))
+  assert.ok(source.includes("aria-selected={option.value === value}"))
+  // R2：选中勾与触发器箭头都改用 composite/Icons 的 Check / ChevDown，
+  // 不再在文件内自绘 24 网格 svg（图标两个来源，描边/网格无法统一维护）。
+  assert.ok(source.includes('import { Check, ChevDown } from "../../composite/Icons"'))
+  assert.ok(source.includes("<Check className="))
+  assert.ok(!source.includes("m5 12 4.5 4.5L19 7"))
+})
+
+test("select keeps focus on the trigger and supports keyboard navigation", () => {
+  assert.ok(source.includes("aria-activedescendant"))
+  assert.ok(source.includes('role="listbox"'))
+  assert.ok(source.includes('case "ArrowDown":'))
+  assert.ok(source.includes('case "ArrowUp":'))
+  assert.ok(source.includes('case "Home":'))
+  assert.ok(source.includes('case "End":'))
+  assert.ok(source.includes('event.key === "Escape"'))
+  assert.ok(source.includes('scrollIntoView({ block: "nearest" })'))
+})
+
+test("select trigger shell is exported for preset recipes", () => {
+  assert.ok(source.includes("export const SelectTrigger"))
+  assert.ok(source.includes('aria-haspopup="listbox"'))
+})
+
+test("fselect is a deprecated thin compat export over the Select base", () => {
+  assert.ok(fselectSource.includes("@deprecated"))
+  assert.ok(fselectSource.includes('from "../../primitives/Select"'))
+  assert.ok(fselectSource.includes('size="lg"'))
+  assert.ok(!fselectSource.includes("import { usePopover }"))
+})
+
+test("model select is a preset recipe on the shared trigger shell", () => {
+  assert.ok(modelSelectSource.includes("SelectTrigger"))
+  assert.ok(modelSelectSource.includes('from "../../primitives/Select"'))
+  assert.ok(!modelSelectSource.includes("className={`sel"))
+  assert.ok(modelSelectSource.includes("ModelPickerList"))
+})
+
+test("project select stays a preset recipe on the Select base", () => {
+  assert.ok(
+    projectSelectSource.includes('from "../../primitives"') ||
+      projectSelectSource.includes('from "../../primitives/Select"'),
+  )
+  assert.ok(projectSelectSource.includes("footer={footer}"))
+})

package/src/components/primitives/Select/index.tsx

@@ -0,0 +1,364 @@
+"use client"
+
+import { type VariantProps, cva } from "class-variance-authority"
+import {
+  type ButtonHTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+  forwardRef,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react"
+import { cn } from "../../../lib/utils"
+import { Check, ChevDown } from "../../composite/Icons"
+
+export type SelectOption = {
+  value: string
+  label: string
+  /** Secondary description shown below the label */
+  sub?: string
+}
+
+const selectTriggerVariants = cva(
+  [
+    "w-full cursor-pointer flex items-center text-left font-normal relative",
+    "border bg-[var(--ow-input-bg)] text-[color:var(--ow-input-text)]",
+    "transition-[background-color,border-color,color,box-shadow] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+    // R2：焦点语法归一到 .ow-focus-ring（outline 三件套），不再走 --ow-focus-shadow。
+    "ow-focus-ring",
+    "disabled:cursor-not-allowed disabled:bg-[var(--ow-input-disabled-bg)] disabled:border-[color:var(--ow-disabled-border)] disabled:text-[color:var(--ow-input-disabled-text)]",
+    "[border-radius:var(--ow-radius-control)]",
+  ].join(" "),
+  {
+    variants: {
+      open: {
+        true: "border-[color:var(--ow-input-border-focus)]",
+        false: "border-[color:var(--ow-input-border)] hover:border-[color:var(--ow-input-border-hover)]",
+      },
+      size: {
+        sm: "h-7 pr-8 pl-3 text-ow-fs-ui",
+        md: "h-8 pr-9 pl-3.5 text-ow-fs-ui",
+        lg: "h-10 pr-10 pl-4 text-ow-fs-ui",
+      },
+    },
+    defaultVariants: {
+      open: false,
+      size: "md",
+    },
+  },
+)
+
+const selectMenuVariants = cva(
+  [
+    "absolute left-0 right-0 z-[var(--ow-z-dropdown)] p-1.5 max-h-[264px] overflow-y-auto",
+    "bg-[var(--ow-popover-bg)] border border-ow-border",
+    "shadow-[var(--ow-shadow-pop)]",
+    "[border-radius:var(--ow-radius-menu)]",
+  ].join(" "),
+  {
+    variants: {
+      position: {
+        down: "top-[calc(100%+4px)]",
+        up: "bottom-[calc(100%+4px)]",
+      },
+    },
+    defaultVariants: {
+      position: "down",
+    },
+  },
+)
+
+const selectOptionVariants = cva(
+  [
+    "w-full flex items-center gap-2 min-h-8 px-2 py-1.5 border-none bg-transparent cursor-pointer text-left text-ow-fs-ui font-normal leading-snug",
+    "text-[color:var(--ow-text)]",
+    "[border-radius:var(--ow-radius-control)]",
+    // §9 唯一缓动：有 duration 就必须带 ease-beacon，否则落浏览器默认曲线。
+    "transition-colors duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+    "hover:bg-[var(--ow-hover-pop)] active:bg-[var(--ow-press-pop)]",
+  ].join(" "),
+  {
+    variants: {
+      /** Keyboard-active row highlight — same pop-tier hover color. */
+      active: {
+        true: "bg-[var(--ow-hover-pop)]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      active: false,
+    },
+  },
+)
+
+export type SelectTriggerProps = {
+  /** Whether the attached menu is open (focus-tier border + rotated chevron). */
+  open?: boolean
+  /** Size variant: 28 / 32 / 40 control heights */
+  size?: VariantProps<typeof selectTriggerVariants>["size"]
+  /** Trigger label content */
+  children?: ReactNode
+  className?: string
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children">
+
+/**
+ * Select trigger shell — the Field-style three-state control
+ * (rest border → hover border-strong → focus/open focus-ring), 32px tall
+ * at md, 8px radius, trailing chevron that rotates while open.
+ *
+ * Exported for preset recipes (ModelSelect and friends) that pair the
+ * standard trigger with their own popover/listbox implementation.
+ */
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(function SelectTrigger(
+  { open = false, size = "md", children, className, ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-ow-part="control"
+      data-ow-role={open ? "open" : "closed"}
+      className={cn(selectTriggerVariants({ open, size }), className)}
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      {...rest}
+    >
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+      {/* R2：原为文件内自绘 24 网格 svg（1.5 描边），与全库图标目录两个来源；归 composite/Icons。 */}
+      <ChevDown
+        className={cn(
+          "absolute right-3 top-1/2 w-4 h-4 text-[color:var(--ow-text-3)] -translate-y-1/2 pointer-events-none",
+          "transition-transform duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
+          open && "rotate-180",
+        )}
+        aria-hidden="true"
+      />
+    </button>
+  )
+})
+
+export type SelectProps = {
+  /** Currently selected value */
+  value: string
+  /** Available options */
+  options: SelectOption[]
+  /** Called when an option is selected */
+  onChange: (value: string) => void
+  /** Placeholder text when no value is selected */
+  placeholder?: string
+  /** Disable the select */
+  disabled?: boolean
+  /** Size variant */
+  size?: VariantProps<typeof selectTriggerVariants>["size"]
+  /** Optional footer content rendered at the bottom of the dropdown */
+  footer?: ReactNode
+  /** Additional class name */
+  className?: string
+}
+
+/**
+ * The single selector base of Orbitwork DS 2.0.
+ *
+ * - Trigger: Field-style three-state shell (32px @ md, 8px radius)
+ * - Menu: popover spec — 10px radius, --ow-shadow-pop, 1px border,
+ *   pop-tier row hover, checkmark (not a filled background) for the
+ *   selected row, z = var(--ow-z-dropdown), auto-flip near the viewport edge
+ *
+ * W5 终扫：触发器三档原写死 text-xs/text-sm（12/14px），改统一 UI 密度档
+ * --ow-fs-ui(13px)，与同族输入件 Field 并排不再差一档；基类 transition 原缺
+ * ease-beacon（§9 唯一缓动），补齐。R2 补完剩下两处：选项行 transition-colors
+ * 与触发器箭头 transition-transform 也各自补上 ease-beacon（W5 只改了触发器基类，
+ * 注释却写成已全补），并把两枚自绘 svg 换成 composite/Icons 的 ChevDown / Check。
+ *
+ * - Keyboard: ArrowUp/Down/Home/End navigate, Enter picks, Esc closes,
+ *   focus stays on the trigger (aria-activedescendant listbox pattern)
+ */
+export function Select({
+  value,
+  options,
+  onChange,
+  placeholder = "请选择",
+  disabled = false,
+  size = "md",
+  footer,
+  className,
+}: SelectProps) {
+  const [open, setOpen] = useState(false)
+  const [up, setUp] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  const listId = useId()
+  const selected = options.find((option) => option.value === value)
+  const optionId = (index: number) => `${listId}-opt-${index}`
+
+  useEffect(() => {
+    if (!open) return undefined
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+    const closeOnEscape = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false)
+        buttonRef.current?.focus()
+      }
+    }
+
+    document.addEventListener("mousedown", closeOnOutsideClick, true)
+    document.addEventListener("keydown", closeOnEscape)
+    return () => {
+      document.removeEventListener("mousedown", closeOnOutsideClick, true)
+      document.removeEventListener("keydown", closeOnEscape)
+    }
+  }, [open])
+
+  // Keep the keyboard-active row visible while navigating.
+  useEffect(() => {
+    if (!open || activeIndex < 0) return
+    listRef.current?.querySelector(`[data-index="${activeIndex}"]`)?.scrollIntoView({ block: "nearest" })
+  }, [open, activeIndex])
+
+  const openMenu = () => {
+    if (disabled) return
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      setUp(window.innerHeight - rect.bottom < 300)
+    }
+    const selectedIndex = options.findIndex((option) => option.value === value)
+    setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0)
+    setOpen(true)
+  }
+
+  const toggle = () => {
+    if (disabled) return
+    if (open) setOpen(false)
+    else openMenu()
+  }
+
+  const pick = (nextValue: string) => {
+    onChange(nextValue)
+    setOpen(false)
+    buttonRef.current?.focus()
+  }
+
+  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) return
+    if (!open) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault()
+        openMenu()
+      }
+      return
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        setActiveIndex((index) => Math.min(index + 1, options.length - 1))
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        setActiveIndex((index) => Math.max((index < 0 ? options.length : index) - 1, 0))
+        break
+      case "Home":
+        event.preventDefault()
+        setActiveIndex(0)
+        break
+      case "End":
+        event.preventDefault()
+        setActiveIndex(options.length - 1)
+        break
+      case "Enter":
+      case " ": {
+        event.preventDefault()
+        const active = options[activeIndex]
+        if (active) pick(active.value)
+        else setOpen(false)
+        break
+      }
+      case "Tab":
+        setOpen(false)
+        break
+    }
+  }
+
+  return (
+    <div
+      data-slot="select"
+      data-ow-part="control"
+      className={cn("relative", open && "z-[var(--ow-z-dropdown)]", className)}
+      ref={wrapRef}
+    >
+      <SelectTrigger
+        ref={buttonRef}
+        open={open}
+        size={size}
+        disabled={disabled}
+        onClick={toggle}
+        onKeyDown={onTriggerKeyDown}
+        aria-controls={open ? listId : undefined}
+        aria-activedescendant={open && activeIndex >= 0 ? optionId(activeIndex) : undefined}
+      >
+        {selected ? (
+          selected.label
+        ) : disabled ? (
+          placeholder
+        ) : (
+          <span className="text-[color:var(--ow-placeholder)]">{placeholder}</span>
+        )}
+      </SelectTrigger>
+      {open && (
+        <div
+          ref={listRef}
+          id={listId}
+          data-ow-part="list"
+          className={selectMenuVariants({ position: up ? "up" : "down" })}
+          role="listbox"
+        >
+          {options.map((option, index) => (
+            <button
+              key={option.value}
+              id={optionId(index)}
+              type="button"
+              role="option"
+              tabIndex={-1}
+              aria-selected={option.value === value}
+              data-index={index}
+              data-ow-role={option.value === value ? "selected" : "option"}
+              className={selectOptionVariants({ active: index === activeIndex })}
+              onMouseDown={(event) => event.preventDefault()}
+              onMouseEnter={() => setActiveIndex(index)}
+              onClick={() => pick(option.value)}
+            >
+              <span className="flex-1 min-w-0 flex flex-col gap-0.5">
+                <span
+                  className={cn(
+                    "overflow-hidden text-ellipsis whitespace-nowrap",
+                    option.value === value && "font-medium",
+                  )}
+                >
+                  {option.label}
+                </span>
+                {option.sub && (
+                  <span className="text-ow-fs-eyebrow font-normal leading-snug text-[color:var(--ow-text-3)] overflow-hidden text-ellipsis whitespace-nowrap">
+                    {option.sub}
+                  </span>
+                )}
+              </span>
+              {option.value === value && (
+                <Check className="shrink-0 w-4 h-4 text-[color:var(--ow-text)]" aria-hidden="true" />
+              )}
+            </button>
+          ))}
+          {footer}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/primitives/Spinner/index.tsx

@@ -0,0 +1,58 @@
+import { cn } from "../../../lib/utils"
+
+/**
+ * Spinner — <20px 小转子（DS 2.0 原语，§9 唯一转子帧）
+ *
+ * 1.5px 描边圆环 ＋ 90° 缺口（pathLength 100 / dasharray 75 25），
+ * linear var(--ow-dur-spin-fast)=0.9s 匀速，色随所在文字（currentColor）。
+ * reduced-motion 下 motion-safe: 前缀自动停转，留静态缺口环。
+ *
+ * 全库四处同款手抄（Button 的 loading 槽、DropZone 忙态、SkillDetailPanelView、
+ * ToolDetailModalView）在 W-R2 收到本件，唯一实现只此一份；≥20px 的运行态请用
+ * composite/BeaconSpinner（信标构型），不要放大本件。
+ */
+export type SpinnerSize = "sm" | "md" | "lg"
+
+const sizeClasses: Record<SpinnerSize, string> = {
+  /** 14px —— 随 body-sm/紧凑行 */
+  sm: "h-3.5 w-3.5",
+  /** 16px —— 默认，随 fs-ui */
+  md: "h-4 w-4",
+  /** 20px —— §9 小转子上限 */
+  lg: "h-5 w-5",
+}
+
+export interface SpinnerProps {
+  /** 尺寸档：sm 14 / md 16 / lg 20，默认 md */
+  size?: SpinnerSize
+  /** 追加类；传了尺寸类会覆盖 size 档（Button 用它接自家 icon 尺寸表） */
+  className?: string
+}
+
+export function Spinner({ size = "md", className }: SpinnerProps) {
+  return (
+    <svg
+      data-slot="spinner"
+      data-ow-part="spinner"
+      className={cn(
+        "flex-shrink-0 motion-safe:animate-[ow-spin_var(--ow-dur-spin-fast)_linear_infinite]",
+        sizeClasses[size],
+        className,
+      )}
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        r="6.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        pathLength="100"
+        strokeDasharray="75 25"
+      />
+    </svg>
+  )
+}

package/src/components/primitives/Switch/Switch.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Switch } from "./index"
+
+const meta = {
+  title: "Primitives/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Switch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultChecked: false,
+  },
+}
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    defaultChecked: false,
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    defaultChecked: true,
+    disabled: true,
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div className="flex items-center gap-3">
+        <Switch checked={checked} onChange={setChecked} aria-label="Interactive switch" />
+        <span className="text-sm text-ow-text-2">{checked ? "已开启" : "已关闭"}</span>
+      </div>
+    )
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Switch aria-label="关" />
+      <Switch defaultChecked aria-label="开" />
+      <Switch disabled aria-label="禁用关" />
+      <Switch disabled defaultChecked aria-label="禁用开" />
+    </div>
+  ),
+}

package/src/components/primitives/Switch/SwitchSource.test.mjs

@@ -0,0 +1,38 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+/** 注释里会点名被退役的旧写法作存档；禁项只查代码。 */
+const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
+
+test("switch keeps 36x20 visual with a >=24px vertical hit target (A2-B3 原型 2553)", () => {
+  assert.match(source, /w-9 h-5 rounded-full/)
+  assert.match(source, /after:-inset-y-0\.5 after:inset-x-0/)
+})
+
+test("track/knob use control tokens only, never beacon yellow", () => {
+  assert.match(source, /bg-\[var\(--ow-control-on\)\]/)
+  assert.match(source, /bg-\[var\(--ow-control-off\)\]/)
+  assert.match(source, /bg-\[var\(--ow-control-knob\)\]/)
+  assert.match(source, /bg-\[var\(--ow-control-on-glyph\)\]/)
+  assert.doesNotMatch(source, /--ow-beacon|--ow-yellow|--ow-accent-dot/)
+})
+
+test("knob travel runs at the 200ms tier with ease-beacon", () => {
+  assert.match(
+    source,
+    /transition-\[transform,background-color\] duration-\[var\(--ow-dur-2\)\] ease-\[var\(--ow-ease-beacon\)\]/,
+  )
+})
+
+test("state completeness: hover, focus ring, per-token disabled", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-border-strong\)\]/)
+  // R2：焦点语法全库归一到 .ow-focus-ring（outline 三件套），不再走 --ow-focus-shadow。
+  assert.match(source, /"ow-focus-ring"/)
+  assert.doesNotMatch(code, /--ow-focus-shadow/)
+  assert.match(source, /bg-\[var\(--ow-disabled-bg\)\]/)
+  assert.match(source, /border-\[color:var\(--ow-disabled-border\)\]/)
+  assert.match(source, /bg-\[var\(--ow-disabled-text\)\]/)
+  assert.doesNotMatch(source, /disabled:opacity|opacity-disabled/)
+})