@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/s2-menu-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"s2-menu-styles.js","names":[],"sources":["../../src/menu/s2-menu-styles.ts"],"sourcesContent":["// @ts-nocheck\nimport type {\n  MenuItemRenderProps,\n  MenuRenderProps,\n  PopoverRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  setColorScheme,\n  space,\n  style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  controlSize,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { edgeToText } from \"../style/spectrum-theme\" with { type: \"macro\" };\n\nexport type S2MenuSize = \"S\" | \"M\" | \"L\" | \"XL\";\n\nexport interface S2MenuStyleProps {\n  size: S2MenuSize;\n}\n\nexport interface S2MenuItemStyleProps\n  extends Omit<MenuItemRenderProps, \"isFocused\">, S2MenuStyleProps {\n  isFocused: boolean;\n  isLink?: boolean;\n}\n\nconst menuItemGrid = {\n  size: {\n    S: [edgeToText(24), \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", edgeToText(24)],\n    M: [edgeToText(32), \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", edgeToText(32)],\n    L: [edgeToText(40), \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", edgeToText(40)],\n    XL: [edgeToText(48), \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", edgeToText(48)],\n  },\n} as const;\n\nexport const menuPopover = style<\n  PopoverRenderProps & { colorScheme?: \"light\" | \"dark\" | \"light dark\" }\n>({\n  ...setColorScheme(),\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      /* Viviana UI v2 (Glasselated): a floating overlay wears the PANEL surface whole.\n       * `layer-1` resolves to `var(--surface-panel)` in the theme's backgroundColor map\n       * and pairs with `--blur-panel` and the 14px `panel` radius below. This was\n       * `layer-2` (= `var(--surface-card)`) sitting on the `panel` radius — the card's\n       * fill and blur on the panel's corner, which is not a surface the register draws. */\n      default: \"layer-1\",\n      forcedColors: \"Background\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  /* The panel register is open-coded here rather than spread from\n   * `glassSurface(\"panel\")` (s2-internal/style-utils.ts), for two reasons specific to\n   * this surface. (1) The fill has to stay behind the `--s2-container-bg` custom\n   * property: the theme's auto/overlay colors are computed against it\n   * (`autoStaticColor`/`generateOverlayColorScale` both default to\n   * `var(--s2-container-bg)`, style/tokens.ts), so descendants lose their contrast\n   * reference if it is replaced by a direct `backgroundColor`. (2) This surface paints\n   * its edge with `outline` (see the bottom of this object) where the helper paints a\n   * `border`, so spreading it would draw a second 1px edge and shift the box metrics.\n   * The blur is the load-bearing half: translucent fill plus blur is what reads as glass. */\n  backdropFilter: \"var(--blur-panel)\",\n  /* Not a cast shadow: the theme points `elevated`, `emphasized` and `edge-glass` at\n   * one shared inset-rim value, so this already resolves to the register's rim. Left\n   * spelled `elevated` deliberately — it is the same value, and the token map is where\n   * that decision lives. */\n  boxShadow: \"elevated\",\n  borderRadius: \"panel\",\n  display: \"flex\",\n  opacity: {\n    default: 1,\n    isEntering: 0,\n    isExiting: 0,\n  },\n  translateY: {\n    default: 0,\n    placement: {\n      top: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      bottom: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  translateX: {\n    default: 0,\n    placement: {\n      left: {\n        isEntering: 4,\n        isExiting: 4,\n      },\n      right: {\n        isEntering: -4,\n        isExiting: -4,\n      },\n    },\n  },\n  transition: \"[opacity, translate]\",\n  transitionDuration: 200,\n  transitionTimingFunction: {\n    isExiting: \"in\",\n  },\n  pointerEvents: {\n    default: \"auto\",\n    isExiting: \"none\",\n  },\n  padding: 0,\n  minHeight: 0,\n  overflow: \"visible\",\n  boxSizing: \"border-box\",\n  isolation: \"isolate\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  /* 1px `--border-subtle` — the register's glass-surface edge, reached through the\n   * `border-subtle` key the theme's outlineColor map exposes alongside borderColor's.\n   * The previous value was `lightDark(\"transparent-white-25\", \"gray-200\")`, and\n   * `transparent-white-25` is the 25th STOP of Spectrum's transparent-white ramp\n   * (`rgba(255, 255, 255, 0)` in @adobe/spectrum-tokens color-palette.json), not 25%\n   * white — so light drew no edge at all while dark drew a solid gray. An edge that is\n   * present in one scheme and absent in the other is wrong under any register. */\n  outlineColor: {\n    default: \"border-subtle\",\n    forcedColors: \"ButtonBorder\",\n  },\n});\n\nexport const menuFrame = style({\n  display: \"flex\",\n  width: \"full\",\n  height: \"full\",\n});\n\nexport const menu = style<MenuRenderProps & S2MenuStyleProps>({\n  outlineStyle: \"none\",\n  display: \"grid\",\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: \"border-box\",\n  maxHeight: \"[inherit]\",\n  width: \"full\",\n  // Upstream `menu` uses a single `overflow: {isPopover: 'auto'}` (both axes auto\n  // in the popover case). The port always renders the menu inside its popover, so\n  // `overflow: \"auto\"` matches byte-for-byte (`overflow-x`/`overflow-y` both\n  // resolve to `auto`); the previous `overflowX: \"hidden\"` was a self-inflicted\n  // divergence D1 caught. `maxWidth`/`padding` stay unconditional here (the\n  // isPopover gating is a tracked deferred divergence, D1-safe while in popover).\n  overflow: \"auto\",\n  maxWidth: 320,\n  padding: 8,\n  fontFamily: \"sans\",\n  fontSize: controlFont(),\n  gridAutoRows: \"min-content\",\n  // The menu root is a `<div role=\"menu\">` (faithful to upstream RAC), so no\n  // list-element compensation is needed; `margin: 0` matches upstream's div.\n  margin: 0,\n});\n\nexport const menuItem = style<S2MenuItemStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", wrap: true, icon: true, register: \"row\" }),\n  columnGap: 0,\n  paddingX: 0,\n  paddingBottom: \"--labelPadding\",\n  /* Viviana UI v2 (Glasselated): a register row is never painted. The handoff's nav and\n   * list rows are transparent at rest, on hover and when selected — state is carried by\n   * ink (the label shifting toward the accent) and by the leading mark fading in, not by\n   * a fill. `baseColor(\"gray-100\").isFocusVisible` baked an opaque ramp stop here, a\n   * solid bar the register does not draw at any time.\n   * Keyboard focus is not weakened: `focusRing()` above still draws a 2px ring on\n   * isFocusVisible, and it cannot be clipped here — the `menu` container that scrolls\n   * (`overflow: \"auto\"`) carries `padding: 8`, so the ring's 2px offset plus 2px width\n   * stays 4px inside the clip edge. That leaves isFocused free to mean the register's\n   * hover/highlight.\n   * The forced-colors fill is the one that stays: `forcedColorAdjust: \"none\"` at the\n   * bottom of this object opts the item out of the OS override, so high-contrast mode\n   * needs us to paint Highlight ourselves, paired with HighlightText in `color` below. */\n  backgroundColor: {\n    default: \"transparent\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    /* Highlight is expressed as ink. `accent` is full-strength in the register — the\n     * strength the handoff gives a SELECTED row's label — and it is used here for\n     * hover/highlight rather than for selection because a menu item has no persistent\n     * selected-label state: selection is the checkmark that occupies its own grid area\n     * (see `menuItemCheckmark`). Ordered after `default` and before `isDisabled` so a\n     * disabled row still reads disabled when hovered. */\n    default: baseColor(\"neutral\"),\n    isFocused: \"accent\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"ButtonText\",\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  position: \"relative\",\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: \"grid\",\n  gridTemplateAreas: [\n    \". checkmark icon label       value keyboard descriptor .\",\n    \". .         .    description .     .        .          .\",\n  ],\n  gridTemplateColumns: \"subgrid\",\n  gridTemplateRows: {\n    default: \"auto minmax(0, min-content)\",\n    \":has([slot=description])\": \"auto auto\",\n  },\n  rowGap: {\n    \":has([slot=description])\": space(1),\n  },\n  height: \"min\",\n  textDecoration: \"none\",\n  cursor: {\n    default: \"default\",\n    isLink: \"pointer\",\n  },\n  // Upstream `menuitem` uses `transition: 'transform'` (pressScale only), not the\n  // broad `'default'` property set — matched here so the item's\n  // `transition-property` computed value is identical (a D1 finding).\n  transition: \"transform\",\n  forcedColorAdjust: \"none\",\n});\n\nexport const menuItemIcon = style({\n  display: \"block\",\n  size: fontRelative(20),\n  marginEnd: \"text-to-visual\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nexport const menuItemIconCenterWrapper = style({\n  display: \"flex\",\n  gridArea: \"icon\",\n});\n\nexport const menuItemCheckmark = style<Pick<S2MenuItemStyleProps, \"isSelected\" | \"isDisabled\">>({\n  gridArea: \"checkmark\",\n  display: \"block\",\n  alignSelf: \"center\",\n  justifySelf: \"center\",\n  size: fontRelative(12),\n  marginEnd: \"text-to-control\",\n  visibility: {\n    default: \"hidden\",\n    isSelected: \"visible\",\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: baseColor(\"accent\"),\n      isDisabled: \"gray-400\",\n      forcedColors: \"Highlight\",\n    },\n  },\n});\n\nexport const menuItemCheckbox = style<\n  Pick<S2MenuItemStyleProps, \"isSelected\" | \"isFocused\" | \"isDisabled\">\n>({\n  ...controlBorderRadius(\"sm\"),\n  gridArea: \"checkmark\",\n  alignSelf: \"center\",\n  justifySelf: \"center\",\n  size: controlSize(\"sm\"),\n  marginEnd: \"text-to-control\",\n  flexShrink: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderWidth: space(2),\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  transition: \"default\",\n  forcedColorAdjust: \"none\",\n  backgroundColor: {\n    default: \"gray-25\",\n    forcedColors: \"Background\",\n    isSelected: {\n      default: baseColor(\"accent-900\"),\n      forcedColors: \"Highlight\",\n      isDisabled: {\n        default: \"gray-400\",\n        forcedColors: \"GrayText\",\n      },\n    },\n  },\n  borderColor: {\n    default: baseColor(\"gray-800\"),\n    forcedColors: \"ButtonBorder\",\n    isDisabled: {\n      default: \"gray-400\",\n      forcedColors: \"GrayText\",\n    },\n    isSelected: \"transparent\",\n  },\n});\n\nexport const menuItemCheckboxIcon = style({\n  pointerEvents: \"none\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"gray-25\",\n      forcedColors: \"HighlightText\",\n    },\n  },\n});\n\nexport const menuItemLabel = style<S2MenuStyleProps>({\n  gridArea: \"label\",\n  font: controlFont(),\n  color: \"inherit\",\n  fontWeight: \"medium\",\n  marginTop: \"--labelPadding\",\n});\n\nexport const menuItemDescription = style<\n  Pick<S2MenuItemStyleProps, \"size\" | \"isFocused\" | \"isDisabled\">\n>({\n  gridArea: \"description\",\n  font: {\n    default: \"ui-sm\",\n    size: {\n      S: \"ui-xs\",\n      M: \"ui-sm\",\n      L: \"ui\",\n      XL: \"ui-lg\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isFocused: \"gray-800\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"inherit\",\n    },\n  },\n  // Upstream `description` has NO `transition` — the port's `transition: \"default\"`\n  // was self-inflicted (D1 caught the differing `transition-property`).\n});\n\nexport const menuItemValue = style({\n  gridArea: \"value\",\n  marginStart: 8,\n});\n\nexport const menuItemKeyboard = style<\n  Pick<S2MenuItemStyleProps, \"size\" | \"isFocused\" | \"isDisabled\">\n>({\n  gridArea: \"keyboard\",\n  marginStart: 8,\n  font: \"ui\",\n  textAlign: \"end\",\n  color: {\n    default: \"gray-600\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"inherit\",\n    },\n  },\n  unicodeBidi: \"plaintext\",\n});\n\nexport const menuItemDescriptor = style({\n  gridArea: \"descriptor\",\n  placeSelf: \"end\",\n  marginStart: 8,\n  marginBottom: fontRelative(-1),\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nexport const menuItemDescriptorIcon = style<S2MenuStyleProps>({\n  marginEnd: 0,\n  display: \"block\",\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 26,\n    },\n  },\n});\n\nexport const menuSection = style<S2MenuStyleProps>({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: \"center\",\n  display: \"grid\",\n  gridTemplateAreas: [\n    \". checkmark icon label       value keyboard descriptor .\",\n    \". .         .    description .     .        .          .\",\n  ],\n  gridTemplateColumns: menuItemGrid,\n});\n\nexport const menuSectionHeader = style<S2MenuStyleProps>({\n  color: \"neutral\",\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: \"border-box\",\n  minHeight: controlSize(),\n  paddingY:\n    \"[calc((self(minHeight) - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]\",\n});\n\nexport const menuSectionHeading = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  margin: 0,\n});\n"],"mappings":";;;AA2CA,MAAa,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Fb,MAAa,YAAA;AAMb,MAAa,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBb,MAAa,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEb,MAAa,eAAA;AAUb,MAAa,4BAAA;AAKb,MAAa,oBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;AAqBb,MAAa,mBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCb,MAAa,uBAAA;AAWb,MAAa,gBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQb,MAAa,sBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBb,MAAa,gBAAA;AAKb,MAAa,mBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;AAiBb,MAAa,qBAAA;AAWb,MAAa,yBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;AAab,MAAa,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAYb,MAAa,oBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;AAUb,MAAa,qBAAA"}
+{"version":3,"file":"s2-menu-styles.js","names":[],"sources":["../../src/menu/s2-menu-styles.ts"],"sourcesContent":["// @ts-nocheck\n\n/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Menu.tsx\n\n// Port of packages/@react-spectrum/s2/src/Menu.tsx.\n\nimport type { MenuItemRenderProps, MenuRenderProps } from \"@proyecto-viviana/solidaria-components\";\nimport { baseColor, focusRing, fontRelative, space, style } from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  controlBorderRadius,\n  controlFont,\n  controlSize,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\n\nexport type S2MenuSize = \"S\" | \"M\" | \"L\" | \"XL\";\n\nexport interface S2MenuStyleProps {\n  size: S2MenuSize;\n}\n\nexport interface S2MenuItemStyleProps\n  extends Omit<MenuItemRenderProps, \"isFocused\">, S2MenuStyleProps {\n  isFocused: boolean;\n  isLink?: boolean;\n}\n\n/* The row's inline inset is FLAT in this register, not a per-size ramp. `edgeToText(h)`\n * is Spectrum's `height * 3/8`, so the same menu inset 9px at S and 18px at XL; the\n * handoff draws every row at `6px 10px` regardless of the control size around it\n * (TerminalGlassLab.tsx:598, :1027). This is the same correction `control()` already\n * made for the corner — it replaced Spectrum's height-derived radius ramp with the flat\n * 6px row corner — applied to the axis the subgrid owns. The size map is kept rather\n * than collapsed so the size prop stays the single place a future rung would land. */\nconst rowEdgeToText = \"10px\";\n\nconst menuItemGrid = {\n  size: {\n    S: [rowEdgeToText, \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", rowEdgeToText],\n    M: [rowEdgeToText, \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", rowEdgeToText],\n    L: [rowEdgeToText, \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", rowEdgeToText],\n    XL: [rowEdgeToText, \"auto\", \"auto\", \"minmax(0, 1fr)\", \"auto\", \"auto\", \"auto\", rowEdgeToText],\n  },\n} as const;\n\nexport const menuFrame = style({\n  display: \"flex\",\n  width: \"full\",\n  height: \"full\",\n});\n\nexport const menu = style<MenuRenderProps & S2MenuStyleProps>({\n  outlineStyle: \"none\",\n  display: \"grid\",\n  gridTemplateColumns: menuItemGrid,\n  boxSizing: \"border-box\",\n  maxHeight: \"[inherit]\",\n  width: \"full\",\n  // Upstream `menu` uses a single `overflow: {isPopover: 'auto'}` (both axes auto\n  // in the popover case). The port always renders the menu inside its popover, so\n  // `overflow: \"auto\"` matches byte-for-byte (`overflow-x`/`overflow-y` both\n  // resolve to `auto`); the previous `overflowX: \"hidden\"` was a self-inflicted\n  // divergence D1 caught. `maxWidth`/`padding` stay unconditional here (the\n  // isPopover gating is a tracked deferred divergence, D1-safe while in popover).\n  overflow: \"auto\",\n  maxWidth: 320,\n  padding: 8,\n  fontFamily: \"sans\",\n  fontSize: controlFont(),\n  gridAutoRows: \"min-content\",\n  // The menu root is a `<div role=\"menu\">` (faithful to upstream RAC), so no\n  // list-element compensation is needed; `margin: 0` matches upstream's div.\n  margin: 0,\n});\n\nexport const menuItem = style<S2MenuItemStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", wrap: true, icon: true, register: \"row\" }),\n  columnGap: 0,\n  paddingX: 0,\n  paddingBottom: \"--labelPadding\",\n  /* Viviana UI v2 (Glasselated): a register row is never painted. The handoff's nav and\n   * list rows are transparent at rest, on hover and when selected — state is carried by\n   * ink (the label shifting toward the accent) and by the leading mark fading in, not by\n   * a fill — with one exception, the selected row, noted on `backgroundColor` below.\n   * `baseColor(\"gray-100\").isFocusVisible` baked an opaque ramp stop here, a solid bar\n   * the register does not draw at rest or on hover.\n   * Keyboard focus is not weakened: `focusRing()` above still draws a 2px ring on\n   * isFocusVisible, and it cannot be clipped here — the `menu` container that scrolls\n   * (`overflow: \"auto\"`) carries `padding: 8`, so the ring's 2px offset plus 2px width\n   * stays 4px inside the clip edge. That leaves isFocused free to mean the register's\n   * hover/highlight.\n   * The forced-colors fill is the one that stays: `forcedColorAdjust: \"none\"` at the\n   * bottom of this object opts the item out of the OS override, so high-contrast mode\n   * needs us to paint Highlight ourselves, paired with HighlightText in `color` below. */\n  backgroundColor: {\n    default: \"transparent\",\n    /* The one exception to \"never painted\": a SELECTED row. The handoff's own selected\n     * row carries `--surface-active` (the accent at low alpha), and a menu needs it more\n     * than a nav list does — a menu row's selection also shows as the checkmark in the\n     * `checkmark` grid area, but that mark is off in the leading column, far from a long\n     * label, and it is the only cue on a row that can scroll past under the pointer.\n     * Ordered before `isFocused` has no effect (they are separate properties), but it is\n     * ordered after `default` so an unselected row stays transparent. */\n    isSelected: \"[var(--surface-active)]\",\n    forcedColors: {\n      default: \"transparent\",\n      isFocused: \"Highlight\",\n    },\n  },\n  color: {\n    /* Highlight is expressed as ink. `accent` is full-strength in the register — the\n     * strength the handoff gives a SELECTED row's label — and it is used here for\n     * hover/highlight rather than for selection because a menu item has no persistent\n     * selected-label state: selection is the checkmark that occupies its own grid area\n     * (see `menuItemCheckmark`). Ordered after `default` and before `isDisabled` so a\n     * disabled row still reads disabled when hovered. */\n    default: baseColor(\"neutral\"),\n    isFocused: \"accent\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"ButtonText\",\n      isFocused: \"HighlightText\",\n      isDisabled: \"GrayText\",\n    },\n  },\n  position: \"relative\",\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  display: \"grid\",\n  gridTemplateAreas: [\n    \". checkmark icon label       value keyboard descriptor .\",\n    \". .         .    description .     .        .          .\",\n  ],\n  gridTemplateColumns: \"subgrid\",\n  gridTemplateRows: {\n    default: \"auto minmax(0, min-content)\",\n    \":has([slot=description])\": \"auto auto\",\n  },\n  rowGap: {\n    \":has([slot=description])\": space(1),\n  },\n  height: \"min\",\n  textDecoration: \"none\",\n  cursor: {\n    default: \"default\",\n    isLink: \"pointer\",\n  },\n  // Upstream `menuitem` uses `transition: 'transform'` (pressScale only), not the\n  // broad `'default'` property set — matched here so the item's\n  // `transition-property` computed value is identical (a D1 finding).\n  transition: \"transform\",\n  forcedColorAdjust: \"none\",\n});\n\nexport const menuItemIcon = style({\n  display: \"block\",\n  size: \"1lh\",\n  marginEnd: \"text-to-visual\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nexport const menuItemIconCenterWrapper = style({\n  display: \"flex\",\n  gridArea: \"icon\",\n});\n\nexport const menuItemCheckmark = style<Pick<S2MenuItemStyleProps, \"isSelected\" | \"isDisabled\">>({\n  gridArea: \"checkmark\",\n  display: \"block\",\n  alignSelf: \"center\",\n  justifySelf: \"center\",\n  size: fontRelative(12),\n  marginEnd: \"text-to-control\",\n  visibility: {\n    default: \"hidden\",\n    isSelected: \"visible\",\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: baseColor(\"accent\"),\n      isDisabled: \"gray-400\",\n      forcedColors: \"Highlight\",\n    },\n  },\n});\n\nexport const menuItemCheckbox = style<\n  Pick<S2MenuItemStyleProps, \"isSelected\" | \"isFocused\" | \"isDisabled\">\n>({\n  ...controlBorderRadius(\"sm\"),\n  gridArea: \"checkmark\",\n  alignSelf: \"center\",\n  justifySelf: \"center\",\n  size: controlSize(\"sm\"),\n  marginEnd: \"text-to-control\",\n  flexShrink: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderWidth: space(2),\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  transition: \"default\",\n  forcedColorAdjust: \"none\",\n  backgroundColor: {\n    default: \"gray-25\",\n    forcedColors: \"Background\",\n    isSelected: {\n      default: baseColor(\"accent-900\"),\n      forcedColors: \"Highlight\",\n      isDisabled: {\n        default: \"gray-400\",\n        forcedColors: \"GrayText\",\n      },\n    },\n  },\n  borderColor: {\n    default: baseColor(\"gray-800\"),\n    forcedColors: \"ButtonBorder\",\n    isDisabled: {\n      default: \"gray-400\",\n      forcedColors: \"GrayText\",\n    },\n    isSelected: \"transparent\",\n  },\n});\n\nexport const menuItemCheckboxIcon = style({\n  pointerEvents: \"none\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"gray-25\",\n      forcedColors: \"HighlightText\",\n    },\n  },\n});\n\nexport const menuItemLabel = style<S2MenuStyleProps>({\n  gridArea: \"label\",\n  font: controlFont(),\n  color: \"inherit\",\n  fontWeight: \"medium\",\n  marginTop: \"--labelPadding\",\n});\n\nexport const menuItemDescription = style<\n  Pick<S2MenuItemStyleProps, \"size\" | \"isFocused\" | \"isDisabled\">\n>({\n  gridArea: \"description\",\n  font: {\n    default: \"ui-sm\",\n    size: {\n      S: \"ui-xs\",\n      M: \"ui-sm\",\n      L: \"ui\",\n      XL: \"ui-lg\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isFocused: \"gray-800\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"inherit\",\n    },\n  },\n  // Upstream `description` has NO `transition` — the port's `transition: \"default\"`\n  // was self-inflicted (D1 caught the differing `transition-property`).\n});\n\nexport const menuItemValue = style({\n  gridArea: \"value\",\n  marginStart: 8,\n});\n\nexport const menuItemKeyboard = style<\n  Pick<S2MenuItemStyleProps, \"size\" | \"isFocused\" | \"isDisabled\">\n>({\n  gridArea: \"keyboard\",\n  marginStart: 8,\n  font: \"ui\",\n  textAlign: \"end\",\n  color: {\n    default: \"gray-600\",\n    isDisabled: \"disabled\",\n    forcedColors: {\n      default: \"inherit\",\n    },\n  },\n  unicodeBidi: \"plaintext\",\n});\n\nexport const menuItemDescriptor = style({\n  gridArea: \"descriptor\",\n  placeSelf: \"end\",\n  marginStart: 8,\n  marginBottom: fontRelative(-1),\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nexport const menuItemDescriptorIcon = style<S2MenuStyleProps>({\n  marginEnd: 0,\n  display: \"block\",\n  size: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 26,\n    },\n  },\n});\n\nexport const menuSection = style<S2MenuStyleProps>({\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: \"center\",\n  display: \"grid\",\n  gridTemplateAreas: [\n    \". checkmark icon label       value keyboard descriptor .\",\n    \". .         .    description .     .        .          .\",\n  ],\n  gridTemplateColumns: menuItemGrid,\n});\n\nexport const menuSectionHeader = style<S2MenuStyleProps>({\n  color: \"neutral\",\n  gridColumnStart: 2,\n  gridColumnEnd: -2,\n  boxSizing: \"border-box\",\n  minHeight: controlSize(),\n  paddingY:\n    \"[calc((self(minHeight) - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]\",\n});\n\nexport const menuSectionHeading = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  margin: 0,\n});\n"],"mappings":";;;;;;;;;;;;;;AAyDA,MAAa,YAAA;AAMb,MAAa,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBV;AAEH,MAAa,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EV;AAEH,MAAa,eAAA;AAUb,MAAa,4BAAA;AAKb,MAAa,oBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;AAmBV;AAEH,MAAa,mBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCV;AAEH,MAAa,uBAAA;AAWb,MAAa,gBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMV;AAEH,MAAa,sBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBV;AAEH,MAAa,gBAAA;AAKb,MAAa,mBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;AAeV;AAEH,MAAa,qBAAA;AAWb,MAAa,yBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAWV;AAEH,MAAa,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;AAUV;AAEH,MAAa,oBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;AAQV;AAEH,MAAa,qBAAA"}