@proyecto-viviana/ui 0.6.1 → 0.6.3

package/dist/progress-bar/index.jsx

@@ -111,7 +111,7 @@ const labelStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -155,7 +155,7 @@ const valueStyles = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	rules += " z8bmXs151";
@@ -218,7 +218,7 @@ const fillStyles = function anonymous(props) {
 	rules += " kd151";
 	rules += " jd151";
 	if (props.isStaticColor) rules += " gj151";
-	else rules += " gdeCgNc151";
+	else rules += " gnhAeB151";
 	rules += " glc151";
 	if (props.isIndeterminate) rules += " _0e151";
 	return rules;
@@ -235,7 +235,7 @@ const pendingStyles = function anonymous(props) {
 	rules += " _iNW847b151";
 	rules += " __mrmLYsd151";
 	if (props.isStaticColor) rules += " -lMNcGb-gj151";
-	else rules += " -lMNcGb-gdeCgNc151";
+	else rules += " -lMNcGb-gnhAeB151";
 	rules += " -lMNcGb-lgc151";
 	return rules;
 };

package/dist/radio/index.js

@@ -140,7 +140,7 @@ const radioGroupLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -230,7 +230,7 @@ const radioGroupHelpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " _qb151";
 	rules += " TgOnRt151";
 	rules += " -_8sjo0b-t5ZbAob151";

package/dist/radio/index.jsx

@@ -134,7 +134,7 @@ const radioGroupLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -224,7 +224,7 @@ const radioGroupHelpText = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " _qb151";
 	rules += " TgOnRt151";
 	rules += " -_8sjo0b-t5ZbAob151";

package/dist/searchfield/index.js

@@ -152,7 +152,7 @@ const searchFieldLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -390,7 +390,7 @@ const helpTextStyles = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";

package/dist/searchfield/index.jsx

@@ -144,7 +144,7 @@ const searchFieldLabel = function anonymous(props) {
 	}
 	if (props.isStaticColor) rules += " pl151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " plb151";
 	rules += " ri151";
 	return rules;
@@ -382,7 +382,7 @@ const helpTextStyles = function anonymous(props) {
 	} else if (props.isInvalid) {
 		rules += " pYjUhNc151";
 		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
+	} else rules += " pWQ7V3d151";
 	rules += " -_8sjo0b-t5ZbAob151";
 	rules += " _qb151";
 	rules += " TgOnRt151";

package/dist/segmentedcontrol/index.js

@@ -56,14 +56,11 @@ const segmentedControlItem = function anonymous(props) {
 		rules += " _FnuYUweb151";
 	}
 	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isSelected) if (props.isPressed) rules += " pOzYCcc151";
-	else if (props.isFocusVisible) rules += " pOzYCcc151";
-	else if (props.isHovered) rules += " pOzYCcc151";
-	else rules += " p5dxOg151";
+	else if (props.isSelected) rules += " p9ck5ue151";
 	else if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " sd151";
 	rules += " eb151";
 	rules += " _oa151";

