@elliemae/ds-form-toggle 3.70.0-next.48 → 3.70.0-next.50

package/dist/cjs/parts/Button.js

@@ -45,13 +45,14 @@ const widthSizeMap = {
 };
 const Button = () => {
   const { propsWithDefault, buttonProps } = import_react.default.useContext(import_DSControlledToggleCTX.ControlledToggleContext);
-  const { checked, size, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
+  const { checked, size, disabled, applyAriaDisabled, readOnly, innerRef } = propsWithDefault;
   const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styles.StyledButton,
     {
       ...readOnly ? { "aria-readonly": "true" } : {},
       ...buttonProps,
+      innerRef,
       $checked: checked,
       $readOnly: readOnly,
       $disabled: disabled,

package/dist/cjs/parts/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Button.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { ControlledToggleContext } from '../DSControlledToggleCTX.js';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { StyledButton, StyledButtonContentWrapper, StyledCircle, StyledTextWrapper } from './styles/styles.js';\n\n// What is this about?\n//  Currently the way the code is written for this component and the way this component UI/UX specs are handled\n//    there is no defiend \"dynamic\" and \"responsive\" sizes also, the font-size are hardcoded and not aligned with typography in the different \"size\" variants.\n//  In the past we accepted \"whatever\" labels for the toggle,\n//    it was discarded as non compliant for the semantic of the component that only announces and accepts the \"on\" and \"off\" meaning,\n//    as of today, wcag compliant way has an hardcoded \"ON\" and \"OFF\"/\n//  The previous implementation was relying on a dynamic calculation of the width to keep the size of the toggle button,\n//    it had it's own set of issues and was creating extra renders (see PUI-18655).\n\n// This constant is just the pre-calculated values to avoid extra javascript logic and extra renderes.\n\n// What does this means long term?\n//  - When the font-size is aligned, the component specs are made responsive and the component will support \"text resize/reflow\",\n//  - When the px will change to rem\n//  - When the component will be updated to support \"tokens\"\n//  - When/if the component will be i18n compliant and support different languages labels that are the other language version of \"on\" and \"off\" (like \"activ\u00E9\" and \"d\u00E9sactiv\u00E9\" in french)\n\n// The whole size calcualtion logic of the component needs to be reviewed and updated to not need a constant \"width\" to guarante the width to be \"the biggest of the two labels\".\n\n// The most reasonable implementation would be to:\n//  - simply render both \"on\" and \"off\" in the DOM at the same time\n//  - make the not active version influence the size but not visible (e.g. height:0, overflow:hidden)\n//  - have the width be automatically calculated by the browser to fit the longest.\n\n// I can't implement this as part of the current ticket(PUI-16323) as that would be a visual breaking change and need coordination with QA and UX.\n\n// So, short term solution:\n//  - Not responsive (in the rem, text resize WCAG sense, still is in the \"zoom\" sense as before)\n//  - Not i18n compliant\n//  - Not theming ready\n// Exactly as we never wrote the component to be, but at least it won't:\n//  - flicker\n//  - pay the cost of the WCAG non-compliant labels\n//  - hide the pending issues with aproximation that \"happens to kinda fix it\"\n// Important note -> I changed the \"width\" to \"min-width\" to keep some amount of resize/reflow WCAG compliant (zoom will keep working, font size changes won't like before),\n//  but true wcag compliance requires the component to use typography, be designed accordingly, written accordingly and rely on rem.\nconst widthSizeMap = {\n  s: 18,\n  m: 26,\n  l: 36,\n} as const;\n\nexport const Button: React.ComponentType<DSControlledToggleT.Props> = () => {\n  const { propsWithDefault, buttonProps } = React.useContext(ControlledToggleContext);\n  const { checked, size, disabled, applyAriaDisabled, readOnly } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledButton\n      // as per morning meeting, juan said \"readOnly\" in toggle should receive aria-readonly, aria-readonly is valid for switch role, the html readonly attribute is not\n      {...(readOnly ? { 'aria-readonly': 'true' } : {})}\n      {...buttonProps}\n      $checked={checked}\n      $readOnly={readOnly}\n      $disabled={disabled}\n      $applyAriaDisabled={applyAriaDisabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButtonContentWrapper\n        $width={widthSizeMap[size]}\n        $checked={checked}\n        $size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCircle\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n        <StyledTextWrapper\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          variant={TYPOGRAPHY_VARIANTS.B2}\n          // this is \"okay\" in this version but not in the WCAGViolation code\n          //  the reason being that a role switch with proper \"aria-checked\" already announces \"on\" and \"off\" to screen readers\n          //  so this is just a visual representation of the state, not a semantic one\n          //  the WCAGViolation code is violating this contract with custom labels and they need to be announced, so they can't be hidden from screen readers\n          //  and they can't be considered \"presentational\" as they are meaning bearing for scenario with custom texts (which is exactly WHY role switch is wrong in that case)\n          // confirmed with Juan, this avoids the \"double announcement\" issue that was happening with the previous implementation of the component\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        >\n          {checked ? 'ON' : 'OFF'}\n        </StyledTextWrapper>\n      </StyledButtonContentWrapper>\n    </StyledButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEjB;AAlEN,8BAA8B;AAC9B,2BAAoC;AACpC,mBAAkB;AAClB,mCAAwC;AAExC,oBAA0F;AAsC1F,MAAM,eAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAyD,MAAM;AAC1E,QAAM,EAAE,kBAAkB,YAAY,IAAI,aAAAA,QAAM,WAAW,oDAAuB;AAClF,QAAM,EAAE,SAAS,MAAM,UAAU,mBAAmB,SAAS,IAAI;AACjE,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MAEE,GAAI,WAAW,EAAE,iBAAiB,OAAO,IAAI,CAAC;AAAA,MAC9C,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,WAAW;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,aAAa,IAAI;AAAA,UACzB,UAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA,gBACA,SAAS,yCAAoB;AAAA,gBAO7B,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,oBAAU,OAAO;AAAA;AAAA,YACpB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { ControlledToggleContext } from '../DSControlledToggleCTX.js';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { StyledButton, StyledButtonContentWrapper, StyledCircle, StyledTextWrapper } from './styles/styles.js';\n\n// What is this about?\n//  Currently the way the code is written for this component and the way this component UI/UX specs are handled\n//    there is no defiend \"dynamic\" and \"responsive\" sizes also, the font-size are hardcoded and not aligned with typography in the different \"size\" variants.\n//  In the past we accepted \"whatever\" labels for the toggle,\n//    it was discarded as non compliant for the semantic of the component that only announces and accepts the \"on\" and \"off\" meaning,\n//    as of today, wcag compliant way has an hardcoded \"ON\" and \"OFF\"/\n//  The previous implementation was relying on a dynamic calculation of the width to keep the size of the toggle button,\n//    it had it's own set of issues and was creating extra renders (see PUI-18655).\n\n// This constant is just the pre-calculated values to avoid extra javascript logic and extra renderes.\n\n// What does this means long term?\n//  - When the font-size is aligned, the component specs are made responsive and the component will support \"text resize/reflow\",\n//  - When the px will change to rem\n//  - When the component will be updated to support \"tokens\"\n//  - When/if the component will be i18n compliant and support different languages labels that are the other language version of \"on\" and \"off\" (like \"activ\u00E9\" and \"d\u00E9sactiv\u00E9\" in french)\n\n// The whole size calcualtion logic of the component needs to be reviewed and updated to not need a constant \"width\" to guarante the width to be \"the biggest of the two labels\".\n\n// The most reasonable implementation would be to:\n//  - simply render both \"on\" and \"off\" in the DOM at the same time\n//  - make the not active version influence the size but not visible (e.g. height:0, overflow:hidden)\n//  - have the width be automatically calculated by the browser to fit the longest.\n\n// I can't implement this as part of the current ticket(PUI-16323) as that would be a visual breaking change and need coordination with QA and UX.\n\n// So, short term solution:\n//  - Not responsive (in the rem, text resize WCAG sense, still is in the \"zoom\" sense as before)\n//  - Not i18n compliant\n//  - Not theming ready\n// Exactly as we never wrote the component to be, but at least it won't:\n//  - flicker\n//  - pay the cost of the WCAG non-compliant labels\n//  - hide the pending issues with aproximation that \"happens to kinda fix it\"\n// Important note -> I changed the \"width\" to \"min-width\" to keep some amount of resize/reflow WCAG compliant (zoom will keep working, font size changes won't like before),\n//  but true wcag compliance requires the component to use typography, be designed accordingly, written accordingly and rely on rem.\nconst widthSizeMap = {\n  s: 18,\n  m: 26,\n  l: 36,\n} as const;\n\nexport const Button: React.ComponentType<DSControlledToggleT.Props> = () => {\n  const { propsWithDefault, buttonProps } = React.useContext(ControlledToggleContext);\n  const { checked, size, disabled, applyAriaDisabled, readOnly, innerRef } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledButton\n      // as per morning meeting, juan said \"readOnly\" in toggle should receive aria-readonly, aria-readonly is valid for switch role, the html readonly attribute is not\n      {...(readOnly ? { 'aria-readonly': 'true' } : {})}\n      {...buttonProps}\n      /**\n       * PUI-14730\n       * innerRef is not a global attribute, so it is not carried by buttonProps; forward it\n       * explicitly to reach the underlying <button> DOM node (parity with radio/checkbox)\n       */\n      innerRef={innerRef}\n      $checked={checked}\n      $readOnly={readOnly}\n      $disabled={disabled}\n      $applyAriaDisabled={applyAriaDisabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButtonContentWrapper\n        $width={widthSizeMap[size]}\n        $checked={checked}\n        $size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCircle\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n        <StyledTextWrapper\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          variant={TYPOGRAPHY_VARIANTS.B2}\n          // this is \"okay\" in this version but not in the WCAGViolation code\n          //  the reason being that a role switch with proper \"aria-checked\" already announces \"on\" and \"off\" to screen readers\n          //  so this is just a visual representation of the state, not a semantic one\n          //  the WCAGViolation code is violating this contract with custom labels and they need to be announced, so they can't be hidden from screen readers\n          //  and they can't be considered \"presentational\" as they are meaning bearing for scenario with custom texts (which is exactly WHY role switch is wrong in that case)\n          // confirmed with Juan, this avoids the \"double announcement\" issue that was happening with the previous implementation of the component\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        >\n          {checked ? 'ON' : 'OFF'}\n        </StyledTextWrapper>\n      </StyledButtonContentWrapper>\n    </StyledButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEjB;AAxEN,8BAA8B;AAC9B,2BAAoC;AACpC,mBAAkB;AAClB,mCAAwC;AAExC,oBAA0F;AAsC1F,MAAM,eAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAyD,MAAM;AAC1E,QAAM,EAAE,kBAAkB,YAAY,IAAI,aAAAA,QAAM,WAAW,oDAAuB;AAClF,QAAM,EAAE,SAAS,MAAM,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC3E,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MAEE,GAAI,WAAW,EAAE,iBAAiB,OAAO,IAAI,CAAC;AAAA,MAC9C,GAAG;AAAA,MAMJ;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,aAAa,IAAI;AAAA,UACzB,UAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA,gBACA,SAAS,yCAAoB;AAAA,gBAO7B,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,oBAAU,OAAO;AAAA;AAAA,YACpB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -58,6 +58,7 @@ const DSControlledTogglePropTypes = {
   readOnly: import_ds_props_helpers.PropTypes.bool.description("Whether the toggle is readOnly or not").defaultValue("false"),
   containerProps: import_ds_props_helpers.PropTypes.object.description("Set of properties attached to the main container"),
   id: import_ds_props_helpers.PropTypes.string.description("Unique id."),
+  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.object]).description("Toggle button ref."),
   labelOn: import_ds_props_helpers.PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" }),
   labelOff: import_ds_props_helpers.PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" })
 };

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { TOGGLE_SIZES, DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n  // One entry per slot in CONTROLLED_TOGGLE_SLOTS \u2014 the function (dynamic) form of slot props.\n  // Exhaustiveness against the slots is enforced in typescript-testing/slot-props.ts.\n  export type SlotFunctionArguments = {\n    dsFormtoggleButtonContentWrapper: () => object;\n    dsFormtoggleCircle: () => object;\n    dsFormtoggleTextWrapper: () => object;\n    // legacy slot aliases \u2014 still injection points, see KNOWN_INTENTIONAL_DEVIATIONS.md\n    dsFormtoggleControlledContainer: () => object;\n    dsFormtoggleToggleCheckbox: () => object;\n  };\n\n  export interface DefaultProps {\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface RequiredProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSControlledToggleName, typeof CONTROLLED_TOGGLE_SLOTS> {\n    containerProps?: Record<string, unknown>;\n    id?: string;\n  }\n\n  // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n  //   this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n  export interface PostDeprecationETAPropsFallback {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOff?: string; // used to be \"labelOff\"\n  }\n  export interface PreDeprecationETAProps {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOff?: string; // used to be \"labelOff\"\n  }\n\n  export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  checked: false,\n  onChange: () => null,\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n  Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n    DSControlledToggleT.PreDeprecationETAProps\n> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n  checked: PropTypes.bool.description('Whether the toggle is checked or not').defaultValue('false'),\n  onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n  disabled: PropTypes.bool.description('Whether the toggle is disabled or not').defaultValue('false'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue('false'),\n  readOnly: PropTypes.bool.description('Whether the toggle is readOnly or not').defaultValue('false'),\n  containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n  labelOn: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n  labelOff: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA8E;AAiFvE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,8BAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,yCAAwB,wCAAuB;AAAA,EAC3E,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EAChG,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,8BAAa,MAAM;AAAA,EACrG,UAAU,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,gBAAgB,kCAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,kCAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,SAAS,kCAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,kCAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
+  "sourcesContent": ["import type React from 'react';\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { TOGGLE_SIZES, DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n  // One entry per slot in CONTROLLED_TOGGLE_SLOTS \u2014 the function (dynamic) form of slot props.\n  // Exhaustiveness against the slots is enforced in typescript-testing/slot-props.ts.\n  export type SlotFunctionArguments = {\n    dsFormtoggleButtonContentWrapper: () => object;\n    dsFormtoggleCircle: () => object;\n    dsFormtoggleTextWrapper: () => object;\n    // legacy slot aliases \u2014 still injection points, see KNOWN_INTENTIONAL_DEVIATIONS.md\n    dsFormtoggleControlledContainer: () => object;\n    dsFormtoggleToggleCheckbox: () => object;\n  };\n\n  export interface DefaultProps {\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface RequiredProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSControlledToggleName, typeof CONTROLLED_TOGGLE_SLOTS> {\n    containerProps?: Record<string, unknown>;\n    id?: string;\n    /**\n     * Ref forwarded to the focusable toggle button (role=\"switch\"). Mirrors the innerRef\n     * contract of DSControlledRadio / DSControlledCheckbox so consumers (e.g. ds-data-table\n     * custom cells) can reach the real focusable node for keyboard focus management.\n     */\n    innerRef?: React.MutableRefObject<HTMLButtonElement | null> | React.RefCallback<HTMLButtonElement>;\n  }\n\n  // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n  //   this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n  export interface PostDeprecationETAPropsFallback {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOff?: string; // used to be \"labelOff\"\n  }\n  export interface PreDeprecationETAProps {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOff?: string; // used to be \"labelOff\"\n  }\n\n  export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  checked: false,\n  onChange: () => null,\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n  Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n    DSControlledToggleT.PreDeprecationETAProps\n> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n  checked: PropTypes.bool.description('Whether the toggle is checked or not').defaultValue('false'),\n  onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n  disabled: PropTypes.bool.description('Whether the toggle is disabled or not').defaultValue('false'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue('false'),\n  readOnly: PropTypes.bool.description('Whether the toggle is readOnly or not').defaultValue('false'),\n  containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Toggle button ref.'),\n  labelOn: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n  labelOff: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAA8E;AAuFvE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,8BAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAG,kDAAyB,yCAAwB,wCAAuB;AAAA,EAC3E,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EAChG,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,8BAAa,MAAM;AAAA,EACrG,UAAU,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,gBAAgB,kCAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,kCAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,oBAAoB;AAAA,EAClG,SAAS,kCAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,kCAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
   "names": []
 }

package/dist/cjs/typescript-testing/form-toggle-typescript-valid.js

@@ -30,7 +30,8 @@ const testOptionalProps = {
   containerProps: {
     "data-testid": "toggle-container",
     "aria-label": "toggle container"
-  }
+  },
+  innerRef: { current: null }
 };
 const testPartialDefaults = {
   checked: true,

package/dist/cjs/typescript-testing/form-toggle-typescript-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/form-toggle-typescript-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledToggle, TOGGLE_SIZES, type DSControlledToggleT } from '../index.js';\n\n/**\n * Namespace type aliases exposed by the package public API.\n */\ntype ComponentPropsForApp = DSControlledToggleT.Props;\ntype ComponentPropsInternals = DSControlledToggleT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledToggleT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledToggleT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledToggleT.RequiredProps;\n\n/**\n * Required props contract (empty for this component).\n */\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\n/**\n * Optional props contract.\n */\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  id: 'toggle-id',\n  containerProps: {\n    'data-testid': 'toggle-container',\n    'aria-label': 'toggle container',\n  },\n};\n\n/**\n * Partial defaults are valid for app-facing props.\n */\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: true,\n  size: TOGGLE_SIZES.MEDIUM,\n};\n\n/**\n * Public props composition using explicit type annotation.\n */\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\n/**\n * Public props composition using \"as\" syntax.\n */\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n/**\n * Internal props require all default values.\n */\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\n/**\n * Internal props composition using explicit type annotation.\n */\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\n/**\n * Internal props composition using \"as\" syntax.\n */\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n/**\n * Explicit app-facing definition validates individual keys.\n */\nconst testExplicitDefinition: ComponentPropsForApp = {\n  id: 'toggle-explicit',\n  containerProps: {\n    'data-testid': 'toggle-explicit-container',\n  },\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.LARGE,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n  wcagViolationLabelOn: 'Legacy On',\n  wcagViolationLabelOff: 'Legacy Off',\n};\n\n/**\n * Inferred compatibility validates the complete object against public props.\n */\nconst testInferedTypeCompatibility = {\n  id: 'toggle-inferred',\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.SMALL,\n  readOnly: false,\n  disabled: true,\n  applyAriaDisabled: true,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n} as ComponentPropsForApp;\n\n/**\n * As-const object should remain spread-compatible with component props.\n */\nconst testDefinitionAsConst = {\n  id: 'toggle-const',\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: true,\n  disabled: false,\n  applyAriaDisabled: false,\n} as const;\n\n/**\n * TS validation usage component covering spread and inline syntaxes.\n */\nconst ExampleUsageComponent = () => (\n  <>\n    <DSControlledToggle {...testExplicitDefinition} />\n    <DSControlledToggle {...testInferedTypeCompatibility} />\n    <DSControlledToggle {...testDefinitionAsConst} />\n    <DSControlledToggle\n      id=\"toggle-inline\"\n      containerProps={{\n        'data-testid': 'toggle-inline-container',\n      }}\n      checked\n      onChange={() => {}}\n      size={TOGGLE_SIZES.MEDIUM}\n      readOnly={false}\n      disabled={false}\n      applyAriaDisabled={false}\n      labelOn=\"Enabled\"\n      labelOff=\"Disabled\"\n      wcagViolationLabelOn=\"Legacy On\"\n      wcagViolationLabelOff=\"Legacy Off\"\n    />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACwIrB;AAvIF,eAA2E;AAc3E,MAAM,oBAAiD,CAAC;AAKxD,MAAM,oBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAKA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,MAAM,sBAAa;AACrB;AAKA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AACzB;AAKA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AACZ;AAKA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,wBAAwB,MAC5B,4EACE;AAAA,8CAAC,+BAAoB,GAAG,wBAAwB;AAAA,EAChD,4CAAC,+BAAoB,GAAG,8BAA8B;AAAA,EACtD,4CAAC,+BAAoB,GAAG,uBAAuB;AAAA,EAC/C;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,MACA,SAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,MAAM,sBAAa;AAAA,MACnB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,sBAAqB;AAAA,MACrB,uBAAsB;AAAA;AAAA,EACxB;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledToggle, TOGGLE_SIZES, type DSControlledToggleT } from '../index.js';\n\n/**\n * Namespace type aliases exposed by the package public API.\n */\ntype ComponentPropsForApp = DSControlledToggleT.Props;\ntype ComponentPropsInternals = DSControlledToggleT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledToggleT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledToggleT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledToggleT.RequiredProps;\n\n/**\n * Required props contract (empty for this component).\n */\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\n/**\n * Optional props contract.\n */\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  id: 'toggle-id',\n  containerProps: {\n    'data-testid': 'toggle-container',\n    'aria-label': 'toggle container',\n  },\n  innerRef: { current: null },\n};\n\n/**\n * Partial defaults are valid for app-facing props.\n */\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: true,\n  size: TOGGLE_SIZES.MEDIUM,\n};\n\n/**\n * Public props composition using explicit type annotation.\n */\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\n/**\n * Public props composition using \"as\" syntax.\n */\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n/**\n * Internal props require all default values.\n */\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\n/**\n * Internal props composition using explicit type annotation.\n */\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\n/**\n * Internal props composition using \"as\" syntax.\n */\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n/**\n * Explicit app-facing definition validates individual keys.\n */\nconst testExplicitDefinition: ComponentPropsForApp = {\n  id: 'toggle-explicit',\n  containerProps: {\n    'data-testid': 'toggle-explicit-container',\n  },\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.LARGE,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n  wcagViolationLabelOn: 'Legacy On',\n  wcagViolationLabelOff: 'Legacy Off',\n};\n\n/**\n * Inferred compatibility validates the complete object against public props.\n */\nconst testInferedTypeCompatibility = {\n  id: 'toggle-inferred',\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.SMALL,\n  readOnly: false,\n  disabled: true,\n  applyAriaDisabled: true,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n} as ComponentPropsForApp;\n\n/**\n * As-const object should remain spread-compatible with component props.\n */\nconst testDefinitionAsConst = {\n  id: 'toggle-const',\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: true,\n  disabled: false,\n  applyAriaDisabled: false,\n} as const;\n\n/**\n * TS validation usage component covering spread and inline syntaxes.\n */\nconst ExampleUsageComponent = () => (\n  <>\n    <DSControlledToggle {...testExplicitDefinition} />\n    <DSControlledToggle {...testInferedTypeCompatibility} />\n    <DSControlledToggle {...testDefinitionAsConst} />\n    <DSControlledToggle\n      id=\"toggle-inline\"\n      containerProps={{\n        'data-testid': 'toggle-inline-container',\n      }}\n      checked\n      onChange={() => {}}\n      size={TOGGLE_SIZES.MEDIUM}\n      readOnly={false}\n      disabled={false}\n      applyAriaDisabled={false}\n      labelOn=\"Enabled\"\n      labelOff=\"Disabled\"\n      wcagViolationLabelOn=\"Legacy On\"\n      wcagViolationLabelOff=\"Legacy Off\"\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACyIrB;AAxIF,eAA2E;AAc3E,MAAM,oBAAiD,CAAC;AAKxD,MAAM,oBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AAAA,EACA,UAAU,EAAE,SAAS,KAAK;AAC5B;AAKA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,MAAM,sBAAa;AACrB;AAKA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AACzB;AAKA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AACZ;AAKA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,wBAAwB,MAC5B,4EACE;AAAA,8CAAC,+BAAoB,GAAG,wBAAwB;AAAA,EAChD,4CAAC,+BAAoB,GAAG,8BAA8B;AAAA,EACtD,4CAAC,+BAAoB,GAAG,uBAAuB;AAAA,EAC/C;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,MACA,SAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,MAAM,sBAAa;AAAA,MACnB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,sBAAqB;AAAA,MACrB,uBAAsB;AAAA;AAAA,EACxB;AAAA,GACF;",
   "names": []
 }

