@primer/react-brand 0.81.0 → 0.81.1-rc.019987d3

package/esm/forms/ToggleSwitch/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import React, {forwardRef, useEffect, useState, type ButtonHTMLAttributes, type MouseEventHandler} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {Spinner} from '../../Spinner/Spinner'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css'\nimport styles from './ToggleSwitch.module.css'\n\ntype ToggleSwitchSize = 'small' | 'medium'\ntype ToggleSwitchSpinnerPosition = 'start' | 'end'\n\ntype ToggleSwitchButtonPropKeysToOmit =\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-disabled'\n  | 'children'\n  | 'onChange'\n  | 'role'\n  | 'type'\n\nexport type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, ToggleSwitchButtonPropKeysToOmit> & {\n  'data-testid'?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  onChange?: (checked: boolean) => void\n  loading?: boolean\n  size?: ToggleSwitchSize\n  loadingLabel?: string\n  loadingLabelDelay?: number\n  spinnerPosition?: ToggleSwitchSpinnerPosition\n}\n\nexport type ToggleSwitchInternalProps = ToggleSwitchProps & {\n  toggleSwitchSpinnerInLabel?: boolean\n}\n\nconst testIds = {\n  root: 'ToggleSwitch',\n  spinner: 'ToggleSwitch-spinner',\n  loadingAnnouncement: 'ToggleSwitch-loading-announcement',\n}\n\ntype ToggleSwitchComponent = React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>\n\nconst Root: ToggleSwitchComponent = forwardRef<HTMLButtonElement, ToggleSwitchInternalProps>(function ToggleSwitch(\n  {\n    checked,\n    defaultChecked = false,\n    onChange,\n    onClick,\n    disabled = false,\n    loading = false,\n    size = 'medium',\n    loadingLabel = 'Loading',\n    loadingLabelDelay = 2000,\n    spinnerPosition = 'end',\n    toggleSwitchSpinnerInLabel = false,\n    id,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'data-testid': testId,\n    ...rest\n  },\n  ref,\n) {\n  const uniqueId = useId(id)\n  const loadingId = `${uniqueId}-loading`\n  const [internalChecked, setInternalChecked] = useState(defaultChecked)\n  const [announceLoading, setAnnounceLoading] = useState(false)\n  const isChecked = checked ?? internalChecked\n\n  useEffect(() => {\n    setAnnounceLoading(false)\n    if (!loading) return\n\n    const timeout = setTimeout(() => setAnnounceLoading(true), Math.max(0, loadingLabelDelay))\n    return () => clearTimeout(timeout)\n  }, [loading, loadingLabelDelay])\n\n  const describedBy =\n    [ariaDescribedBy, loading && announceLoading && loadingLabel && loadingId].filter(Boolean).join(' ') || undefined\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    onClick?.(event)\n    if (event.defaultPrevented) return\n\n    const nextChecked = !isChecked\n    if (checked === undefined) setInternalChecked(nextChecked)\n    onChange?.(nextChecked)\n  }\n\n  const spinnerElement =\n    !toggleSwitchSpinnerInLabel && loading ? (\n      <span className={styles['ToggleSwitch-spinnerSlot']} aria-hidden=\"true\">\n        <Spinner\n          size=\"small\"\n          accessibleLabel={null}\n          className={styles['ToggleSwitch-spinner']}\n          data-testid={testIds.spinner}\n        />\n      </span>\n    ) : null\n\n  return (\n    <div\n      className={clsx(styles.ToggleSwitch, styles[`ToggleSwitch--${size}`], className)}\n      data-testid={testId || testIds.root}\n    >\n      {spinnerPosition === 'start' && spinnerElement}\n      <button\n        {...rest}\n        id={uniqueId}\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid}\n        className={clsx(styles['ToggleSwitch-button'], disabled && styles['ToggleSwitch-button--unavailable'])}\n        onClick={handleClick}\n      >\n        <span className={styles['ToggleSwitch-track']} aria-hidden=\"true\">\n          <span\n            className={clsx(\n              styles['ToggleSwitch-thumb'],\n              isChecked && styles['ToggleSwitch-thumb--checked'],\n              disabled && styles['ToggleSwitch-thumb--disabled'],\n            )}\n          />\n        </span>\n      </button>\n      {spinnerPosition === 'end' && spinnerElement}\n      <span\n        id={loadingId}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"visually-hidden\"\n        data-testid={testIds.loadingAnnouncement}\n      >\n        {loading && announceLoading ? loadingLabel : null}\n      </span>\n    </div>\n  )\n})\n\n/**\n * Use ToggleSwitch for settings that take effect immediately.\n * @see https://primer.style/brand/forms/ToggleSwitch\n */\nexport const ToggleSwitch = Object.assign(Root, {testIds})\n"],"mappings":";;;;;;;;;AAqCA,IAAM,IAAU;CACd,MAAM;CACN,SAAS;CACT,qBAAqB;AACvB,GAIM,IAA8B,EAAyD,SAC3F,EACE,YACA,oBAAiB,IACjB,aACA,YACA,cAAW,IACX,aAAU,IACV,UAAO,UACP,kBAAe,WACf,uBAAoB,KACpB,qBAAkB,OAClB,gCAA6B,IAC7B,OACA,cACA,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,gBAAgB,GAChB,eAAe,GACf,GAAG,KAEL,GACA;CACA,IAAM,IAAW,EAAM,CAAE,GACnB,IAAY,GAAG,EAAS,WACxB,CAAC,GAAiB,KAAsB,EAAS,CAAc,GAC/D,CAAC,GAAiB,KAAsB,EAAS,EAAK,GACtD,IAAY,KAAW;CAE7B,QAAgB;EAEd,IADA,EAAmB,EAAK,GACpB,CAAC,GAAS;EAEd,IAAM,IAAU,iBAAiB,EAAmB,EAAI,GAAG,KAAK,IAAI,GAAG,CAAiB,CAAC;EACzF,aAAa,aAAa,CAAO;CACnC,GAAG,CAAC,GAAS,CAAiB,CAAC;CAE/B,IAAM,IACJ,CAAC,GAAiB,KAAW,KAAmB,KAAgB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,GAEpG,KAAoD,MAAS;EACjE,IAAI,GAAU;GAEZ,AADA,EAAM,eAAe,GACrB,EAAM,gBAAgB;GACtB;EACF;EAGA,IADA,IAAU,CAAK,GACX,EAAM,kBAAkB;EAE5B,IAAM,IAAc,CAAC;EAErB,AADI,MAAY,KAAA,KAAW,EAAmB,CAAW,GACzD,IAAW,CAAW;CACxB,GAEM,IACJ,CAAC,KAA8B,IAC7B,kBAAC,QAAD;EAAM,WAAW,EAAO;EAA6B,eAAY;YAC/D,kBAAC,GAAD;GACE,MAAK;GACL,iBAAiB;GACjB,WAAW,EAAO;GAClB,eAAa,EAAQ;EACtB,CAAA;CACG,CAAA,IACJ;CAEN,OACE,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,iBAAiB,MAAS,CAAS;EAC/E,eAAa,KAAU,EAAQ;YAFjC;GAIG,MAAoB,WAAW;GAChC,kBAAC,UAAD;IACE,GAAI;IACJ,IAAI;IACC;IACL,MAAK;IACL,MAAK;IACL,gBAAc;IACd,iBAAe,KAAY,KAAA;IAC3B,aAAW,KAAW,KAAA;IACtB,cAAY;IACZ,mBAAiB;IACjB,oBAAkB;IAClB,gBAAc;IACd,WAAW,EAAK,EAAO,wBAAwB,KAAY,EAAO,mCAAmC;IACrG,SAAS;cAET,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAuB,eAAY;eACzD,kBAAC,QAAD,EACE,WAAW,EACT,EAAO,uBACP,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACrB,EACD,CAAA;IACG,CAAA;GACA,CAAA;GACP,MAAoB,SAAS;GAC9B,kBAAC,QAAD;IACE,IAAI;IACJ,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAU;IACV,eAAa,EAAQ;cAEpB,KAAW,IAAkB,IAAe;GACzC,CAAA;EACH;;AAET,CAAC,GAMY,IAAe,OAAO,OAAO,GAAM,EAAC,WAAO,CAAC"}
+{"version":3,"file":"ToggleSwitch.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import React, {forwardRef, useEffect, useRef, useState, type ButtonHTMLAttributes, type MouseEventHandler} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {Spinner} from '../../Spinner/Spinner'\nimport {Text} from '../../Text/Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes.css'\nimport styles from './ToggleSwitch.module.css'\n\ntype ToggleSwitchSize = 'small' | 'medium'\ntype ToggleSwitchSpinnerPosition = 'start' | 'end'\ntype ToggleSwitchStatusLabelPosition = 'start' | 'end'\ntype ToggleSwitchLabels = {\n  on?: string\n  off?: string\n}\n\ntype ToggleSwitchButtonPropKeysToOmit =\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-disabled'\n  | 'children'\n  | 'onChange'\n  | 'role'\n  | 'type'\n\nexport type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, ToggleSwitchButtonPropKeysToOmit> & {\n  'data-testid'?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  onChange?: (checked: boolean) => void\n  loading?: boolean\n  size?: ToggleSwitchSize\n  loadingLabel?: string\n  loadingLabelDelay?: number\n  spinnerPosition?: ToggleSwitchSpinnerPosition\n  hasStatusLabel?: boolean\n  statusLabelPosition?: ToggleSwitchStatusLabelPosition\n  labels?: ToggleSwitchLabels\n}\n\nexport type ToggleSwitchInternalProps = ToggleSwitchProps & {\n  toggleSwitchSpinnerInLabel?: boolean\n}\n\nconst testIds = {\n  root: 'ToggleSwitch',\n  spinner: 'ToggleSwitch-spinner',\n  loadingAnnouncement: 'ToggleSwitch-loading-announcement',\n  statusAnnouncement: 'ToggleSwitch-status-announcement',\n  statusLabel: 'ToggleSwitch-status-label',\n}\n\ntype ToggleSwitchComponent = React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>\n\nconst Root: ToggleSwitchComponent = forwardRef<HTMLButtonElement, ToggleSwitchInternalProps>(function ToggleSwitch(\n  {\n    checked,\n    defaultChecked = false,\n    onChange,\n    onClick,\n    disabled = false,\n    loading = false,\n    size = 'medium',\n    loadingLabel = 'Loading',\n    loadingLabelDelay = 2000,\n    spinnerPosition = 'end',\n    hasStatusLabel = false,\n    statusLabelPosition = 'start',\n    labels: {on: statusLabelOn = 'On', off: statusLabelOff = 'Off'} = {},\n    toggleSwitchSpinnerInLabel = false,\n    id,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'data-testid': testId,\n    ...rest\n  },\n  ref,\n) {\n  const uniqueId = useId(id)\n  const statusDescriptionId = useId()\n  const loadingId = `${uniqueId}-loading`\n  const [internalChecked, setInternalChecked] = useState(defaultChecked)\n  const [announceLoading, setAnnounceLoading] = useState(false)\n  const [statusAnnouncement, setStatusAnnouncement] = useState('')\n  const [pendingStatusChange, setPendingStatusChange] = useState<boolean | null>(null)\n  const isChecked = checked ?? internalChecked\n  const activeStatusLabel = isChecked ? statusLabelOn : statusLabelOff\n  const defaultStatusLabel = isChecked ? 'On' : 'Off'\n  const hasCustomStatusLabels = statusLabelOn !== 'On' || statusLabelOff !== 'Off'\n  const hasStatusDescription = hasStatusLabel && activeStatusLabel !== defaultStatusLabel\n  const previousChecked = useRef(isChecked)\n\n  useEffect(() => {\n    const stateChanged = previousChecked.current !== isChecked\n    previousChecked.current = isChecked\n\n    if (stateChanged) {\n      setStatusAnnouncement(pendingStatusChange === isChecked && hasStatusDescription ? activeStatusLabel : '')\n    } else {\n      setStatusAnnouncement(current => (hasStatusDescription && current === activeStatusLabel ? current : ''))\n    }\n\n    if (pendingStatusChange !== null) setPendingStatusChange(null)\n  }, [activeStatusLabel, hasStatusDescription, isChecked, pendingStatusChange])\n\n  useEffect(() => {\n    setAnnounceLoading(false)\n    if (!loading) return\n\n    const timeout = setTimeout(() => setAnnounceLoading(true), Math.max(0, loadingLabelDelay))\n    return () => clearTimeout(timeout)\n  }, [loading, loadingLabelDelay])\n\n  const describedBy =\n    [\n      hasStatusDescription && statusDescriptionId,\n      ariaDescribedBy,\n      loading && announceLoading && loadingLabel && loadingId,\n    ]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    onClick?.(event)\n    if (event.defaultPrevented) return\n\n    const nextChecked = !isChecked\n    if (hasStatusLabel && hasCustomStatusLabels) setPendingStatusChange(nextChecked)\n    if (checked === undefined) setInternalChecked(nextChecked)\n    onChange?.(nextChecked)\n  }\n\n  const spinnerElement =\n    !toggleSwitchSpinnerInLabel && loading ? (\n      <span className={styles['ToggleSwitch-spinnerSlot']} aria-hidden=\"true\">\n        <Spinner\n          size=\"small\"\n          accessibleLabel={null}\n          className={styles['ToggleSwitch-spinner']}\n          data-testid={testIds.spinner}\n        />\n      </span>\n    ) : null\n\n  // Both labels share one grid cell so the wider label reserves space and state changes do not shift layout.\n  const statusLabelElement = hasStatusLabel ? (\n    <span\n      className={clsx(styles['ToggleSwitch-statusLabel'], styles[`ToggleSwitch-statusLabel--${statusLabelPosition}`])}\n      aria-hidden=\"true\"\n      data-testid={testIds.statusLabel}\n    >\n      <Text\n        as=\"span\"\n        size=\"100\"\n        variant=\"muted\"\n        className={clsx(\n          styles['ToggleSwitch-statusLabelText'],\n          !isChecked && styles['ToggleSwitch-statusLabelText--hidden'],\n        )}\n      >\n        {statusLabelOn}\n      </Text>\n      <Text\n        as=\"span\"\n        size=\"100\"\n        variant=\"muted\"\n        className={clsx(\n          styles['ToggleSwitch-statusLabelText'],\n          isChecked && styles['ToggleSwitch-statusLabelText--hidden'],\n        )}\n      >\n        {statusLabelOff}\n      </Text>\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={clsx(\n        styles.ToggleSwitch,\n        styles[`ToggleSwitch--${size}`],\n        hasStatusLabel && styles['ToggleSwitch--withStatusLabel'],\n        className,\n      )}\n      data-testid={testId || testIds.root}\n    >\n      {spinnerPosition === 'start' && spinnerElement}\n      <button\n        {...rest}\n        id={uniqueId}\n        ref={ref}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid}\n        className={clsx(styles['ToggleSwitch-button'], disabled && styles['ToggleSwitch-button--unavailable'])}\n        onClick={handleClick}\n      >\n        {statusLabelPosition === 'start' && statusLabelElement}\n        <span className={styles['ToggleSwitch-track']} aria-hidden=\"true\">\n          <span\n            className={clsx(\n              styles['ToggleSwitch-thumb'],\n              isChecked && styles['ToggleSwitch-thumb--checked'],\n              disabled && styles['ToggleSwitch-thumb--disabled'],\n            )}\n          />\n        </span>\n        {statusLabelPosition === 'end' && statusLabelElement}\n      </button>\n      {spinnerPosition === 'end' && spinnerElement}\n      {hasStatusDescription ? (\n        <span id={statusDescriptionId} className=\"visually-hidden\">\n          {activeStatusLabel}\n        </span>\n      ) : null}\n      {hasStatusLabel && hasCustomStatusLabels ? (\n        <span\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          className=\"visually-hidden\"\n          data-testid={testIds.statusAnnouncement}\n        >\n          {statusAnnouncement}\n        </span>\n      ) : null}\n      <span\n        id={loadingId}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"visually-hidden\"\n        data-testid={testIds.loadingAnnouncement}\n      >\n        {loading && announceLoading ? loadingLabel : null}\n      </span>\n    </div>\n  )\n})\n\n/**\n * Use ToggleSwitch for settings that take effect immediately.\n * @see https://primer.style/brand/forms/ToggleSwitch\n */\nexport const ToggleSwitch = Object.assign(Root, {testIds})\n"],"mappings":"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"}