package/dist/segmentedcontrol/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/segmentedcontrol/index.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  createContext,\n  type JSX,\n  mergeProps,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  SelectionIndicator,\n  SharedElementTransition,\n  ToggleButton as HeadlessToggleButton,\n  ToggleButtonGroup as HeadlessToggleButtonGroup,\n  useToggleButtonGroupStateContext,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, fontRelative, focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { control } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { useProviderProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport interface SegmentedControlProps extends Omit<\n  HeadlessToggleButtonGroupProps,\n  | \"children\"\n  | \"class\"\n  | \"style\"\n  | \"selectionMode\"\n  | \"selectedKeys\"\n  | \"defaultSelectedKeys\"\n  | \"onSelectionChange\"\n  | \"orientation\"\n  | \"slot\"\n  | \"ref\"\n> {\n  /** The content to display in the segmented control. */\n  children?: JSX.Element;\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean;\n  /** The id of the currently selected item. */\n  selectedKey?: Key | null;\n  /** The id of the initially selected item. */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the underlying radiogroup element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SegmentedControlItemProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"children\" | \"class\" | \"style\" | \"isSelected\" | \"defaultSelected\" | \"onChange\"\n> {\n  /** The id of the item, matching the value used in SegmentedControl's selectedKey prop. */\n  id: Key;\n  /** The content to display in the segmented control item. */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\nexport const SegmentedControlContext =\n  createContext<SpectrumContextValue<SegmentedControlProps>>(null);\n\ninterface InternalSegmentedControlContextValue {\n  register?: (id: Key) => void;\n  isJustified?: boolean;\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextValue>({});\n\nconst segmentedControl = style({\n  display: \"flex\",\n  gap: 4,\n  /* No track. The register's segmented control is bare mono labels in a flex row —\n     `day / [week] / month` — with no background, border or radius of their own\n     (TerminalGlassLab.tsx:443-459, SEGMENTS at :21-25). What was here instead was two\n     raw light-dark() literals, rgb(233,233,233) / rgb(44,44,44), which answer to no\n     token in either scheme and so could not follow a theme flip. The radius goes with\n     the fill: with nothing painted there is no corner to round. */\n  width: \"fit\",\n});\n\nconst segmentedControlItem = style<ToggleButtonRenderProps & { isJustified?: boolean }>({\n  ...focusRing(),\n  ...control({ shape: \"default\", icon: true, rim: false }),\n  justifyContent: \"center\",\n  position: \"relative\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  /* With the plate gone, ink is the ONLY selection signal — which is how the register\n     does it: the selected segment is `var(--accent-primary)` and its siblings are\n     `var(--text-tertiary)` (TerminalGlassLab.tsx:21-25). neutral-subdued vs neutral was\n     too small a step to carry selection on its own. `accent` is the semantic ink stop,\n     the same one link/picker/combobox use; it refs accent-color-900, which this library\n     re-points at the brand blue ramp (glasselated-ramps.ts). */\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isSelected: baseColor(\"accent\"),\n    isDisabled: \"disabled\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  flexGrow: {\n    isJustified: 1,\n  },\n  flexBasis: {\n    isJustified: 0,\n  },\n  flexShrink: 0,\n  whiteSpace: \"nowrap\",\n  userSelect: \"none\",\n  forcedColorAdjust: \"none\",\n  zIndex: {\n    default: 1,\n    isSelected: 0,\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\n/* No type parameter, and not called as a function below: every condition in this object is\n   static (`forcedColors`), so the macro bakes it to a plain class string rather than to a\n   selector function. Invoking it throws \"selectionIndicator is not a function\" at render.\n   Re-adding a runtime-prop condition here means restoring the call form at the usage site. */\nconst selectionIndicator = style({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"full\",\n  height: \"full\",\n  contain: \"strict\",\n  transition: {\n    default: \"[translate,width]\",\n    \"@media (prefers-reduced-motion: reduce)\": \"none\",\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: \"out\",\n  boxSizing: \"border-box\",\n  /* The indicator paints nothing in either scheme: the register signals selection with\n     ink, not with a bordered plate (TerminalGlassLab.tsx:443-459). The element is kept\n     rather than deleted because it carries the translate/width transition above and,\n     in forced-colors mode, is still the only surface available to mark the selection —\n     that branch is preserved on both maps. Radius drops from `card` (12px, a container\n     value) to `control` (5px), which is what `control()` gives the item itself, so the\n     forced-colors mark traces the segment instead of overshooting it.\n     `isDisabled` is dropped from both maps deliberately: over a transparent resting\n     state a disabled-only border/fill would appear out of nowhere; the disabled label\n     colour on the item above is the surviving signal. */\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  borderRadius: \"control\",\n  backgroundColor: {\n    default: \"transparent\",\n    forcedColors: \"Highlight\",\n  },\n  pointerEvents: \"none\",\n});\n\nconst itemContent = style({\n  position: \"relative\",\n  zIndex: 1,\n  display: \"flex\",\n  gap: \"text-to-visual\",\n  alignItems: \"center\",\n  minWidth: 0,\n  transition: \"default\",\n});\n\nconst itemText = style({\n  order: 1,\n  truncate: true,\n});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport function SegmentedControl(props: SegmentedControlProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"children\",\n    \"isJustified\",\n    \"selectedKey\",\n    \"defaultSelectedKey\",\n    \"onSelectionChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n\n  const selectedKeys = () => (local.selectedKey != null ? [local.selectedKey] : undefined);\n  const defaultSelectedKeys = () =>\n    local.defaultSelectedKey != null ? [local.defaultSelectedKey] : undefined;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(segmentedControl.toString() as StyleString, mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButtonGroup\n      {...headlessProps}\n      selectionMode=\"single\"\n      disallowEmptySelection\n      orientation=\"horizontal\"\n      selectedKeys={selectedKeys()}\n      defaultSelectedKeys={defaultSelectedKeys()}\n      onSelectionChange={(keys) => {\n        const firstKey = keys.values().next().value;\n        if (firstKey != null) {\n          local.onSelectionChange?.(firstKey);\n        }\n      }}\n      ref={(element) => assignRef(element)}\n      slot={local.slot ?? undefined}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-justified={local.isJustified ? \"true\" : undefined}\n      data-disabled={headlessProps.isDisabled ? \"true\" : undefined}\n    >\n      {() => (\n        <SharedElementTransition>\n          <DefaultSelectionTracker\n            defaultSelectedKey={local.defaultSelectedKey}\n            selectedKey={local.selectedKey}\n            isJustified={local.isJustified}\n          >\n            {local.children}\n          </DefaultSelectionTracker>\n        </SharedElementTransition>\n      )}\n    </HeadlessToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: {\n  children?: JSX.Element;\n  defaultSelectedKey?: Key;\n  selectedKey?: Key | null;\n  isJustified?: boolean;\n}): JSX.Element {\n  const state = useToggleButtonGroupStateContext();\n  let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;\n\n  const contextValue: InternalSegmentedControlContextValue = {\n    register(id: Key) {\n      if (!state || isRegistered) {\n        return;\n      }\n      isRegistered = true;\n      state.toggleKey(id);\n    },\n    get isJustified() {\n      return props.isJustified;\n    },\n  };\n\n  return (\n    <InternalSegmentedControlContext.Provider value={contextValue}>\n      {props.children}\n    </InternalSegmentedControlContext.Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element {\n  const context = useContext(InternalSegmentedControlContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n\n  onMount(() => context.register?.(local.id));\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        segmentedControlItem({\n          ...renderProps,\n          isJustified: context.isJustified,\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties => {\n    const style = { ...(local.UNSAFE_style ?? {}) } as JSX.CSSProperties;\n    const styleRecord = style as Record<string, string | number | undefined>;\n    const willChange = styleRecord[\"will-change\"] ?? \"\";\n    styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n    if (renderProps.isPressed && buttonElement) {\n      const { width, height } = buttonElement.getBoundingClientRect();\n      const perspective = Math.max(height, width / 3, 24);\n      const transform = style.transform ?? \"\";\n      style.transform = `${transform} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n    }\n\n    return style;\n  };\n\n  function SegmentContent(renderProps: ToggleButtonRenderProps) {\n    const resolvedChildren = resolveChildren(() => local.children);\n    const content = () => resolvedChildren();\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0, flexShrink: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        flexShrink: 0,\n      }),\n    };\n\n    return (\n      <>\n        <SelectionIndicator isSelected={renderProps.isSelected} class={selectionIndicator} />\n        <IconContext.Provider value={iconContextValue}>\n          <span class={itemContent}>\n            {typeof content() === \"string\" ? (\n              <span class={itemText} data-rsp-slot=\"text\">\n                {content()}\n              </span>\n            ) : (\n              content()\n            )}\n          </span>\n        </IconContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      id={local.id}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-segmented-control-item=\"\"\n    >\n      {(renderProps) => <SegmentContent {...renderProps} />}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA2FA,MAAa,0BACX,cAA2D,IAAA;AAO7D,MAAM,kCAAkC,cAAoD,CAAC,CAAA;AAE7F,MAAM,mBAAA;AAYN,MAAM,uBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CN,MAAM,qBAAA;;;;AAwDN,SAAgB,iBAAiB,OAAmC;CAClE,MAAM,gBAAgB,iBAAiB,KAAA;CACvC,MAAM,eAAe,uBAAuB,WAAW,uBAAA,GAA0B,MAAM,IAAI;CAE3F,MAAM,CAAC,OAAO,iBAAiB,WADhB,aAAW,eAAe,gBAAgB,CAAC,GAAG,KACnB,GAAQ;EAChD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAA,CACD;CAED,MAAM,qBAAsB,MAAM,eAAe,OAAO,CAAC,MAAM,WAAW,IAAI,KAAA;CAC9E,MAAM,4BACJ,MAAM,sBAAsB,OAAO,CAAC,MAAM,kBAAkB,IAAI,KAAA;CAClE,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CACxE,MAAM,YAAY,iBACf,cAA2D,KAC5D,MAAM,GAAG;CAEX,MAAM,kBACJ;EACE,cAAc;EACd,MAAM;EACN,MAAM;EACN,YAAY,iBAAiB,SAAQ,GAAmB,aAAA,CAAA;CAAA,EAEvD,OAAO,OAAA,EACP,KAAK,GAAA;CAEV,OAAA,gBACG,mBAAA,WACK,eAAa;EACjB,eAAA;EACA,wBAAA;EACA,aAAA;EAAA,IACA,eAAA;GAAA,OAAc,aAAA;EAAA;EAAA,IACd,sBAAA;GAAA,OAAqB,oBAAA;EAAA;EACrB,oBAAoB,SAAA;GAClB,MAAM,WAAW,KAAK,OAAM,EAAG,KAAI,EAAG;GACtC,IAAI,YAAY,MACd,MAAM,oBAAoB,QAAA;EAE9B;EAAA,MACM,YAAY,UAAU,OAAA;EAAA,IAC5B,OAAA;GAAA,OAAM,MAAM,QAAQ,KAAA;EAAA;EAAA,KAAA,WAAA;GAAA,OACb,UAAA;EAAA;EAAA,IACP,QAAA;GAAA,OAAO,kBAAA;EAAA;EAAA,KAAA,oBAAA;GAAA,OACS,MAAM,cAAc,SAAS,KAAA;EAAA;EAAA,KAAA,mBAAA;GAAA,OAC9B,cAAc,aAAa,SAAS,KAAA;EAAA;EAAA,gBAElD,gBACE,yBAAA,EAAA,IAAA,WAAA;GAAA,OAAA,gBACE,yBAAA;IAAA,IACC,qBAAA;KAAA,OAAoB,MAAM;IAAkB;IAAA,IAC5C,cAAA;KAAA,OAAa,MAAM;IAAW;IAAA,IAC9B,cAAA;KAAA,OAAa,MAAM;IAAW;IAAA,IAAA,WAAA;KAAA,OAE7B,MAAM;IAAQ;GAAA,CAAA;EAAA,EAAA,CAAA;CAGrB,CAAA,CAAA;AAGN;AAEA,SAAS,wBAAwB,OAKzB;CACN,MAAM,QAAQ,iCAAA;CACd,IAAI,eAAe,MAAM,sBAAsB,QAAQ,MAAM,eAAe;CAe5E,OAAA,gBACG,gCAAgC,UAAA;EAAS,OAAO;GAbjD,SAAS,IAAO;IACd,IAAI,CAAC,SAAS,cACZ;IAEF,eAAe;IACf,MAAM,UAAU,EAAA;GAClB;GACA,IAAI,cAAc;IAChB,OAAO,MAAM;GACf;EAIiD;EAAA,IAAA,WAAA;GAAA,OAC9C,MAAM;EAAQ;CAAA,CAAA;AAGrB;;;;AAKA,SAAgB,qBAAqB,OAAuC;CAC1E,MAAM,UAAU,WAAW,+BAAA;CAC3B,MAAM,CAAC,OAAO,iBAAiB,WAAW,OAAO;EAC/C;EACA;EACA;EACA;EACA;EACA;CAAA,CACD;CACD,IAAI;CAEJ,cAAc,QAAQ,WAAW,MAAM,EAAE,CAAA;CAEzC,MAAM,gBAAgB,gBACpB;EACE,MAAM;EACN,MAAM;EACN,YACE,qBAAqB;GACnB,GAAG;GACH,aAAa,QAAQ;EACvB,CAAA,GACA,MAAM,MAAM;CAAA,EAGb,OAAO,OAAA,EACP,KAAK,GAAA;CAEV,MAAM,YAAY,gBAA2C;EAC3D,MAAM,QAAQ,EAAE,GAAI,MAAM,gBAAgB,CAAC,EAAG;EAC9C,MAAM,cAAc;EAEpB,YAAY,iBAAiB,GADV,YAAY,kBAAkB,GACjB,YAAuB,KAAI;EAE3D,IAAI,YAAY,aAAa,eAAe;GAC1C,MAAM,EAAE,OAAO,WAAW,cAAc,sBAAqB;GAC7D,MAAM,cAAc,KAAK,IAAI,QAAQ,QAAQ,GAAG,EAAA;GAEhD,MAAM,YAAY,GADA,MAAM,aAAa,GAChB,eAAyB,YAAA,6BAAyC,KAAI;EAC7F;EAEA,OAAO;CACT;CAEA,SAAS,eAAe,aAAoC;EAC1D,MAAM,mBAAmB,eAAsB,MAAM,QAAQ;EAC7D,MAAM,gBAAgB,iBAAA;EACtB,MAAM,mBAAmB;GACvB,MAAM;GACN,QAAQ,eAAe;IAAE,MAAM;IAAQ,QAAM;GAAqC,CAAA;GAClF,QAAM;EAIR;EAEA,OAAA,CAAA,gBAEK,oBAAA;GAAA,IAAmB,aAAA;IAAA,OAAY,YAAY;GAAU;GAAA,SAAS;EAAA,CAAA,GAAA,gBAC9D,YAAY,UAAA;GAAS,OAAO;GAAA,IAAA,WAAA;IAAA,IAAA,OAAA,eAAA,MAAA;IAAA,OAAA,aAAA;KAAA,IAAA,MAAA,WAExB,OAAO,QAAA,MAAc,QAAA;KAAA,aAArB,IAAA,WAAA;MAAA,IAAA,QAAA,eAAA,OAAA;MAAA,OAAA,OAEI,OAAA;MAAA,OAAA;KAAA,GAAA,IAGH,QAAA;IACF,GAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,CAAA;CAKV;CAEA,OAAA,gBACG,cAAA,WACK,eAAa;EAAA,IACjB,KAAA;GAAA,OAAI,MAAM;EAAE;EAAA,MACN,YAAS;GACb,gBAAgB;EAClB;EAAA,SACO;EACP,OAAO;EAAA,+BAAA;EAAA,WAGL,gBAAA,gBAAiB,gBAAmB,WAAW;CAAA,CAAA,CAAA;AAGvD"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/segmentedcontrol/index.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  createContext,\n  type JSX,\n  mergeProps,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  SelectionIndicator,\n  SharedElementTransition,\n  ToggleButton as HeadlessToggleButton,\n  ToggleButtonGroup as HeadlessToggleButtonGroup,\n  useToggleButtonGroupStateContext,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, fontRelative, focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { control } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { useProviderProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport interface SegmentedControlProps extends Omit<\n  HeadlessToggleButtonGroupProps,\n  | \"children\"\n  | \"class\"\n  | \"style\"\n  | \"selectionMode\"\n  | \"selectedKeys\"\n  | \"defaultSelectedKeys\"\n  | \"onSelectionChange\"\n  | \"orientation\"\n  | \"slot\"\n  | \"ref\"\n> {\n  /** The content to display in the segmented control. */\n  children?: JSX.Element;\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean;\n  /** The id of the currently selected item. */\n  selectedKey?: Key | null;\n  /** The id of the initially selected item. */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the underlying radiogroup element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SegmentedControlItemProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"children\" | \"class\" | \"style\" | \"isSelected\" | \"defaultSelected\" | \"onChange\"\n> {\n  /** The id of the item, matching the value used in SegmentedControl's selectedKey prop. */\n  id: Key;\n  /** The content to display in the segmented control item. */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\nexport const SegmentedControlContext =\n  createContext<SpectrumContextValue<SegmentedControlProps>>(null);\n\ninterface InternalSegmentedControlContextValue {\n  register?: (id: Key) => void;\n  isJustified?: boolean;\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextValue>({});\n\nconst segmentedControl = style({\n  display: \"flex\",\n  gap: 4,\n  /* No track. The register's segmented control is bare mono labels in a flex row —\n     `day / [week] / month` — with no background, border or radius of their own\n     (TerminalGlassLab.tsx:443-459, SEGMENTS at :21-25). What was here instead was two\n     raw light-dark() literals, rgb(233,233,233) / rgb(44,44,44), which answer to no\n     token in either scheme and so could not follow a theme flip. The radius goes with\n     the fill: with nothing painted there is no corner to round. */\n  width: \"fit\",\n});\n\nconst segmentedControlItem = style<ToggleButtonRenderProps & { isJustified?: boolean }>({\n  ...focusRing(),\n  ...control({ shape: \"default\", icon: true, rim: false }),\n  justifyContent: \"center\",\n  position: \"relative\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  /* With the plate gone, ink is the ONLY selection signal — which is how the register\n     does it: the selected segment is accent ink and its siblings are secondary ink\n     (TerminalGlassLab.tsx:21-25). The decorative `--accent-primary` is only 2.98:1 on\n     the daylight panel, so text consumes the scheme-specific `--text-link` role instead:\n     it preserves the blue selection signal while meeting AA on every published surface.\n     `viviana-tokens.css` owns the actual register values for both schemes. */\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isSelected: \"[var(--text-link)]\",\n    isDisabled: \"disabled\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  flexGrow: {\n    isJustified: 1,\n  },\n  flexBasis: {\n    isJustified: 0,\n  },\n  flexShrink: 0,\n  whiteSpace: \"nowrap\",\n  userSelect: \"none\",\n  forcedColorAdjust: \"none\",\n  zIndex: {\n    default: 1,\n    isSelected: 0,\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\n/* No type parameter, and not called as a function below: every condition in this object is\n   static (`forcedColors`), so the macro bakes it to a plain class string rather than to a\n   selector function. Invoking it throws \"selectionIndicator is not a function\" at render.\n   Re-adding a runtime-prop condition here means restoring the call form at the usage site. */\nconst selectionIndicator = style({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"full\",\n  height: \"full\",\n  contain: \"strict\",\n  transition: {\n    default: \"[translate,width]\",\n    \"@media (prefers-reduced-motion: reduce)\": \"none\",\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: \"out\",\n  boxSizing: \"border-box\",\n  /* The indicator paints nothing in either scheme: the register signals selection with\n     ink, not with a bordered plate (TerminalGlassLab.tsx:443-459). The element is kept\n     rather than deleted because it carries the translate/width transition above and,\n     in forced-colors mode, is still the only surface available to mark the selection —\n     that branch is preserved on both maps. Radius drops from `card` (12px, a container\n     value) to `control` (5px), which is what `control()` gives the item itself, so the\n     forced-colors mark traces the segment instead of overshooting it.\n     `isDisabled` is dropped from both maps deliberately: over a transparent resting\n     state a disabled-only border/fill would appear out of nowhere; the disabled label\n     colour on the item above is the surviving signal. */\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  borderRadius: \"control\",\n  backgroundColor: {\n    default: \"transparent\",\n    forcedColors: \"Highlight\",\n  },\n  pointerEvents: \"none\",\n});\n\nconst itemContent = style({\n  position: \"relative\",\n  zIndex: 1,\n  display: \"flex\",\n  gap: \"text-to-visual\",\n  alignItems: \"center\",\n  minWidth: 0,\n  transition: \"default\",\n});\n\nconst itemText = style({\n  order: 1,\n  truncate: true,\n});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport function SegmentedControl(props: SegmentedControlProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"children\",\n    \"isJustified\",\n    \"selectedKey\",\n    \"defaultSelectedKey\",\n    \"onSelectionChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n\n  const selectedKeys = () => (local.selectedKey != null ? [local.selectedKey] : undefined);\n  const defaultSelectedKeys = () =>\n    local.defaultSelectedKey != null ? [local.defaultSelectedKey] : undefined;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(segmentedControl.toString() as StyleString, mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButtonGroup\n      {...headlessProps}\n      selectionMode=\"single\"\n      disallowEmptySelection\n      orientation=\"horizontal\"\n      selectedKeys={selectedKeys()}\n      defaultSelectedKeys={defaultSelectedKeys()}\n      onSelectionChange={(keys) => {\n        const firstKey = keys.values().next().value;\n        if (firstKey != null) {\n          local.onSelectionChange?.(firstKey);\n        }\n      }}\n      ref={(element) => assignRef(element)}\n      slot={local.slot ?? undefined}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-justified={local.isJustified ? \"true\" : undefined}\n      data-disabled={headlessProps.isDisabled ? \"true\" : undefined}\n    >\n      {() => (\n        <SharedElementTransition>\n          <DefaultSelectionTracker\n            defaultSelectedKey={local.defaultSelectedKey}\n            selectedKey={local.selectedKey}\n            isJustified={local.isJustified}\n          >\n            {local.children}\n          </DefaultSelectionTracker>\n        </SharedElementTransition>\n      )}\n    </HeadlessToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: {\n  children?: JSX.Element;\n  defaultSelectedKey?: Key;\n  selectedKey?: Key | null;\n  isJustified?: boolean;\n}): JSX.Element {\n  const state = useToggleButtonGroupStateContext();\n  let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;\n\n  const contextValue: InternalSegmentedControlContextValue = {\n    register(id: Key) {\n      if (!state || isRegistered) {\n        return;\n      }\n      isRegistered = true;\n      state.toggleKey(id);\n    },\n    get isJustified() {\n      return props.isJustified;\n    },\n  };\n\n  return (\n    <InternalSegmentedControlContext.Provider value={contextValue}>\n      {props.children}\n    </InternalSegmentedControlContext.Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element {\n  const context = useContext(InternalSegmentedControlContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n\n  onMount(() => context.register?.(local.id));\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        segmentedControlItem({\n          ...renderProps,\n          isJustified: context.isJustified,\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties => {\n    const style = { ...(local.UNSAFE_style ?? {}) } as JSX.CSSProperties;\n    const styleRecord = style as Record<string, string | number | undefined>;\n    const willChange = styleRecord[\"will-change\"] ?? \"\";\n    styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n    if (renderProps.isPressed && buttonElement) {\n      const { width, height } = buttonElement.getBoundingClientRect();\n      const perspective = Math.max(height, width / 3, 24);\n      const transform = style.transform ?? \"\";\n      style.transform = `${transform} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n    }\n\n    return style;\n  };\n\n  function SegmentContent(renderProps: ToggleButtonRenderProps) {\n    const resolvedChildren = resolveChildren(() => local.children);\n    const content = () => resolvedChildren();\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0, flexShrink: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        flexShrink: 0,\n      }),\n    };\n\n    return (\n      <>\n        <SelectionIndicator isSelected={renderProps.isSelected} class={selectionIndicator} />\n        <IconContext.Provider value={iconContextValue}>\n          <span class={itemContent}>\n            {typeof content() === \"string\" ? (\n              <span class={itemText} data-rsp-slot=\"text\">\n                {content()}\n              </span>\n            ) : (\n              content()\n            )}\n          </span>\n        </IconContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      id={local.id}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-segmented-control-item=\"\"\n    >\n      {(renderProps) => <SegmentContent {...renderProps} />}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}

package/dist/segmentedcontrol/index.jsx

@@ -53,14 +53,11 @@ const segmentedControlItem = function anonymous(props) {
 		rules += " _FnuYUweb151";
 	}
 	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isSelected) if (props.isPressed) rules += " pOzYCcc151";
-	else if (props.isFocusVisible) rules += " pOzYCcc151";
-	else if (props.isHovered) rules += " pOzYCcc151";
-	else rules += " p5dxOg151";
+	else if (props.isSelected) rules += " p9ck5ue151";
 	else if (props.isPressed) rules += " pQKeKoe151";
 	else if (props.isFocusVisible) rules += " pQKeKoe151";
 	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	rules += " sd151";
 	rules += " eb151";
 	rules += " _oa151";

package/dist/segmentedcontrol/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","names":[],"sources":["../../src/segmentedcontrol/index.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  createContext,\n  type JSX,\n  mergeProps,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  SelectionIndicator,\n  SharedElementTransition,\n  ToggleButton as HeadlessToggleButton,\n  ToggleButtonGroup as HeadlessToggleButtonGroup,\n  useToggleButtonGroupStateContext,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, fontRelative, focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { control } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { useProviderProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport interface SegmentedControlProps extends Omit<\n  HeadlessToggleButtonGroupProps,\n  | \"children\"\n  | \"class\"\n  | \"style\"\n  | \"selectionMode\"\n  | \"selectedKeys\"\n  | \"defaultSelectedKeys\"\n  | \"onSelectionChange\"\n  | \"orientation\"\n  | \"slot\"\n  | \"ref\"\n> {\n  /** The content to display in the segmented control. */\n  children?: JSX.Element;\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean;\n  /** The id of the currently selected item. */\n  selectedKey?: Key | null;\n  /** The id of the initially selected item. */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the underlying radiogroup element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SegmentedControlItemProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"children\" | \"class\" | \"style\" | \"isSelected\" | \"defaultSelected\" | \"onChange\"\n> {\n  /** The id of the item, matching the value used in SegmentedControl's selectedKey prop. */\n  id: Key;\n  /** The content to display in the segmented control item. */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\nexport const SegmentedControlContext =\n  createContext<SpectrumContextValue<SegmentedControlProps>>(null);\n\ninterface InternalSegmentedControlContextValue {\n  register?: (id: Key) => void;\n  isJustified?: boolean;\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextValue>({});\n\nconst segmentedControl = style({\n  display: \"flex\",\n  gap: 4,\n  /* No track. The register's segmented control is bare mono labels in a flex row —\n     `day / [week] / month` — with no background, border or radius of their own\n     (TerminalGlassLab.tsx:443-459, SEGMENTS at :21-25). What was here instead was two\n     raw light-dark() literals, rgb(233,233,233) / rgb(44,44,44), which answer to no\n     token in either scheme and so could not follow a theme flip. The radius goes with\n     the fill: with nothing painted there is no corner to round. */\n  width: \"fit\",\n});\n\nconst segmentedControlItem = style<ToggleButtonRenderProps & { isJustified?: boolean }>({\n  ...focusRing(),\n  ...control({ shape: \"default\", icon: true, rim: false }),\n  justifyContent: \"center\",\n  position: \"relative\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  /* With the plate gone, ink is the ONLY selection signal — which is how the register\n     does it: the selected segment is `var(--accent-primary)` and its siblings are\n     `var(--text-tertiary)` (TerminalGlassLab.tsx:21-25). neutral-subdued vs neutral was\n     too small a step to carry selection on its own. `accent` is the semantic ink stop,\n     the same one link/picker/combobox use; it refs accent-color-900, which this library\n     re-points at the brand blue ramp (glasselated-ramps.ts). */\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isSelected: baseColor(\"accent\"),\n    isDisabled: \"disabled\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  flexGrow: {\n    isJustified: 1,\n  },\n  flexBasis: {\n    isJustified: 0,\n  },\n  flexShrink: 0,\n  whiteSpace: \"nowrap\",\n  userSelect: \"none\",\n  forcedColorAdjust: \"none\",\n  zIndex: {\n    default: 1,\n    isSelected: 0,\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\n/* No type parameter, and not called as a function below: every condition in this object is\n   static (`forcedColors`), so the macro bakes it to a plain class string rather than to a\n   selector function. Invoking it throws \"selectionIndicator is not a function\" at render.\n   Re-adding a runtime-prop condition here means restoring the call form at the usage site. */\nconst selectionIndicator = style({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"full\",\n  height: \"full\",\n  contain: \"strict\",\n  transition: {\n    default: \"[translate,width]\",\n    \"@media (prefers-reduced-motion: reduce)\": \"none\",\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: \"out\",\n  boxSizing: \"border-box\",\n  /* The indicator paints nothing in either scheme: the register signals selection with\n     ink, not with a bordered plate (TerminalGlassLab.tsx:443-459). The element is kept\n     rather than deleted because it carries the translate/width transition above and,\n     in forced-colors mode, is still the only surface available to mark the selection —\n     that branch is preserved on both maps. Radius drops from `card` (12px, a container\n     value) to `control` (5px), which is what `control()` gives the item itself, so the\n     forced-colors mark traces the segment instead of overshooting it.\n     `isDisabled` is dropped from both maps deliberately: over a transparent resting\n     state a disabled-only border/fill would appear out of nowhere; the disabled label\n     colour on the item above is the surviving signal. */\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  borderRadius: \"control\",\n  backgroundColor: {\n    default: \"transparent\",\n    forcedColors: \"Highlight\",\n  },\n  pointerEvents: \"none\",\n});\n\nconst itemContent = style({\n  position: \"relative\",\n  zIndex: 1,\n  display: \"flex\",\n  gap: \"text-to-visual\",\n  alignItems: \"center\",\n  minWidth: 0,\n  transition: \"default\",\n});\n\nconst itemText = style({\n  order: 1,\n  truncate: true,\n});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport function SegmentedControl(props: SegmentedControlProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"children\",\n    \"isJustified\",\n    \"selectedKey\",\n    \"defaultSelectedKey\",\n    \"onSelectionChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n\n  const selectedKeys = () => (local.selectedKey != null ? [local.selectedKey] : undefined);\n  const defaultSelectedKeys = () =>\n    local.defaultSelectedKey != null ? [local.defaultSelectedKey] : undefined;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(segmentedControl.toString() as StyleString, mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButtonGroup\n      {...headlessProps}\n      selectionMode=\"single\"\n      disallowEmptySelection\n      orientation=\"horizontal\"\n      selectedKeys={selectedKeys()}\n      defaultSelectedKeys={defaultSelectedKeys()}\n      onSelectionChange={(keys) => {\n        const firstKey = keys.values().next().value;\n        if (firstKey != null) {\n          local.onSelectionChange?.(firstKey);\n        }\n      }}\n      ref={(element) => assignRef(element)}\n      slot={local.slot ?? undefined}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-justified={local.isJustified ? \"true\" : undefined}\n      data-disabled={headlessProps.isDisabled ? \"true\" : undefined}\n    >\n      {() => (\n        <SharedElementTransition>\n          <DefaultSelectionTracker\n            defaultSelectedKey={local.defaultSelectedKey}\n            selectedKey={local.selectedKey}\n            isJustified={local.isJustified}\n          >\n            {local.children}\n          </DefaultSelectionTracker>\n        </SharedElementTransition>\n      )}\n    </HeadlessToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: {\n  children?: JSX.Element;\n  defaultSelectedKey?: Key;\n  selectedKey?: Key | null;\n  isJustified?: boolean;\n}): JSX.Element {\n  const state = useToggleButtonGroupStateContext();\n  let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;\n\n  const contextValue: InternalSegmentedControlContextValue = {\n    register(id: Key) {\n      if (!state || isRegistered) {\n        return;\n      }\n      isRegistered = true;\n      state.toggleKey(id);\n    },\n    get isJustified() {\n      return props.isJustified;\n    },\n  };\n\n  return (\n    <InternalSegmentedControlContext.Provider value={contextValue}>\n      {props.children}\n    </InternalSegmentedControlContext.Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element {\n  const context = useContext(InternalSegmentedControlContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n\n  onMount(() => context.register?.(local.id));\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        segmentedControlItem({\n          ...renderProps,\n          isJustified: context.isJustified,\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties => {\n    const style = { ...(local.UNSAFE_style ?? {}) } as JSX.CSSProperties;\n    const styleRecord = style as Record<string, string | number | undefined>;\n    const willChange = styleRecord[\"will-change\"] ?? \"\";\n    styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n    if (renderProps.isPressed && buttonElement) {\n      const { width, height } = buttonElement.getBoundingClientRect();\n      const perspective = Math.max(height, width / 3, 24);\n      const transform = style.transform ?? \"\";\n      style.transform = `${transform} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n    }\n\n    return style;\n  };\n\n  function SegmentContent(renderProps: ToggleButtonRenderProps) {\n    const resolvedChildren = resolveChildren(() => local.children);\n    const content = () => resolvedChildren();\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0, flexShrink: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        flexShrink: 0,\n      }),\n    };\n\n    return (\n      <>\n        <SelectionIndicator isSelected={renderProps.isSelected} class={selectionIndicator} />\n        <IconContext.Provider value={iconContextValue}>\n          <span class={itemContent}>\n            {typeof content() === \"string\" ? (\n              <span class={itemText} data-rsp-slot=\"text\">\n                {content()}\n              </span>\n            ) : (\n              content()\n            )}\n          </span>\n        </IconContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      id={local.id}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-segmented-control-item=\"\"\n    >\n      {(renderProps) => <SegmentContent {...renderProps} />}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/segmentedcontrol/index.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  createContext,\n  type JSX,\n  mergeProps,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  SelectionIndicator,\n  SharedElementTransition,\n  ToggleButton as HeadlessToggleButton,\n  ToggleButtonGroup as HeadlessToggleButtonGroup,\n  useToggleButtonGroupStateContext,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, fontRelative, focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { control } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { useProviderProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport interface SegmentedControlProps extends Omit<\n  HeadlessToggleButtonGroupProps,\n  | \"children\"\n  | \"class\"\n  | \"style\"\n  | \"selectionMode\"\n  | \"selectedKeys\"\n  | \"defaultSelectedKeys\"\n  | \"onSelectionChange\"\n  | \"orientation\"\n  | \"slot\"\n  | \"ref\"\n> {\n  /** The content to display in the segmented control. */\n  children?: JSX.Element;\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean;\n  /** The id of the currently selected item. */\n  selectedKey?: Key | null;\n  /** The id of the initially selected item. */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the underlying radiogroup element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SegmentedControlItemProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"children\" | \"class\" | \"style\" | \"isSelected\" | \"defaultSelected\" | \"onChange\"\n> {\n  /** The id of the item, matching the value used in SegmentedControl's selectedKey prop. */\n  id: Key;\n  /** The content to display in the segmented control item. */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\nexport const SegmentedControlContext =\n  createContext<SpectrumContextValue<SegmentedControlProps>>(null);\n\ninterface InternalSegmentedControlContextValue {\n  register?: (id: Key) => void;\n  isJustified?: boolean;\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextValue>({});\n\nconst segmentedControl = style({\n  display: \"flex\",\n  gap: 4,\n  /* No track. The register's segmented control is bare mono labels in a flex row —\n     `day / [week] / month` — with no background, border or radius of their own\n     (TerminalGlassLab.tsx:443-459, SEGMENTS at :21-25). What was here instead was two\n     raw light-dark() literals, rgb(233,233,233) / rgb(44,44,44), which answer to no\n     token in either scheme and so could not follow a theme flip. The radius goes with\n     the fill: with nothing painted there is no corner to round. */\n  width: \"fit\",\n});\n\nconst segmentedControlItem = style<ToggleButtonRenderProps & { isJustified?: boolean }>({\n  ...focusRing(),\n  ...control({ shape: \"default\", icon: true, rim: false }),\n  justifyContent: \"center\",\n  position: \"relative\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  /* With the plate gone, ink is the ONLY selection signal — which is how the register\n     does it: the selected segment is accent ink and its siblings are secondary ink\n     (TerminalGlassLab.tsx:21-25). The decorative `--accent-primary` is only 2.98:1 on\n     the daylight panel, so text consumes the scheme-specific `--text-link` role instead:\n     it preserves the blue selection signal while meeting AA on every published surface.\n     `viviana-tokens.css` owns the actual register values for both schemes. */\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isSelected: \"[var(--text-link)]\",\n    isDisabled: \"disabled\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  flexGrow: {\n    isJustified: 1,\n  },\n  flexBasis: {\n    isJustified: 0,\n  },\n  flexShrink: 0,\n  whiteSpace: \"nowrap\",\n  userSelect: \"none\",\n  forcedColorAdjust: \"none\",\n  zIndex: {\n    default: 1,\n    isSelected: 0,\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\n/* No type parameter, and not called as a function below: every condition in this object is\n   static (`forcedColors`), so the macro bakes it to a plain class string rather than to a\n   selector function. Invoking it throws \"selectionIndicator is not a function\" at render.\n   Re-adding a runtime-prop condition here means restoring the call form at the usage site. */\nconst selectionIndicator = style({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"full\",\n  height: \"full\",\n  contain: \"strict\",\n  transition: {\n    default: \"[translate,width]\",\n    \"@media (prefers-reduced-motion: reduce)\": \"none\",\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: \"out\",\n  boxSizing: \"border-box\",\n  /* The indicator paints nothing in either scheme: the register signals selection with\n     ink, not with a bordered plate (TerminalGlassLab.tsx:443-459). The element is kept\n     rather than deleted because it carries the translate/width transition above and,\n     in forced-colors mode, is still the only surface available to mark the selection —\n     that branch is preserved on both maps. Radius drops from `card` (12px, a container\n     value) to `control` (5px), which is what `control()` gives the item itself, so the\n     forced-colors mark traces the segment instead of overshooting it.\n     `isDisabled` is dropped from both maps deliberately: over a transparent resting\n     state a disabled-only border/fill would appear out of nowhere; the disabled label\n     colour on the item above is the surviving signal. */\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  borderRadius: \"control\",\n  backgroundColor: {\n    default: \"transparent\",\n    forcedColors: \"Highlight\",\n  },\n  pointerEvents: \"none\",\n});\n\nconst itemContent = style({\n  position: \"relative\",\n  zIndex: 1,\n  display: \"flex\",\n  gap: \"text-to-visual\",\n  alignItems: \"center\",\n  minWidth: 0,\n  transition: \"default\",\n});\n\nconst itemText = style({\n  order: 1,\n  truncate: true,\n});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport function SegmentedControl(props: SegmentedControlProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"children\",\n    \"isJustified\",\n    \"selectedKey\",\n    \"defaultSelectedKey\",\n    \"onSelectionChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n\n  const selectedKeys = () => (local.selectedKey != null ? [local.selectedKey] : undefined);\n  const defaultSelectedKeys = () =>\n    local.defaultSelectedKey != null ? [local.defaultSelectedKey] : undefined;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(segmentedControl.toString() as StyleString, mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButtonGroup\n      {...headlessProps}\n      selectionMode=\"single\"\n      disallowEmptySelection\n      orientation=\"horizontal\"\n      selectedKeys={selectedKeys()}\n      defaultSelectedKeys={defaultSelectedKeys()}\n      onSelectionChange={(keys) => {\n        const firstKey = keys.values().next().value;\n        if (firstKey != null) {\n          local.onSelectionChange?.(firstKey);\n        }\n      }}\n      ref={(element) => assignRef(element)}\n      slot={local.slot ?? undefined}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-justified={local.isJustified ? \"true\" : undefined}\n      data-disabled={headlessProps.isDisabled ? \"true\" : undefined}\n    >\n      {() => (\n        <SharedElementTransition>\n          <DefaultSelectionTracker\n            defaultSelectedKey={local.defaultSelectedKey}\n            selectedKey={local.selectedKey}\n            isJustified={local.isJustified}\n          >\n            {local.children}\n          </DefaultSelectionTracker>\n        </SharedElementTransition>\n      )}\n    </HeadlessToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: {\n  children?: JSX.Element;\n  defaultSelectedKey?: Key;\n  selectedKey?: Key | null;\n  isJustified?: boolean;\n}): JSX.Element {\n  const state = useToggleButtonGroupStateContext();\n  let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;\n\n  const contextValue: InternalSegmentedControlContextValue = {\n    register(id: Key) {\n      if (!state || isRegistered) {\n        return;\n      }\n      isRegistered = true;\n      state.toggleKey(id);\n    },\n    get isJustified() {\n      return props.isJustified;\n    },\n  };\n\n  return (\n    <InternalSegmentedControlContext.Provider value={contextValue}>\n      {props.children}\n    </InternalSegmentedControlContext.Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element {\n  const context = useContext(InternalSegmentedControlContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n\n  onMount(() => context.register?.(local.id));\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        segmentedControlItem({\n          ...renderProps,\n          isJustified: context.isJustified,\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties => {\n    const style = { ...(local.UNSAFE_style ?? {}) } as JSX.CSSProperties;\n    const styleRecord = style as Record<string, string | number | undefined>;\n    const willChange = styleRecord[\"will-change\"] ?? \"\";\n    styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n    if (renderProps.isPressed && buttonElement) {\n      const { width, height } = buttonElement.getBoundingClientRect();\n      const perspective = Math.max(height, width / 3, 24);\n      const transform = style.transform ?? \"\";\n      style.transform = `${transform} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n    }\n\n    return style;\n  };\n\n  function SegmentContent(renderProps: ToggleButtonRenderProps) {\n    const resolvedChildren = resolveChildren(() => local.children);\n    const content = () => resolvedChildren();\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0, flexShrink: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        flexShrink: 0,\n      }),\n    };\n\n    return (\n      <>\n        <SelectionIndicator isSelected={renderProps.isSelected} class={selectionIndicator} />\n        <IconContext.Provider value={iconContextValue}>\n          <span class={itemContent}>\n            {typeof content() === \"string\" ? (\n              <span class={itemText} data-rsp-slot=\"text\">\n                {content()}\n              </span>\n            ) : (\n              content()\n            )}\n          </span>\n        </IconContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      id={local.id}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-segmented-control-item=\"\"\n    >\n      {(renderProps) => <SegmentContent {...renderProps} />}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}

package/dist/select/index.js

@@ -5,7 +5,7 @@ import { className, createComponent, effect, getNextElement, insert, memo, merge
 import { Show, createContext, createUniqueId, splitProps, useContext } from "solid-js";
 import { Select as Select$1, SelectListBox as SelectListBox$1, SelectOption as SelectOption$1, SelectTrigger as SelectTrigger$1, SelectValue as SelectValue$1 } from "@proyecto-viviana/solidaria-components";
 //#region src/select/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pUUi0Fe151">`), _tmpl$3 = /*#__PURE__*/ template(`<span class=" uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pYjUhNc151">`), _tmpl$4 = /*#__PURE__*/ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">`), _tmpl$5 = /*#__PURE__*/ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M5 13l4 4L19 7">`);
+var _tmpl$ = /*#__PURE__*/ template(`<span>`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pWQ7V3d151">`), _tmpl$3 = /*#__PURE__*/ template(`<span class=" uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pYjUhNc151">`), _tmpl$4 = /*#__PURE__*/ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">`), _tmpl$5 = /*#__PURE__*/ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M5 13l4 4L19 7">`);
 const SelectSizeContext = createContext("md");
 const rootStyles = function anonymous(props) {
 	let rules = " ";
@@ -156,7 +156,7 @@ const valueStyles = function anonymous(props) {
 	rules += " _Yb151";
 	rules += " _7c151";
 	if (props.isSelected) rules += " pHKLAu151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 const listBoxStyles = " _Pa151 _9O3Ky151 Js151 Za151 oY4qurc151 nY4qurc151 kY4qurc151 jY4qurc151 _kb151 hb151 mb151 lb151 _jf151 ifbAdGe151 g9ORGnd151 Tp151 Qp151 _nfRoCnb151 KDvO7ld151 _Na151 Pa151";
@@ -213,7 +213,7 @@ const optionStyles = function anonymous(props) {
 	else if (props.isSelected) rules += " p5dxOg151";
 	else if (props.isFocused) rules += " pHKLAu151";
 	else if (props.isHovered) rules += " pHKLAu151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	if (props.size === "lg") rules += " Sg151";
 	else if (props.size === "md") rules += " Sf151";
 	else if (props.size === "sm") rules += " Se151";

package/dist/select/index.jsx

@@ -44,7 +44,7 @@ const labelStyles = function anonymous(props) {
 	rules += " pHKLAu151";
 	return rules;
 };
-const descriptionStyles = " uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pUUi0Fe151";
+const descriptionStyles = " uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pWQ7V3d151";
 const errorStyles = " uxe7h4151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pYjUhNc151";
 const triggerStyles = function anonymous(props) {
 	let rules = " ";
@@ -154,7 +154,7 @@ const valueStyles = function anonymous(props) {
 	rules += " _Yb151";
 	rules += " _7c151";
 	if (props.isSelected) rules += " pHKLAu151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 const listBoxStyles = " _Pa151 _9O3Ky151 Js151 Za151 oY4qurc151 nY4qurc151 kY4qurc151 jY4qurc151 _kb151 hb151 mb151 lb151 _jf151 ifbAdGe151 g9ORGnd151 Tp151 Qp151 _nfRoCnb151 KDvO7ld151 _Na151 Pa151";
@@ -211,7 +211,7 @@ const optionStyles = function anonymous(props) {
 	else if (props.isSelected) rules += " p5dxOg151";
 	else if (props.isFocused) rules += " pHKLAu151";
 	else if (props.isHovered) rules += " pHKLAu151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	if (props.size === "lg") rules += " Sg151";
 	else if (props.size === "md") rules += " Sf151";
 	else if (props.size === "sm") rules += " Se151";

package/dist/selectboxgroup/index.js

@@ -86,7 +86,7 @@ const selectBoxStyles = function anonymous(props) {
 	rules += " mb151";
 	rules += " lb151";
 	if (props.isDisabled) rules += " iA151";
-	else if (props.isSelected) rules += " iI9Ko6c151";
+	else if (props.isSelected) rules += " i14vytc151";
 	else if (props.isHovered) rules += " ivsWZX151";
 	else rules += " irHHOgb151";
 	if (props.isDisabled) rules += " gkDWoNd151";

package/dist/selectboxgroup/index.jsx

@@ -84,7 +84,7 @@ const selectBoxStyles = function anonymous(props) {
 	rules += " mb151";
 	rules += " lb151";
 	if (props.isDisabled) rules += " iA151";
-	else if (props.isSelected) rules += " iI9Ko6c151";
+	else if (props.isSelected) rules += " i14vytc151";
 	else if (props.isHovered) rules += " ivsWZX151";
 	else rules += " irHHOgb151";
 	if (props.isDisabled) rules += " gkDWoNd151";

package/dist/statuslight/index.js

@@ -122,7 +122,7 @@ const lightStyles = function anonymous(props) {
 	else if (props.variant === "negative") rules += " tQQET4151";
 	else if (props.variant === "notice") rules += " tz7uc2d151";
 	else if (props.variant === "positive") rules += " tRDRLjb151";
-	else if (props.variant === "neutral") rules += " tEQPy3c151";
+	else if (props.variant === "neutral") rules += " tejacpe151";
 	else if (props.variant === "informative") rules += " tbUYvEb151";
 	rules += " _Ne151";
 	rules += " Pe151";

package/dist/statuslight/index.jsx

@@ -120,7 +120,7 @@ const lightStyles = function anonymous(props) {
 	else if (props.variant === "negative") rules += " tQQET4151";
 	else if (props.variant === "notice") rules += " tz7uc2d151";
 	else if (props.variant === "positive") rules += " tRDRLjb151";
-	else if (props.variant === "neutral") rules += " tEQPy3c151";
+	else if (props.variant === "neutral") rules += " tejacpe151";
 	else if (props.variant === "informative") rules += " tbUYvEb151";
 	rules += " _Ne151";
 	rules += " Pe151";

package/dist/steplist/index.js

@@ -94,9 +94,9 @@ const indicatorStyles = function anonymous(props) {
 	if (props.isSelected) rules += " px151";
 	else if (props.isCompleted) rules += " px151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	if (props.isSelected) rules += " gdeCgNc151";
-	else if (props.isCompleted) rules += " gfkXLC151";
+	else rules += " pWQ7V3d151";
+	if (props.isSelected) rules += " gnhAeB151";
+	else if (props.isCompleted) rules += " g4izmob151";
 	else if (props.isDisabled) rules += " gkDWoNd151";
 	else rules += " g9ORGnd151";
 	if (props.isSelected) rules += " iA151";
@@ -143,7 +143,7 @@ const labelStyles = function anonymous(props) {
 	if (props.isSelected) rules += " pHKLAu151";
 	else if (props.isCompleted) rules += " pHKLAu151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 const connectorStyles = function anonymous(props) {
@@ -156,7 +156,7 @@ const connectorStyles = function anonymous(props) {
 	rules += " Yd151";
 	rules += " Xb151";
 	rules += " _2b151";
-	if (props.isCompleted) rules += " gfkXLC151";
+	if (props.isCompleted) rules += " g4izmob151";
 	else rules += " gfbAdGe151";
 	return rules;
 };

package/dist/steplist/index.jsx

@@ -93,9 +93,9 @@ const indicatorStyles = function anonymous(props) {
 	if (props.isSelected) rules += " px151";
 	else if (props.isCompleted) rules += " px151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	if (props.isSelected) rules += " gdeCgNc151";
-	else if (props.isCompleted) rules += " gfkXLC151";
+	else rules += " pWQ7V3d151";
+	if (props.isSelected) rules += " gnhAeB151";
+	else if (props.isCompleted) rules += " g4izmob151";
 	else if (props.isDisabled) rules += " gkDWoNd151";
 	else rules += " g9ORGnd151";
 	if (props.isSelected) rules += " iA151";
@@ -142,7 +142,7 @@ const labelStyles = function anonymous(props) {
 	if (props.isSelected) rules += " pHKLAu151";
 	else if (props.isCompleted) rules += " pHKLAu151";
 	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
+	else rules += " pWQ7V3d151";
 	return rules;
 };
 const connectorStyles = function anonymous(props) {
@@ -155,7 +155,7 @@ const connectorStyles = function anonymous(props) {
 	rules += " Yd151";
 	rules += " Xb151";
 	rules += " _2b151";
-	if (props.isCompleted) rules += " gfkXLC151";
+	if (props.isCompleted) rules += " g4izmob151";
 	else rules += " gfbAdGe151";
 	return rules;
 };

package/dist/style/glasselated-ramps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glasselated-ramps.d.ts","sourceRoot":"","sources":["../../src/style/glasselated-ramps.ts"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA4P3C,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAO9D,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAOvD,CAAC"}
+{"version":3,"file":"glasselated-ramps.d.ts","sourceRoot":"","sources":["../../src/style/glasselated-ramps.ts"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAoQ3C,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAQ9D,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAOvD,CAAC"}

package/dist/style/index.js

@@ -36502,7 +36502,7 @@ const RAMPS = {
 		200: ["#dbe3ed", "#555c64"],
 		300: ["#c4d0de", "#67717d"],
 		400: ["#94a3b8", "#7c8794"],
-		500: ["#64748b", "#9aa0a8"],
+		500: ["#556478", "#a0a6ae"],
 		600: ["#465569", "#a8b2c0"],
 		700: ["#33455c", "#b9c4d6"],
 		800: ["#17212e", "#f2f3f5"],
@@ -36516,7 +36516,7 @@ const RAMPS = {
 		400: ["#bfd9fe", "#2d415d"],
 		500: ["#9cc4fc", "#2f507f"],
 		600: ["#7bb0fa", "#2e5fa1"],
-		700: ["#5c9ff9", "#407fc1"],
+		700: ["#5c9ff9", "#3670ae"],
 		800: ["#398dfa", "#267ce7"],
 		900: ["#2e90fa", "#2e90fa"],
 		1e3: ["#0e64c8", "#569eff"],
@@ -36605,6 +36605,11 @@ const SEMANTIC_OVERRIDES = {
 	notice: RAMPS.amber
 };
 const glasselatedCreateColors = {
+	"interactive-fill": {
+		type: "color",
+		light: "#135fc0",
+		dark: "#3670ae"
+	},
 	"create-bg": {
 		type: "color",
 		light: "#ffedb0",
@@ -37132,20 +37137,24 @@ const style = createTheme({
 		}),
 		backgroundColor: new SpectrumColorProperty("backgroundColor", {
 			...baseColors,
-			accent: {
-				type: "ref",
-				light: "accent-900",
-				dark: "accent-700"
-			},
+			accent: baseColors["interactive-fill"],
 			"accent-subtle": weirdColorToken("accent-subtle-background-color-default"),
 			neutral: colorToken("neutral-background-color-default"),
 			"neutral-subdued": weirdColorToken("neutral-subdued-background-color-default"),
 			"neutral-subtle": weirdColorToken("neutral-subtle-background-color-default"),
-			negative: weirdColorToken("negative-background-color-default"),
+			negative: {
+				type: "ref",
+				light: "negative-900",
+				dark: "negative-700"
+			},
 			"negative-subtle": weirdColorToken("negative-subtle-background-color-default"),
 			informative: weirdColorToken("informative-background-color-default"),
 			"informative-subtle": weirdColorToken("informative-subtle-background-color-default"),
-			positive: weirdColorToken("positive-background-color-default"),
+			positive: {
+				type: "ref",
+				light: "positive-900",
+				dark: "positive-700"
+			},
 			"positive-subtle": weirdColorToken("positive-subtle-background-color-default"),
 			notice: weirdColorToken("notice-background-color-default"),
 			"notice-subtle": weirdColorToken("notice-subtle-background-color-default"),