package/dist/esm/parts/Button.js

@@ -12,13 +12,14 @@ const widthSizeMap = {
 };
 const Button = () => {
   const { propsWithDefault, buttonProps } = React2.useContext(ControlledToggleContext);
-  const { checked, size, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
+  const { checked, size, disabled, applyAriaDisabled, readOnly, innerRef } = propsWithDefault;
   const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
   return /* @__PURE__ */ jsx(
     StyledButton,
     {
       ...readOnly ? { "aria-readonly": "true" } : {},
       ...buttonProps,
+      innerRef,
       $checked: checked,
       $readOnly: readOnly,
       $disabled: disabled,

package/dist/esm/parts/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { ControlledToggleContext } from '../DSControlledToggleCTX.js';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { StyledButton, StyledButtonContentWrapper, StyledCircle, StyledTextWrapper } from './styles/styles.js';\n\n// What is this about?\n//  Currently the way the code is written for this component and the way this component UI/UX specs are handled\n//    there is no defiend \"dynamic\" and \"responsive\" sizes also, the font-size are hardcoded and not aligned with typography in the different \"size\" variants.\n//  In the past we accepted \"whatever\" labels for the toggle,\n//    it was discarded as non compliant for the semantic of the component that only announces and accepts the \"on\" and \"off\" meaning,\n//    as of today, wcag compliant way has an hardcoded \"ON\" and \"OFF\"/\n//  The previous implementation was relying on a dynamic calculation of the width to keep the size of the toggle button,\n//    it had it's own set of issues and was creating extra renders (see PUI-18655).\n\n// This constant is just the pre-calculated values to avoid extra javascript logic and extra renderes.\n\n// What does this means long term?\n//  - When the font-size is aligned, the component specs are made responsive and the component will support \"text resize/reflow\",\n//  - When the px will change to rem\n//  - When the component will be updated to support \"tokens\"\n//  - When/if the component will be i18n compliant and support different languages labels that are the other language version of \"on\" and \"off\" (like \"activ\u00E9\" and \"d\u00E9sactiv\u00E9\" in french)\n\n// The whole size calcualtion logic of the component needs to be reviewed and updated to not need a constant \"width\" to guarante the width to be \"the biggest of the two labels\".\n\n// The most reasonable implementation would be to:\n//  - simply render both \"on\" and \"off\" in the DOM at the same time\n//  - make the not active version influence the size but not visible (e.g. height:0, overflow:hidden)\n//  - have the width be automatically calculated by the browser to fit the longest.\n\n// I can't implement this as part of the current ticket(PUI-16323) as that would be a visual breaking change and need coordination with QA and UX.\n\n// So, short term solution:\n//  - Not responsive (in the rem, text resize WCAG sense, still is in the \"zoom\" sense as before)\n//  - Not i18n compliant\n//  - Not theming ready\n// Exactly as we never wrote the component to be, but at least it won't:\n//  - flicker\n//  - pay the cost of the WCAG non-compliant labels\n//  - hide the pending issues with aproximation that \"happens to kinda fix it\"\n// Important note -> I changed the \"width\" to \"min-width\" to keep some amount of resize/reflow WCAG compliant (zoom will keep working, font size changes won't like before),\n//  but true wcag compliance requires the component to use typography, be designed accordingly, written accordingly and rely on rem.\nconst widthSizeMap = {\n  s: 18,\n  m: 26,\n  l: 36,\n} as const;\n\nexport const Button: React.ComponentType<DSControlledToggleT.Props> = () => {\n  const { propsWithDefault, buttonProps } = React.useContext(ControlledToggleContext);\n  const { checked, size, disabled, applyAriaDisabled, readOnly } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledButton\n      // as per morning meeting, juan said \"readOnly\" in toggle should receive aria-readonly, aria-readonly is valid for switch role, the html readonly attribute is not\n      {...(readOnly ? { 'aria-readonly': 'true' } : {})}\n      {...buttonProps}\n      $checked={checked}\n      $readOnly={readOnly}\n      $disabled={disabled}\n      $applyAriaDisabled={applyAriaDisabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButtonContentWrapper\n        $width={widthSizeMap[size]}\n        $checked={checked}\n        $size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCircle\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n        <StyledTextWrapper\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          variant={TYPOGRAPHY_VARIANTS.B2}\n          // this is \"okay\" in this version but not in the WCAGViolation code\n          //  the reason being that a role switch with proper \"aria-checked\" already announces \"on\" and \"off\" to screen readers\n          //  so this is just a visual representation of the state, not a semantic one\n          //  the WCAGViolation code is violating this contract with custom labels and they need to be announced, so they can't be hidden from screen readers\n          //  and they can't be considered \"presentational\" as they are meaning bearing for scenario with custom texts (which is exactly WHY role switch is wrong in that case)\n          // confirmed with Juan, this avoids the \"double announcement\" issue that was happening with the previous implementation of the component\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        >\n          {checked ? 'ON' : 'OFF'}\n        </StyledTextWrapper>\n      </StyledButtonContentWrapper>\n    </StyledButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkEjB,SAOE,KAPF;AAlEN,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAOA,YAAW;AAClB,SAAS,+BAA+B;AAExC,SAAS,cAAc,4BAA4B,cAAc,yBAAyB;AAsC1F,MAAM,eAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAyD,MAAM;AAC1E,QAAM,EAAE,kBAAkB,YAAY,IAAIA,OAAM,WAAW,uBAAuB;AAClF,QAAM,EAAE,SAAS,MAAM,UAAU,mBAAmB,SAAS,IAAI;AACjE,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MAEE,GAAI,WAAW,EAAE,iBAAiB,OAAO,IAAI,CAAC;AAAA,MAC9C,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,WAAW;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,aAAa,IAAI;AAAA,UACzB,UAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA,gBACA,SAAS,oBAAoB;AAAA,gBAO7B,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,oBAAU,OAAO;AAAA;AAAA,YACpB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { ControlledToggleContext } from '../DSControlledToggleCTX.js';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { StyledButton, StyledButtonContentWrapper, StyledCircle, StyledTextWrapper } from './styles/styles.js';\n\n// What is this about?\n//  Currently the way the code is written for this component and the way this component UI/UX specs are handled\n//    there is no defiend \"dynamic\" and \"responsive\" sizes also, the font-size are hardcoded and not aligned with typography in the different \"size\" variants.\n//  In the past we accepted \"whatever\" labels for the toggle,\n//    it was discarded as non compliant for the semantic of the component that only announces and accepts the \"on\" and \"off\" meaning,\n//    as of today, wcag compliant way has an hardcoded \"ON\" and \"OFF\"/\n//  The previous implementation was relying on a dynamic calculation of the width to keep the size of the toggle button,\n//    it had it's own set of issues and was creating extra renders (see PUI-18655).\n\n// This constant is just the pre-calculated values to avoid extra javascript logic and extra renderes.\n\n// What does this means long term?\n//  - When the font-size is aligned, the component specs are made responsive and the component will support \"text resize/reflow\",\n//  - When the px will change to rem\n//  - When the component will be updated to support \"tokens\"\n//  - When/if the component will be i18n compliant and support different languages labels that are the other language version of \"on\" and \"off\" (like \"activ\u00E9\" and \"d\u00E9sactiv\u00E9\" in french)\n\n// The whole size calcualtion logic of the component needs to be reviewed and updated to not need a constant \"width\" to guarante the width to be \"the biggest of the two labels\".\n\n// The most reasonable implementation would be to:\n//  - simply render both \"on\" and \"off\" in the DOM at the same time\n//  - make the not active version influence the size but not visible (e.g. height:0, overflow:hidden)\n//  - have the width be automatically calculated by the browser to fit the longest.\n\n// I can't implement this as part of the current ticket(PUI-16323) as that would be a visual breaking change and need coordination with QA and UX.\n\n// So, short term solution:\n//  - Not responsive (in the rem, text resize WCAG sense, still is in the \"zoom\" sense as before)\n//  - Not i18n compliant\n//  - Not theming ready\n// Exactly as we never wrote the component to be, but at least it won't:\n//  - flicker\n//  - pay the cost of the WCAG non-compliant labels\n//  - hide the pending issues with aproximation that \"happens to kinda fix it\"\n// Important note -> I changed the \"width\" to \"min-width\" to keep some amount of resize/reflow WCAG compliant (zoom will keep working, font size changes won't like before),\n//  but true wcag compliance requires the component to use typography, be designed accordingly, written accordingly and rely on rem.\nconst widthSizeMap = {\n  s: 18,\n  m: 26,\n  l: 36,\n} as const;\n\nexport const Button: React.ComponentType<DSControlledToggleT.Props> = () => {\n  const { propsWithDefault, buttonProps } = React.useContext(ControlledToggleContext);\n  const { checked, size, disabled, applyAriaDisabled, readOnly, innerRef } = propsWithDefault;\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n  return (\n    <StyledButton\n      // as per morning meeting, juan said \"readOnly\" in toggle should receive aria-readonly, aria-readonly is valid for switch role, the html readonly attribute is not\n      {...(readOnly ? { 'aria-readonly': 'true' } : {})}\n      {...buttonProps}\n      /**\n       * PUI-14730\n       * innerRef is not a global attribute, so it is not carried by buttonProps; forward it\n       * explicitly to reach the underlying <button> DOM node (parity with radio/checkbox)\n       */\n      innerRef={innerRef}\n      $checked={checked}\n      $readOnly={readOnly}\n      $disabled={disabled}\n      $applyAriaDisabled={applyAriaDisabled}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledButtonContentWrapper\n        $width={widthSizeMap[size]}\n        $checked={checked}\n        $size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCircle\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n        <StyledTextWrapper\n          $size={size}\n          $disabled={disabled}\n          $readOnly={readOnly}\n          $applyAriaDisabled={applyAriaDisabled}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          variant={TYPOGRAPHY_VARIANTS.B2}\n          // this is \"okay\" in this version but not in the WCAGViolation code\n          //  the reason being that a role switch with proper \"aria-checked\" already announces \"on\" and \"off\" to screen readers\n          //  so this is just a visual representation of the state, not a semantic one\n          //  the WCAGViolation code is violating this contract with custom labels and they need to be announced, so they can't be hidden from screen readers\n          //  and they can't be considered \"presentational\" as they are meaning bearing for scenario with custom texts (which is exactly WHY role switch is wrong in that case)\n          // confirmed with Juan, this avoids the \"double announcement\" issue that was happening with the previous implementation of the component\n          role=\"presentation\"\n          aria-hidden=\"true\"\n        >\n          {checked ? 'ON' : 'OFF'}\n        </StyledTextWrapper>\n      </StyledButtonContentWrapper>\n    </StyledButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwEjB,SAOE,KAPF;AAxEN,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,OAAOA,YAAW;AAClB,SAAS,+BAA+B;AAExC,SAAS,cAAc,4BAA4B,cAAc,yBAAyB;AAsC1F,MAAM,eAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAyD,MAAM;AAC1E,QAAM,EAAE,kBAAkB,YAAY,IAAIA,OAAM,WAAW,uBAAuB;AAClF,QAAM,EAAE,SAAS,MAAM,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC3E,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MAEE,GAAI,WAAW,EAAE,iBAAiB,OAAO,IAAI,CAAC;AAAA,MAC9C,GAAG;AAAA,MAMJ;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,aAAa,IAAI;AAAA,UACzB,UAAU;AAAA,UACV,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,oBAAoB;AAAA,gBACpB;AAAA,gBACA;AAAA,gBACA,SAAS,oBAAoB;AAAA,gBAO7B,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,oBAAU,OAAO;AAAA;AAAA,YACpB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/react-desc-prop-types.js

@@ -28,6 +28,7 @@ const DSControlledTogglePropTypes = {
   readOnly: PropTypes.bool.description("Whether the toggle is readOnly or not").defaultValue("false"),
   containerProps: PropTypes.object.description("Set of properties attached to the main container"),
   id: PropTypes.string.description("Unique id."),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description("Toggle button ref."),
   labelOn: PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" }),
   labelOff: PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" })
 };

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { TOGGLE_SIZES, DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n  // One entry per slot in CONTROLLED_TOGGLE_SLOTS \u2014 the function (dynamic) form of slot props.\n  // Exhaustiveness against the slots is enforced in typescript-testing/slot-props.ts.\n  export type SlotFunctionArguments = {\n    dsFormtoggleButtonContentWrapper: () => object;\n    dsFormtoggleCircle: () => object;\n    dsFormtoggleTextWrapper: () => object;\n    // legacy slot aliases \u2014 still injection points, see KNOWN_INTENTIONAL_DEVIATIONS.md\n    dsFormtoggleControlledContainer: () => object;\n    dsFormtoggleToggleCheckbox: () => object;\n  };\n\n  export interface DefaultProps {\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface RequiredProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSControlledToggleName, typeof CONTROLLED_TOGGLE_SLOTS> {\n    containerProps?: Record<string, unknown>;\n    id?: string;\n  }\n\n  // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n  //   this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n  export interface PostDeprecationETAPropsFallback {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOff?: string; // used to be \"labelOff\"\n  }\n  export interface PreDeprecationETAProps {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOff?: string; // used to be \"labelOff\"\n  }\n\n  export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  checked: false,\n  onChange: () => null,\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n  Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n    DSControlledToggleT.PreDeprecationETAProps\n> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n  checked: PropTypes.bool.description('Whether the toggle is checked or not').defaultValue('false'),\n  onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n  disabled: PropTypes.bool.description('Whether the toggle is disabled or not').defaultValue('false'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue('false'),\n  readOnly: PropTypes.bool.description('Whether the toggle is readOnly or not').defaultValue('false'),\n  containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n  labelOn: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n  labelOff: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB,+BAA+B;AAiFvE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG,yBAAyB,wBAAwB,uBAAuB;AAAA,EAC3E,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EAChG,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,aAAa,MAAM;AAAA,EACrG,UAAU,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,UAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,SAAS,UAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,UAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  getPropsPerSlotPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { TOGGLE_SIZES, DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n  export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n  // One entry per slot in CONTROLLED_TOGGLE_SLOTS \u2014 the function (dynamic) form of slot props.\n  // Exhaustiveness against the slots is enforced in typescript-testing/slot-props.ts.\n  export type SlotFunctionArguments = {\n    dsFormtoggleButtonContentWrapper: () => object;\n    dsFormtoggleCircle: () => object;\n    dsFormtoggleTextWrapper: () => object;\n    // legacy slot aliases \u2014 still injection points, see KNOWN_INTENTIONAL_DEVIATIONS.md\n    dsFormtoggleControlledContainer: () => object;\n    dsFormtoggleToggleCheckbox: () => object;\n  };\n\n  export interface DefaultProps {\n    checked: boolean;\n    onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n    size: ToggleSize;\n    readOnly: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n  }\n\n  export interface RequiredProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSControlledToggleName, typeof CONTROLLED_TOGGLE_SLOTS> {\n    containerProps?: Record<string, unknown>;\n    id?: string;\n    /**\n     * Ref forwarded to the focusable toggle button (role=\"switch\"). Mirrors the innerRef\n     * contract of DSControlledRadio / DSControlledCheckbox so consumers (e.g. ds-data-table\n     * custom cells) can reach the real focusable node for keyboard focus management.\n     */\n    innerRef?: React.MutableRefObject<HTMLButtonElement | null> | React.RefCallback<HTMLButtonElement>;\n  }\n\n  // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n  //   this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n  export interface PostDeprecationETAPropsFallback {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    wcagViolationLabelOff?: string; // used to be \"labelOff\"\n  }\n  export interface PreDeprecationETAProps {\n    /**\n     * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOn?: string; // used to be \"labelOn\"\n    /**\n     * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n     * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n     */\n    labelOff?: string; // used to be \"labelOff\"\n  }\n\n  export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps,\n      PreDeprecationETAProps,\n      PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n  checked: false,\n  onChange: () => null,\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n  Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n    DSControlledToggleT.PreDeprecationETAProps\n> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  ...getPropsPerSlotPropTypes(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n  checked: PropTypes.bool.description('Whether the toggle is checked or not').defaultValue('false'),\n  onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n  size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n  disabled: PropTypes.bool.description('Whether the toggle is disabled or not').defaultValue('false'),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n    )\n    .defaultValue('false'),\n  readOnly: PropTypes.bool.description('Whether the toggle is readOnly or not').defaultValue('false'),\n  containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n  id: PropTypes.string.description('Unique id.'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Toggle button ref.'),\n  labelOn: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n  labelOff: PropTypes.string\n    .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n    .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n  DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,cAAc,wBAAwB,+BAA+B;AAuFvE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG,yBAAyB,wBAAwB,uBAAuB;AAAA,EAC3E,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EAChG,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,aAAa,MAAM;AAAA,EACrG,UAAU,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,UAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,CAAC,EAAE,YAAY,oBAAoB;AAAA,EAClG,SAAS,UAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,UAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
   "names": []
 }

package/dist/esm/typescript-testing/form-toggle-typescript-valid.js

@@ -7,7 +7,8 @@ const testOptionalProps = {
   containerProps: {
     "data-testid": "toggle-container",
     "aria-label": "toggle container"
-  }
+  },
+  innerRef: { current: null }
 };
 const testPartialDefaults = {
   checked: true,

package/dist/esm/typescript-testing/form-toggle-typescript-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/form-toggle-typescript-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledToggle, TOGGLE_SIZES, type DSControlledToggleT } from '../index.js';\n\n/**\n * Namespace type aliases exposed by the package public API.\n */\ntype ComponentPropsForApp = DSControlledToggleT.Props;\ntype ComponentPropsInternals = DSControlledToggleT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledToggleT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledToggleT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledToggleT.RequiredProps;\n\n/**\n * Required props contract (empty for this component).\n */\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\n/**\n * Optional props contract.\n */\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  id: 'toggle-id',\n  containerProps: {\n    'data-testid': 'toggle-container',\n    'aria-label': 'toggle container',\n  },\n};\n\n/**\n * Partial defaults are valid for app-facing props.\n */\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: true,\n  size: TOGGLE_SIZES.MEDIUM,\n};\n\n/**\n * Public props composition using explicit type annotation.\n */\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\n/**\n * Public props composition using \"as\" syntax.\n */\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n/**\n * Internal props require all default values.\n */\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\n/**\n * Internal props composition using explicit type annotation.\n */\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\n/**\n * Internal props composition using \"as\" syntax.\n */\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n/**\n * Explicit app-facing definition validates individual keys.\n */\nconst testExplicitDefinition: ComponentPropsForApp = {\n  id: 'toggle-explicit',\n  containerProps: {\n    'data-testid': 'toggle-explicit-container',\n  },\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.LARGE,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n  wcagViolationLabelOn: 'Legacy On',\n  wcagViolationLabelOff: 'Legacy Off',\n};\n\n/**\n * Inferred compatibility validates the complete object against public props.\n */\nconst testInferedTypeCompatibility = {\n  id: 'toggle-inferred',\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.SMALL,\n  readOnly: false,\n  disabled: true,\n  applyAriaDisabled: true,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n} as ComponentPropsForApp;\n\n/**\n * As-const object should remain spread-compatible with component props.\n */\nconst testDefinitionAsConst = {\n  id: 'toggle-const',\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: true,\n  disabled: false,\n  applyAriaDisabled: false,\n} as const;\n\n/**\n * TS validation usage component covering spread and inline syntaxes.\n */\nconst ExampleUsageComponent = () => (\n  <>\n    <DSControlledToggle {...testExplicitDefinition} />\n    <DSControlledToggle {...testInferedTypeCompatibility} />\n    <DSControlledToggle {...testDefinitionAsConst} />\n    <DSControlledToggle\n      id=\"toggle-inline\"\n      containerProps={{\n        'data-testid': 'toggle-inline-container',\n      }}\n      checked\n      onChange={() => {}}\n      size={TOGGLE_SIZES.MEDIUM}\n      readOnly={false}\n      disabled={false}\n      applyAriaDisabled={false}\n      labelOn=\"Enabled\"\n      labelOff=\"Disabled\"\n      wcagViolationLabelOn=\"Legacy On\"\n      wcagViolationLabelOff=\"Legacy Off\"\n    />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwIrB,mBACE,KADF;AAvIF,SAAS,oBAAoB,oBAA8C;AAc3E,MAAM,oBAAiD,CAAC;AAKxD,MAAM,oBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAKA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,MAAM,aAAa;AACrB;AAKA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AACzB;AAKA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AACZ;AAKA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,wBAAwB,MAC5B,iCACE;AAAA,sBAAC,sBAAoB,GAAG,wBAAwB;AAAA,EAChD,oBAAC,sBAAoB,GAAG,8BAA8B;AAAA,EACtD,oBAAC,sBAAoB,GAAG,uBAAuB;AAAA,EAC/C;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,MACA,SAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,sBAAqB;AAAA,MACrB,uBAAsB;AAAA;AAAA,EACxB;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledToggle, TOGGLE_SIZES, type DSControlledToggleT } from '../index.js';\n\n/**\n * Namespace type aliases exposed by the package public API.\n */\ntype ComponentPropsForApp = DSControlledToggleT.Props;\ntype ComponentPropsInternals = DSControlledToggleT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledToggleT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledToggleT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledToggleT.RequiredProps;\n\n/**\n * Required props contract (empty for this component).\n */\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\n/**\n * Optional props contract.\n */\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  id: 'toggle-id',\n  containerProps: {\n    'data-testid': 'toggle-container',\n    'aria-label': 'toggle container',\n  },\n  innerRef: { current: null },\n};\n\n/**\n * Partial defaults are valid for app-facing props.\n */\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  checked: true,\n  size: TOGGLE_SIZES.MEDIUM,\n};\n\n/**\n * Public props composition using explicit type annotation.\n */\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\n/**\n * Public props composition using \"as\" syntax.\n */\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n/**\n * Internal props require all default values.\n */\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n};\n\n/**\n * Internal props composition using explicit type annotation.\n */\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\n/**\n * Internal props composition using \"as\" syntax.\n */\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n/**\n * Explicit app-facing definition validates individual keys.\n */\nconst testExplicitDefinition: ComponentPropsForApp = {\n  id: 'toggle-explicit',\n  containerProps: {\n    'data-testid': 'toggle-explicit-container',\n  },\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.LARGE,\n  readOnly: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n  wcagViolationLabelOn: 'Legacy On',\n  wcagViolationLabelOff: 'Legacy Off',\n};\n\n/**\n * Inferred compatibility validates the complete object against public props.\n */\nconst testInferedTypeCompatibility = {\n  id: 'toggle-inferred',\n  checked: false,\n  onChange: () => {},\n  size: TOGGLE_SIZES.SMALL,\n  readOnly: false,\n  disabled: true,\n  applyAriaDisabled: true,\n  labelOn: 'Enabled',\n  labelOff: 'Disabled',\n} as ComponentPropsForApp;\n\n/**\n * As-const object should remain spread-compatible with component props.\n */\nconst testDefinitionAsConst = {\n  id: 'toggle-const',\n  checked: true,\n  onChange: () => {},\n  size: TOGGLE_SIZES.MEDIUM,\n  readOnly: true,\n  disabled: false,\n  applyAriaDisabled: false,\n} as const;\n\n/**\n * TS validation usage component covering spread and inline syntaxes.\n */\nconst ExampleUsageComponent = () => (\n  <>\n    <DSControlledToggle {...testExplicitDefinition} />\n    <DSControlledToggle {...testInferedTypeCompatibility} />\n    <DSControlledToggle {...testDefinitionAsConst} />\n    <DSControlledToggle\n      id=\"toggle-inline\"\n      containerProps={{\n        'data-testid': 'toggle-inline-container',\n      }}\n      checked\n      onChange={() => {}}\n      size={TOGGLE_SIZES.MEDIUM}\n      readOnly={false}\n      disabled={false}\n      applyAriaDisabled={false}\n      labelOn=\"Enabled\"\n      labelOff=\"Disabled\"\n      wcagViolationLabelOn=\"Legacy On\"\n      wcagViolationLabelOff=\"Legacy Off\"\n    />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyIrB,mBACE,KADF;AAxIF,SAAS,oBAAoB,oBAA8C;AAc3E,MAAM,oBAAiD,CAAC;AAKxD,MAAM,oBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AAAA,EACA,UAAU,EAAE,SAAS,KAAK;AAC5B;AAKA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,MAAM,aAAa;AACrB;AAKA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AACzB;AAKA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AACZ;AAKA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,wBAAwB,MAC5B,iCACE;AAAA,sBAAC,sBAAoB,GAAG,wBAAwB;AAAA,EAChD,oBAAC,sBAAoB,GAAG,8BAA8B;AAAA,EACtD,oBAAC,sBAAoB,GAAG,uBAAuB;AAAA,EAC/C;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,MACA,SAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,sBAAqB;AAAA,MACrB,uBAAsB;AAAA;AAAA,EACxB;AAAA,GACF;",
   "names": []
 }

package/dist/types/react-desc-prop-types.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { DSButtonV3T } from '@elliemae/ds-button-v2';
 import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';
 import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
@@ -24,6 +25,12 @@ export declare namespace DSControlledToggleT {
     interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSControlledToggleName, typeof CONTROLLED_TOGGLE_SLOTS> {
         containerProps?: Record<string, unknown>;
         id?: string;
+        /**
+         * Ref forwarded to the focusable toggle button (role="switch"). Mirrors the innerRef
+         * contract of DSControlledRadio / DSControlledCheckbox so consumers (e.g. ds-data-table
+         * custom cells) can reach the real focusable node for keyboard focus management.
+         */
+        innerRef?: React.MutableRefObject<HTMLButtonElement | null> | React.RefCallback<HTMLButtonElement>;
     }
     interface PostDeprecationETAPropsFallback {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-toggle",
-  "version": "3.70.0-next.48",
+  "version": "3.70.0-next.50",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Toggle",
   "files": [
@@ -39,17 +39,17 @@
     "lodash-es": "^4.18.1",
     "styled-components": "~5.3.9",
     "uid": "^2.0.2",
-    "@elliemae/ds-props-helpers": "3.70.0-next.48",
-    "@elliemae/ds-system": "3.70.0-next.48",
-    "@elliemae/ds-typography": "3.70.0-next.48",
-    "@elliemae/ds-button-v2": "3.70.0-next.48"
+    "@elliemae/ds-button-v2": "3.70.0-next.50",
+    "@elliemae/ds-props-helpers": "3.70.0-next.50",
+    "@elliemae/ds-typography": "3.70.0-next.50",
+    "@elliemae/ds-system": "3.70.0-next.50"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.48",
-    "@elliemae/ds-test-utils": "3.70.0-next.48",
-    "@elliemae/ds-typescript-helpers": "3.70.0-next.48"
+    "@elliemae/ds-test-utils": "3.70.0-next.50",
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.50",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.50"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",