package/esm/forms/ToggleSwitch/ToggleSwitch.module-PKy9cLy8.css

@@ -0,0 +1 @@
+.Primer_Brand__ToggleSwitch-module__ToggleSwitch___jeVpE{align-items:center;gap:var(--brand-ToggleSwitch-loading-gap);vertical-align:middle;flex-shrink:0;display:inline-flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ{min-height:var(--brand-ToggleSwitch-target-minHeight);justify-content:center;align-items:center;gap:var(--base-size-8);cursor:pointer;appearance:none;background:0 0;border:0;padding:0;display:flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--withStatusLabel___LGu2L{flex-shrink:1;min-inline-size:0;max-inline-size:100%}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--withStatusLabel___LGu2L .Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ{min-inline-size:0;max-inline-size:100%}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible{outline:none}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{outline:var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);outline-offset:var(--brand-ToggleSwitch-focus-offset)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR{cursor:not-allowed}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{box-sizing:border-box;border:var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);border-radius:var(--brand-ToggleSwitch-track-borderRadius);background:var(--brand-ToggleSwitch-track-bgColor);flex:none;display:block;position:relative}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel___8gqdA{word-wrap:anywhere;min-inline-size:0;max-inline-size:100%;display:grid}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--start___gl9U_{justify-items:end}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--end___IoumP{justify-items:start}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--start___gl9U_ .Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{text-align:end}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--end___IoumP .Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{text-align:start}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{grid-area:1/1}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText--hidden___DuJ9i{visibility:hidden}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{box-sizing:border-box;border:var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);border-radius:var(--brand-ToggleSwitch-thumb-borderRadius);background:var(--brand-ToggleSwitch-thumb-off-bgColor-rest);transition:inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);position:absolute;top:50%;transform:translateY(-50%)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:var(--brand-ToggleSwitch-thumb-on-bgColor-rest)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{background:var(--brand-ToggleSwitch-thumb-off-bgColor-hover)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:var(--brand-ToggleSwitch-thumb-on-bgColor-hover)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX{background:var(--brand-ToggleSwitch-thumb-disabled-bgColor)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{width:var(--brand-ToggleSwitch-track-width-medium);height:var(--brand-ToggleSwitch-track-height-medium)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{width:var(--brand-ToggleSwitch-track-width-small);height:var(--brand-ToggleSwitch-track-height-small)}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{width:var(--brand-ToggleSwitch-thumb-size-medium);height:var(--brand-ToggleSwitch-thumb-size-medium);inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{width:var(--brand-ToggleSwitch-thumb-size-small);height:var(--brand-ToggleSwitch-thumb-size-small);inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--medium___3nBxC .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) + var(--brand-ToggleSwitch-thumb-travel-medium))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch--small___rA6Qp .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{inset-inline-start:calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) + var(--brand-ToggleSwitch-thumb-travel-small))}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinnerSlot___kHm79{flex:0 0 var(--brand-ToggleSwitch-loading-size);width:var(--brand-ToggleSwitch-loading-size);height:var(--brand-ToggleSwitch-loading-size);pointer-events:none;justify-content:center;align-items:center;display:flex}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{color:var(--brand-ToggleSwitch-loading-fgColor);animation-duration:var(--brand-ToggleSwitch-loading-duration)}@media (prefers-reduced-motion:reduce){.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{transition:none}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{animation:none}}@media (forced-colors:active){.Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{background:canvas;border-color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM,.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM{forced-color-adjust:none;background:buttontext;border-color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd,.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:not(.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR):hover .Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd{background:highlight}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX{background:graytext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ:focus-visible .Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK{outline-color:highlight}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-spinner___7lOlX{color:canvastext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{color:buttontext}.Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR .Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4{color:graytext}}

package/esm/forms/ToggleSwitch/ToggleSwitch.module.js

@@ -1,9 +1,15 @@
-import './ToggleSwitch.module-C_gXnHNW.css';//#region src/forms/ToggleSwitch/ToggleSwitch.module.css
+import './ToggleSwitch.module-PKy9cLy8.css';//#region src/forms/ToggleSwitch/ToggleSwitch.module.css
 var e = "Primer_Brand__ToggleSwitch-module__ToggleSwitch___jeVpE", t = {
 	ToggleSwitch: e,
 	"ToggleSwitch-button": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-button___OGPOZ",
+	"ToggleSwitch--withStatusLabel": "Primer_Brand__ToggleSwitch-module__ToggleSwitch--withStatusLabel___LGu2L",
 	"ToggleSwitch-track": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-track___ROVFK",
 	"ToggleSwitch-button--unavailable": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-button--unavailable___NJjiR",
+	"ToggleSwitch-statusLabel": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel___8gqdA",
+	"ToggleSwitch-statusLabel--start": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--start___gl9U_",
+	"ToggleSwitch-statusLabel--end": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabel--end___IoumP",
+	"ToggleSwitch-statusLabelText": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText____TqA4",
+	"ToggleSwitch-statusLabelText--hidden": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-statusLabelText--hidden___DuJ9i",
 	"ToggleSwitch-thumb": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb___riVjM",
 	"ToggleSwitch-thumb--checked": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--checked___y1Okd",
 	"ToggleSwitch-thumb--disabled": "Primer_Brand__ToggleSwitch-module__ToggleSwitch-thumb--disabled___V14xX",

package/esm/forms/ToggleSwitch/ToggleSwitch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.module.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.module.css"],"sourcesContent":[".ToggleSwitch {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n}\n\n.ToggleSwitch-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--brand-ToggleSwitch-target-minHeight);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n\n.ToggleSwitch-button:focus-visible {\n  outline: none;\n}\n\n.ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n  outline: var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);\n  outline-offset: var(--brand-ToggleSwitch-focus-offset);\n}\n\n.ToggleSwitch-button--unavailable {\n  cursor: not-allowed;\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);\n  border-radius: var(--brand-ToggleSwitch-track-borderRadius);\n  background: var(--brand-ToggleSwitch-track-bgColor);\n}\n\n.ToggleSwitch-thumb {\n  position: absolute;\n  top: 50%;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);\n  border-radius: var(--brand-ToggleSwitch-thumb-borderRadius);\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-rest);\n  transform: translateY(-50%);\n  transition: inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-rest);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-hover);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-hover);\n}\n\n.ToggleSwitch-thumb--disabled {\n  background: var(--brand-ToggleSwitch-thumb-disabled-bgColor);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-medium);\n  height: var(--brand-ToggleSwitch-track-height-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-small);\n  height: var(--brand-ToggleSwitch-track-height-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-medium);\n  height: var(--brand-ToggleSwitch-thumb-size-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-small);\n  height: var(--brand-ToggleSwitch-thumb-size-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-medium)\n  );\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-small)\n  );\n}\n\n.ToggleSwitch-spinnerSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--brand-ToggleSwitch-loading-size);\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  pointer-events: none;\n}\n\n.ToggleSwitch-spinner {\n  color: var(--brand-ToggleSwitch-loading-fgColor);\n  animation-duration: var(--brand-ToggleSwitch-loading-duration);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ToggleSwitch-thumb {\n    transition: none;\n  }\n\n  .ToggleSwitch-spinner {\n    animation: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .ToggleSwitch-track {\n    border-color: ButtonText;\n    background: Canvas;\n  }\n\n  .ToggleSwitch-thumb,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n    forced-color-adjust: none;\n    border-color: ButtonText;\n    background: ButtonText;\n  }\n\n  .ToggleSwitch-thumb--checked,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n    background: Highlight;\n  }\n\n  .ToggleSwitch-thumb--disabled {\n    background: GrayText;\n  }\n\n  .ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n    outline-color: Highlight;\n  }\n\n  .ToggleSwitch-spinner {\n    color: CanvasText;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ToggleSwitch.module.js","names":[],"sources":["../../../src/forms/ToggleSwitch/ToggleSwitch.module.css"],"sourcesContent":[".ToggleSwitch {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--brand-ToggleSwitch-loading-gap);\n  vertical-align: middle;\n}\n\n.ToggleSwitch-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--brand-ToggleSwitch-target-minHeight);\n  gap: var(--base-size-8);\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n\n.ToggleSwitch--withStatusLabel {\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  flex-shrink: 1;\n}\n\n.ToggleSwitch--withStatusLabel .ToggleSwitch-button {\n  min-inline-size: 0;\n  max-inline-size: 100%;\n}\n\n.ToggleSwitch-button:focus-visible {\n  outline: none;\n}\n\n.ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n  outline: var(--brand-ToggleSwitch-focus-width) solid var(--brand-color-focus);\n  outline-offset: var(--brand-ToggleSwitch-focus-offset);\n}\n\n.ToggleSwitch-button--unavailable {\n  cursor: not-allowed;\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-track-borderWidth) solid var(--brand-ToggleSwitch-track-borderColor);\n  border-radius: var(--brand-ToggleSwitch-track-borderRadius);\n  background: var(--brand-ToggleSwitch-track-bgColor);\n  flex: 0 0 auto;\n}\n\n.ToggleSwitch-statusLabel {\n  display: grid;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  overflow-wrap: anywhere;\n}\n\n.ToggleSwitch-statusLabel--start {\n  justify-items: end;\n}\n\n.ToggleSwitch-statusLabel--end {\n  justify-items: start;\n}\n\n.ToggleSwitch-statusLabel--start .ToggleSwitch-statusLabelText {\n  text-align: end;\n}\n\n.ToggleSwitch-statusLabel--end .ToggleSwitch-statusLabelText {\n  text-align: start;\n}\n\n.ToggleSwitch-statusLabelText {\n  grid-area: 1 / 1;\n}\n\n.ToggleSwitch-statusLabelText--hidden {\n  visibility: hidden;\n}\n\n.ToggleSwitch-thumb {\n  position: absolute;\n  top: 50%;\n  box-sizing: border-box;\n  border: var(--brand-ToggleSwitch-thumb-borderWidth) solid var(--brand-ToggleSwitch-thumb-borderColor);\n  border-radius: var(--brand-ToggleSwitch-thumb-borderRadius);\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-rest);\n  transform: translateY(-50%);\n  transition: inset-inline-start var(--brand-animation-duration-faster) var(--brand-animation-easing-default);\n}\n\n.ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-rest);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n  background: var(--brand-ToggleSwitch-thumb-off-bgColor-hover);\n}\n\n.ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n  background: var(--brand-ToggleSwitch-thumb-on-bgColor-hover);\n}\n\n.ToggleSwitch-thumb--disabled {\n  background: var(--brand-ToggleSwitch-thumb-disabled-bgColor);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-medium);\n  height: var(--brand-ToggleSwitch-track-height-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-track {\n  width: var(--brand-ToggleSwitch-track-width-small);\n  height: var(--brand-ToggleSwitch-track-height-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-medium);\n  height: var(--brand-ToggleSwitch-thumb-size-medium);\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb {\n  inset-inline-start: calc(var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth));\n  width: var(--brand-ToggleSwitch-thumb-size-small);\n  height: var(--brand-ToggleSwitch-thumb-size-small);\n}\n\n.ToggleSwitch--medium .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-medium) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-medium)\n  );\n}\n\n.ToggleSwitch--small .ToggleSwitch-thumb--checked {\n  inset-inline-start: calc(\n    var(--brand-ToggleSwitch-thumb-inset-small) - var(--brand-ToggleSwitch-track-borderWidth) +\n      var(--brand-ToggleSwitch-thumb-travel-small)\n  );\n}\n\n.ToggleSwitch-spinnerSlot {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 var(--brand-ToggleSwitch-loading-size);\n  width: var(--brand-ToggleSwitch-loading-size);\n  height: var(--brand-ToggleSwitch-loading-size);\n  pointer-events: none;\n}\n\n.ToggleSwitch-spinner {\n  color: var(--brand-ToggleSwitch-loading-fgColor);\n  animation-duration: var(--brand-ToggleSwitch-loading-duration);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ToggleSwitch-thumb {\n    transition: none;\n  }\n\n  .ToggleSwitch-spinner {\n    animation: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .ToggleSwitch-track {\n    border-color: ButtonText;\n    background: Canvas;\n  }\n\n  .ToggleSwitch-thumb,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb {\n    forced-color-adjust: none;\n    border-color: ButtonText;\n    background: ButtonText;\n  }\n\n  .ToggleSwitch-thumb--checked,\n  .ToggleSwitch-button:not(.ToggleSwitch-button--unavailable):hover .ToggleSwitch-thumb--checked {\n    background: Highlight;\n  }\n\n  .ToggleSwitch-thumb--disabled {\n    background: GrayText;\n  }\n\n  .ToggleSwitch-button:focus-visible .ToggleSwitch-track {\n    outline-color: Highlight;\n  }\n\n  .ToggleSwitch-spinner {\n    color: CanvasText;\n  }\n\n  .ToggleSwitch-statusLabelText {\n    color: ButtonText;\n  }\n\n  .ToggleSwitch-button--unavailable .ToggleSwitch-statusLabelText {\n    color: GrayText;\n  }\n}\n"],"mappings":""}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/toggle-switch/colors-with-modes-QUNsZVCZ.css

@@ -0,0 +1 @@
+:root,[data-color-mode=light],[data-color-mode=auto]{--brand-ToggleSwitch-track-bgColor:var(--base-color-scale-gray-0);--brand-ToggleSwitch-track-borderColor:var(--base-color-scale-gray-7);--brand-ToggleSwitch-thumb-borderColor:#00000014;--brand-ToggleSwitch-thumb-on-bgColor-rest:var(--brand-color-text-emphasized);--brand-ToggleSwitch-thumb-on-bgColor-hover:color-mix(in srgb, var(--brand-color-text-emphasized), black 16%);--brand-ToggleSwitch-thumb-off-bgColor-rest:var(--base-color-scale-gray-7);--brand-ToggleSwitch-thumb-off-bgColor-hover:var(--base-color-scale-gray-8);--brand-ToggleSwitch-thumb-disabled-bgColor:var(--base-color-scale-gray-4);--brand-ToggleSwitch-loading-fgColor:var(--brand-color-text-muted)}[data-color-mode=dark]{--brand-ToggleSwitch-track-bgColor:var(--base-color-scale-gray-7);--brand-ToggleSwitch-track-borderColor:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-borderColor:#00000014;--brand-ToggleSwitch-thumb-on-bgColor-rest:var(--base-color-scale-green-2);--brand-ToggleSwitch-thumb-on-bgColor-hover:var(--base-color-scale-green-1);--brand-ToggleSwitch-thumb-off-bgColor-rest:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-off-bgColor-hover:var(--base-color-scale-gray-1);--brand-ToggleSwitch-thumb-disabled-bgColor:var(--base-color-scale-gray-5);--brand-ToggleSwitch-loading-fgColor:var(--brand-color-text-muted)}@media (prefers-color-scheme:dark){[data-color-mode=auto]{--brand-ToggleSwitch-track-bgColor:var(--base-color-scale-gray-7);--brand-ToggleSwitch-track-borderColor:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-borderColor:#00000014;--brand-ToggleSwitch-thumb-on-bgColor-rest:var(--base-color-scale-green-2);--brand-ToggleSwitch-thumb-on-bgColor-hover:var(--base-color-scale-green-1);--brand-ToggleSwitch-thumb-off-bgColor-rest:var(--base-color-scale-gray-2);--brand-ToggleSwitch-thumb-off-bgColor-hover:var(--base-color-scale-gray-1);--brand-ToggleSwitch-thumb-disabled-bgColor:var(--base-color-scale-gray-5);--brand-ToggleSwitch-loading-fgColor:var(--brand-color-text-muted)}}