@primer/react 38.31.1-rc.db2c6d5fe → 38.32.0-rc.07044f1e1

package/dist/SegmentedControl/SegmentedControl-a004561f.css

@@ -0,0 +1,2 @@
+.prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-current=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-current=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-Button-E48xz[aria-current=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-current=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-current=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
+/*# sourceMappingURL=SegmentedControl-a004561f.css.map */

package/dist/SegmentedControl/SegmentedControl-a004561f.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,yDAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBA6CF,CArCE,kDAEE,gBAkBF,CAhBE,wDAQE,mDAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAGA,6JAEE,4BACF,CAGF,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAmEF,CApDE,uCACE,iCAA0B,CAC1B,kCACF,CAGA,wDAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,sEAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,qCAA8B,CAD9B,kBAQF,CAJE,oFACE,oCAA6B,CAC7B,qCACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,qDAAiD,CACjD,wDAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,2HACE,0DACF,CAEA,4HACE,2DACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-a004561f.css","sourcesContent":[".SegmentedControl {\n  /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n  --segmented-control-icon-width: 32px;\n\n  display: inline-flex;\n\n  /* TODO: use primitive `control.{small|medium}.size` when it is available */\n  height: 32px;\n  padding: 0;\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  background-color: var(--controlTrack-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n\n  /* Responsive full-width */\n  &[data-full-width='true'] {\n    display: flex;\n    width: 100%;\n\n    --segmented-control-icon-width: 100%;\n  }\n\n  &[data-full-width='false'] {\n    display: inline-flex;\n    width: auto;\n\n    --segmented-control-icon-width: 32px;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-full-width-narrow='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-narrow='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-full-width-regular='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-regular='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-full-width-wide='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-wide='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n\n    &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  /* Hide when dropdown variant is active */\n  &[data-variant='dropdown'] {\n    display: none;\n  }\n\n  /* Handle hideLabels variant - hide button text */\n  &[data-variant='hideLabels'] .Text {\n    display: none;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-variant-narrow='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-narrow='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-variant-regular='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-regular='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-variant-wide='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-wide='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  &:where([data-size='small']) {\n    /* TODO: use primitive `control.{small|medium}.size` when it is available */\n    height: 28px;\n    font-size: var(--text-body-size-small);\n  }\n}\n\n.DropdownContainer {\n  display: none;\n\n  /* Show when dropdown variant is active */\n  &[data-variant='dropdown'] {\n    display: block;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-variant-narrow='dropdown'] {\n      display: block;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-variant-regular='dropdown'] {\n      display: block;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-variant-wide='dropdown'] {\n      display: block;\n    }\n  }\n}\n\n.Item {\n  position: relative;\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: -1px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  flex-grow: 1;\n\n  &:not(:last-child) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: 1px;\n\n    &::after {\n      position: absolute;\n      top: var(--base-size-8);\n      right: calc(-1 * var(--base-size-2));\n      bottom: var(--base-size-8);\n      width: 1px;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--borderColor-default);\n    }\n\n    /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n    &:has(+ [data-selected])::after,\n    &:where([data-selected])::after {\n      background-color: transparent;\n    }\n  }\n\n  &:first-child {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: -1px;\n  }\n\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: -1px;\n  }\n\n  .Counter {\n    margin-inline-start: var(--base-size-8);\n    display: flex;\n    align-items: center;\n  }\n}\n\n.Button {\n  /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n  --segmented-control-button-inner-padding: 12px;\n  --segmented-control-button-bg-inset: 4px;\n  --segmented-control-outer-radius: var(--borderRadius-medium);\n\n  width: 100%;\n  height: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmented-control-button-bg-inset);\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-normal);\n  color: currentColor;\n  cursor: pointer;\n  background-color: transparent;\n  border-color: transparent;\n  border-width: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: var(--segmented-control-outer-radius);\n\n  & svg {\n    fill: var(--fgColor-muted);\n    color: var(--fgColor-muted);\n  }\n\n  /* fallback :focus state */\n  &:focus:not(:disabled) {\n    outline: var(--base-size-2) solid var(--fgColor-accent);\n    outline-offset: -1px;\n    box-shadow: none;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible:not(:disabled) {\n    outline: var(--base-size-2) solid var(--fgColor-accent);\n    outline-offset: -1px;\n    box-shadow: none;\n  }\n\n  /* stylelint-disable-next-line selector-max-specificity */\n  &:focus:focus-visible:not(:last-child)::after {\n    /* fixes an issue where the focus outline shows over the pseudo-element */\n    width: 0;\n  }\n\n  &[aria-disabled='true']:not([aria-current='true']) {\n    cursor: not-allowed;\n    color: var(--fgColor-disabled);\n    background-color: transparent;\n\n    & svg {\n      fill: var(--fgColor-disabled);\n      color: var(--fgColor-disabled);\n    }\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      position: absolute;\n      top: 50%;\n      right: 0;\n      left: 0;\n      min-height: 44px;\n      content: '';\n      transform: translateY(-50%);\n    }\n  }\n}\n\n.IconButton {\n  width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n  display: flex;\n  height: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n  /* stylelint-disable-next-line primer/spacing */\n  padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n  border-color: transparent;\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n\n  /*\n    innerRadius = outerRadius - distance/2\n    https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n  */\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n  align-items: center;\n  justify-content: center;\n}\n\n.Button[aria-current='true'] {\n  padding: 0;\n  font-weight: var(--base-text-weight-semibold);\n\n  .Content {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-right: var(--segmented-control-button-inner-padding);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-left: var(--segmented-control-button-inner-padding);\n    background-color: var(--controlKnob-bgColor-rest);\n    border-color: var(--controlKnob-borderColor-rest);\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: var(--segmented-control-outer-radius);\n  }\n}\n\n.Button:not([aria-current='true'], [aria-disabled='true']) {\n  &:hover .Content {\n    background-color: var(--controlTrack-bgColor-hover);\n  }\n\n  &:active .Content {\n    background-color: var(--controlTrack-bgColor-active);\n  }\n}\n\n.Text::after {\n  display: block;\n  height: 0;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  pointer-events: none;\n  visibility: hidden;\n  content: attr(data-text);\n  user-select: none;\n}\n\n.LeadingIcon {\n  margin-right: var(--base-size-4);\n}\n"]}

package/dist/SegmentedControl/SegmentedControl.module.css.js

@@ -1,4 +1,4 @@
-import "./SegmentedControl-622e61a4.css";
+import "./SegmentedControl-a004561f.css";
 //#region src/SegmentedControl/SegmentedControl.module.css.js
 var SegmentedControl_module_css_default = {
 	"SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",

package/dist/SplitPageLayout/SplitPageLayout.js

@@ -16,6 +16,7 @@ const Root = (props) => {
 	let t1;
 	if ($[1] !== props) {
 		t1 = /*#__PURE__*/ jsx(PageLayout, {
+			"data-component": "SplitPageLayout",
 			containerWidth: "full",
 			padding: "none",
 			columnGap: "none",
@@ -50,6 +51,7 @@ const Header = (t0) => {
 	let t3;
 	if ($[4] !== divider || $[5] !== padding || $[6] !== props) {
 		t3 = /*#__PURE__*/ jsx(PageLayout.Header, {
+			"data-component": "SplitPageLayout.Header",
 			padding,
 			divider,
 			...props
@@ -83,6 +85,7 @@ const Content = (t0) => {
 	let t3;
 	if ($[4] !== padding || $[5] !== props || $[6] !== width) {
 		t3 = /*#__PURE__*/ jsx(PageLayout.Content, {
+			"data-component": "SplitPageLayout.Content",
 			width,
 			padding,
 			...props
@@ -124,6 +127,7 @@ const Pane = (t0) => {
 	let t5;
 	if ($[6] !== divider || $[7] !== padding || $[8] !== position || $[9] !== props || $[10] !== sticky) {
 		t5 = /*#__PURE__*/ jsx(PageLayout.Pane, {
+			"data-component": "SplitPageLayout.Pane",
 			position,
 			sticky,
 			padding,
@@ -165,6 +169,7 @@ const Sidebar = (t0) => {
 	let t4;
 	if ($[5] !== divider || $[6] !== padding || $[7] !== position || $[8] !== props) {
 		t4 = /*#__PURE__*/ jsx(PageLayout.Sidebar, {
+			"data-component": "SplitPageLayout.Sidebar",
 			position,
 			padding,
 			divider,
@@ -200,6 +205,7 @@ const Footer = (t0) => {
 	let t3;
 	if ($[4] !== divider || $[5] !== padding || $[6] !== props) {
 		t3 = /*#__PURE__*/ jsx(PageLayout.Footer, {
+			"data-component": "SplitPageLayout.Footer",
 			padding,
 			divider,
 			...props
@@ -212,6 +218,11 @@ const Footer = (t0) => {
 	return t3;
 };
 Footer.displayName = "SplitPageLayout.Footer";
+Header.__SLOT__ = PageLayout.Header.__SLOT__;
+Content.__SLOT__ = PageLayout.Content.__SLOT__;
+Pane.__SLOT__ = PageLayout.Pane.__SLOT__;
+Sidebar.__SLOT__ = PageLayout.Sidebar.__SLOT__;
+Footer.__SLOT__ = PageLayout.Footer.__SLOT__;
 const SplitPageLayout = Object.assign(Root, {
 	Header,
 	Content,

package/dist/Stack/Stack.js

@@ -113,6 +113,7 @@ const Stack = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		t16 = /*#__PURE__*/ jsx(Component, {
 			ref: forwardedRef,
 			...rest,
+			"data-component": "Stack",
 			className: t7,
 			...t8,
 			...t9,
@@ -190,6 +191,7 @@ const StackItem = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		t5 = /*#__PURE__*/ jsx(Component, {
 			ref: forwardedRef,
 			...rest,
+			"data-component": "StackItem",
 			className: t2,
 			...t3,
 			...t4,

package/dist/StateLabel/StateLabel.js

@@ -96,6 +96,7 @@ const StateLabel = /*#__PURE__*/ forwardRef((t0, ref) => {
 			...rest,
 			ref,
 			className: t1,
+			"data-component": "StateLabel",
 			"data-size": inferredSize,
 			"data-status": status,
 			children: [t2, children]

package/dist/SubNav/SubNav.js

@@ -62,6 +62,7 @@ const SubNav = /*#__PURE__*/ React.forwardRef(function SubNav(t0, forwardRef) {
 			className: t1,
 			"aria-label": label,
 			...rest,
+			"data-component": "SubNav",
 			children: [t3, t4]
 		});
 		$[13] = forwardRef;
@@ -103,6 +104,7 @@ const SubNavLinks = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 			ref: forwardRef,
 			className: t1,
 			...rest,
+			"data-component": "SubNav.Links",
 			children
 		});
 		$[6] = children;
@@ -144,6 +146,7 @@ const SubNavLink = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 			"data-selected": rest.selected,
 			"aria-current": rest.selected,
 			...rest,
+			"data-component": "SubNav.Link",
 			children
 		});
 		$[6] = children;

package/dist/TabNav/TabNav.js

@@ -102,6 +102,7 @@ function TabNav(t0) {
 		t10 = /*#__PURE__*/ jsx("div", {
 			...rest,
 			ref: t7,
+			"data-component": "TabNav",
 			children: t9
 		});
 		$[16] = rest;
@@ -159,7 +160,8 @@ const TabNavLink = /*#__PURE__*/ React.forwardRef(function TabNavLink(t0, ref) {
 			tabIndex: -1,
 			"aria-selected": t2,
 			className: t5,
-			...rest
+			...rest,
+			"data-component": "TabNav.Link"
 		});
 		$[9] = Component;
 		$[10] = ref;

package/dist/Text/Text.js

@@ -40,6 +40,7 @@ function Text(props, ref) {
 	if ($[9] !== Component || $[10] !== ref || $[11] !== rest || $[12] !== size || $[13] !== t1 || $[14] !== weight || $[15] !== whiteSpace) {
 		t2 = /*#__PURE__*/ jsx(Component, {
 			className: t1,
+			"data-component": "Text",
 			"data-size": size,
 			"data-weight": weight,
 			"data-white-space": whiteSpace,

package/dist/Textarea/Textarea.js

@@ -132,6 +132,7 @@ const Textarea = /*#__PURE__*/ React.forwardRef((t0, ref) => {
 			t10 = /*#__PURE__*/ jsx("textarea", {
 				value,
 				defaultValue,
+				"data-component": "Textarea",
 				"data-resize": resize,
 				"aria-required": required,
 				"aria-invalid": t7,

package/dist/ThemeProvider.js

@@ -96,6 +96,7 @@ const ThemeProvider = (t0) => {
 	let t5;
 	if ($[26] !== children || $[27] !== dayScheme || $[28] !== nightScheme || $[29] !== t4) {
 		t5 = /*#__PURE__*/ jsx("div", {
+			"data-component": "ThemeProvider",
 			"data-color-mode": t4,
 			"data-light-theme": dayScheme,
 			"data-dark-theme": nightScheme,

package/dist/ToggleSwitch/ToggleSwitch.js

@@ -72,7 +72,7 @@ const LineIcon = (t0) => {
 };
 const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
 	var _buttonLabelOn, _buttonLabelOff;
-	const $ = c(95);
+	const $ = c(90);
 	let ariaDescribedby;
 	let ariaLabelledby;
 	let buttonLabelOff;
@@ -141,93 +141,74 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
 	const loadingLabelId = useId$1("loadingLabel");
 	const { safeSetTimeout } = useSafeTimeout();
 	let t5;
-	if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onClick || $[23] !== setIsOn) {
+	if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onChange || $[23] !== onClick || $[24] !== setIsOn) {
 		t5 = (e) => {
 			if (disabled || loading) return;
-			if (!isControlled) setIsOn(!isOn);
+			if (isControlled) {
+				var _onChange;
+				(_onChange = onChange) === null || _onChange === void 0 || _onChange(!isOn);
+			} else setIsOn(!isOn);
 			onClick && onClick(e);
 		};
 		$[18] = disabled;
 		$[19] = isControlled;
 		$[20] = isOn;
 		$[21] = loading;
-		$[22] = onClick;
-		$[23] = setIsOn;
-		$[24] = t5;
-	} else t5 = $[24];
+		$[22] = onChange;
+		$[23] = onClick;
+		$[24] = setIsOn;
+		$[25] = t5;
+	} else t5 = $[25];
 	const handleToggleClick = t5;
 	let t6;
 	let t7;
-	if ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
+	if ($[26] !== isLoadingLabelVisible || $[27] !== loading || $[28] !== loadingLabelDelay || $[29] !== safeSetTimeout) {
 		t6 = () => {
-			if (onChange && isControlled && !disabled) onChange(Boolean(checked));
-		};
-		t7 = [
-			onChange,
-			checked,
-			isControlled,
-			disabled
-		];
-		$[25] = checked;
-		$[26] = disabled;
-		$[27] = isControlled;
-		$[28] = onChange;
-		$[29] = t6;
-		$[30] = t7;
-	} else {
-		t6 = $[29];
-		t7 = $[30];
-	}
-	useEffect(t6, t7);
-	let t8;
-	let t9;
-	if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
-		t8 = () => {
 			if (!loading && isLoadingLabelVisible) setIsLoadingLabelVisible(false);
 			else if (loading && !isLoadingLabelVisible) safeSetTimeout(() => {
 				setIsLoadingLabelVisible(true);
 			}, loadingLabelDelay);
 		};
-		t9 = [
+		t7 = [
 			loading,
 			isLoadingLabelVisible,
 			loadingLabelDelay,
 			safeSetTimeout
 		];
-		$[31] = isLoadingLabelVisible;
-		$[32] = loading;
-		$[33] = loadingLabelDelay;
-		$[34] = safeSetTimeout;
-		$[35] = t8;
-		$[36] = t9;
+		$[26] = isLoadingLabelVisible;
+		$[27] = loading;
+		$[28] = loadingLabelDelay;
+		$[29] = safeSetTimeout;
+		$[30] = t6;
+		$[31] = t7;
 	} else {
-		t8 = $[35];
-		t9 = $[36];
+		t6 = $[30];
+		t7 = $[31];
 	}
-	useEffect(t8, t9);
+	useEffect(t6, t7);
 	let switchButtonDescribedBy = loadingLabelId;
 	if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
+	let t8;
+	if ($[32] !== className) {
+		t8 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
+		$[32] = className;
+		$[33] = t8;
+	} else t8 = $[33];
+	const t9 = isLoadingLabelVisible && loadingLabel;
 	let t10;
-	if ($[37] !== className) {
-		t10 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
-		$[37] = className;
-		$[38] = t10;
-	} else t10 = $[38];
-	const t11 = isLoadingLabelVisible && loadingLabel;
-	let t12;
-	if ($[39] !== loadingLabelId || $[40] !== t11) {
-		t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
+	if ($[34] !== loadingLabelId || $[35] !== t9) {
+		t10 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
 			announceOnShow: true,
 			id: loadingLabelId,
-			children: t11
+			children: t9
 		}) });
-		$[39] = loadingLabelId;
-		$[40] = t11;
-		$[41] = t12;
-	} else t12 = $[41];
-	let t13;
-	if ($[42] !== loading || $[43] !== statusLabelPosition) {
-		t13 = loading ? /*#__PURE__*/ jsx("div", {
+		$[34] = loadingLabelId;
+		$[35] = t9;
+		$[36] = t10;
+	} else t10 = $[36];
+	let t11;
+	if ($[37] !== loading || $[38] !== statusLabelPosition) {
+		t11 = loading ? /*#__PURE__*/ jsx("div", {
 			className: ToggleSwitch_module_css_default.LoadingSpinner,
 			"data-status-label-position": statusLabelPosition,
 			children: /*#__PURE__*/ jsx(Spinner, {
@@ -235,172 +216,172 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
 				srText: null
 			})
 		}) : null;
-		$[42] = loading;
-		$[43] = statusLabelPosition;
-		$[44] = t13;
-	} else t13 = $[44];
-	const t14 = !acceptsInteraction;
-	const t15 = !isOn;
-	const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
-	let t17;
-	if ($[45] !== t15 || $[46] !== t16) {
-		t17 = /*#__PURE__*/ jsx("span", {
+		$[37] = loading;
+		$[38] = statusLabelPosition;
+		$[39] = t11;
+	} else t11 = $[39];
+	const t12 = !acceptsInteraction;
+	const t13 = !isOn;
+	const t14 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
+	let t15;
+	if ($[40] !== t13 || $[41] !== t14) {
+		t15 = /*#__PURE__*/ jsx("span", {
 			className: ToggleSwitch_module_css_default.StatusTextItem,
-			"data-hidden": t15,
-			children: t16
+			"data-hidden": t13,
+			children: t14
 		});
-		$[45] = t15;
-		$[46] = t16;
-		$[47] = t17;
-	} else t17 = $[47];
-	const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
-	let t19;
-	if ($[48] !== isOn || $[49] !== t18) {
-		t19 = /*#__PURE__*/ jsx("span", {
+		$[40] = t13;
+		$[41] = t14;
+		$[42] = t15;
+	} else t15 = $[42];
+	const t16 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
+	let t17;
+	if ($[43] !== isOn || $[44] !== t16) {
+		t17 = /*#__PURE__*/ jsx("span", {
 			className: ToggleSwitch_module_css_default.StatusTextItem,
 			"data-hidden": isOn,
-			children: t18
+			children: t16
 		});
-		$[48] = isOn;
-		$[49] = t18;
-		$[50] = t19;
-	} else t19 = $[50];
-	let t20;
-	if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
-		t20 = /*#__PURE__*/ jsxs("span", {
+		$[43] = isOn;
+		$[44] = t16;
+		$[45] = t17;
+	} else t17 = $[45];
+	let t18;
+	if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t12 || $[49] !== t15 || $[50] !== t17) {
+		t18 = /*#__PURE__*/ jsxs("span", {
 			className: ToggleSwitch_module_css_default.StatusText,
 			"data-size": size,
-			"data-disabled": t14,
+			"data-disabled": t12,
 			"aria-hidden": "true",
 			onClick: handleToggleClick,
-			children: [t17, t19]
+			children: [t15, t17]
 		});
-		$[51] = handleToggleClick;
-		$[52] = size;
-		$[53] = t14;
-		$[54] = t17;
-		$[55] = t19;
-		$[56] = t20;
-	} else t20 = $[56];
+		$[46] = handleToggleClick;
+		$[47] = size;
+		$[48] = t12;
+		$[49] = t15;
+		$[50] = t17;
+		$[51] = t18;
+	} else t18 = $[51];
+	const t19 = !acceptsInteraction;
+	const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
 	const t21 = !acceptsInteraction;
-	const t22 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
-	const t23 = !acceptsInteraction;
-	const t24 = !acceptsInteraction;
-	let t25;
-	if ($[57] !== size) {
-		t25 = /*#__PURE__*/ jsx(LineIcon, { size });
-		$[57] = size;
-		$[58] = t25;
-	} else t25 = $[58];
-	let t26;
-	if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
-		t26 = /*#__PURE__*/ jsx("div", {
+	const t22 = !acceptsInteraction;
+	let t23;
+	if ($[52] !== size) {
+		t23 = /*#__PURE__*/ jsx(LineIcon, { size });
+		$[52] = size;
+		$[53] = t23;
+	} else t23 = $[53];
+	let t24;
+	if ($[54] !== isOn || $[55] !== t22 || $[56] !== t23) {
+		t24 = /*#__PURE__*/ jsx("div", {
 			className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
 			"data-checked": isOn,
-			"data-disabled": t24,
-			children: t25
+			"data-disabled": t22,
+			children: t23
 		});
-		$[59] = isOn;
-		$[60] = t24;
-		$[61] = t25;
-		$[62] = t26;
-	} else t26 = $[62];
-	const t27 = !acceptsInteraction;
-	let t28;
-	if ($[63] !== size) {
-		t28 = /*#__PURE__*/ jsx(CircleIcon, { size });
-		$[63] = size;
-		$[64] = t28;
-	} else t28 = $[64];
-	let t29;
-	if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
-		t29 = /*#__PURE__*/ jsx("div", {
+		$[54] = isOn;
+		$[55] = t22;
+		$[56] = t23;
+		$[57] = t24;
+	} else t24 = $[57];
+	const t25 = !acceptsInteraction;
+	let t26;
+	if ($[58] !== size) {
+		t26 = /*#__PURE__*/ jsx(CircleIcon, { size });
+		$[58] = size;
+		$[59] = t26;
+	} else t26 = $[59];
+	let t27;
+	if ($[60] !== isOn || $[61] !== t25 || $[62] !== t26) {
+		t27 = /*#__PURE__*/ jsx("div", {
 			className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
 			"data-checked": isOn,
-			"data-disabled": t27,
-			children: t28
+			"data-disabled": t25,
+			children: t26
 		});
-		$[65] = isOn;
-		$[66] = t27;
-		$[67] = t28;
-		$[68] = t29;
-	} else t29 = $[68];
-	let t30;
-	if ($[69] !== t26 || $[70] !== t29) {
-		t30 = /*#__PURE__*/ jsxs("div", {
+		$[60] = isOn;
+		$[61] = t25;
+		$[62] = t26;
+		$[63] = t27;
+	} else t27 = $[63];
+	let t28;
+	if ($[64] !== t24 || $[65] !== t27) {
+		t28 = /*#__PURE__*/ jsxs("div", {
 			className: ToggleSwitch_module_css_default.SwitchButtonContent,
 			"aria-hidden": "true",
-			children: [t26, t29]
+			children: [t24, t27]
 		});
-		$[69] = t26;
-		$[70] = t29;
-		$[71] = t30;
-	} else t30 = $[71];
-	const t31 = !acceptsInteraction;
-	let t32;
-	if ($[72] !== isOn || $[73] !== t31) {
-		t32 = /*#__PURE__*/ jsx("div", {
+		$[64] = t24;
+		$[65] = t27;
+		$[66] = t28;
+	} else t28 = $[66];
+	const t29 = !acceptsInteraction;
+	let t30;
+	if ($[67] !== isOn || $[68] !== t29) {
+		t30 = /*#__PURE__*/ jsx("div", {
 			className: ToggleSwitch_module_css_default.ToggleKnob,
 			"data-checked": isOn,
-			"data-disabled": t31,
+			"data-disabled": t29,
 			"aria-hidden": "true"
 		});
-		$[72] = isOn;
-		$[73] = t31;
-		$[74] = t32;
-	} else t32 = $[74];
-	let t33;
-	if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
-		t33 = /*#__PURE__*/ jsxs("button", {
+		$[67] = isOn;
+		$[68] = t29;
+		$[69] = t30;
+	} else t30 = $[69];
+	let t31;
+	if ($[70] !== ariaLabelledby || $[71] !== buttonType || $[72] !== handleToggleClick || $[73] !== isOn || $[74] !== ref || $[75] !== size || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t28 || $[80] !== t30) {
+		t31 = /*#__PURE__*/ jsxs("button", {
 			ref,
 			type: buttonType,
 			className: ToggleSwitch_module_css_default.SwitchButton,
 			"data-size": size,
 			"data-checked": isOn,
-			"data-disabled": t21,
+			"data-disabled": t19,
 			onClick: handleToggleClick,
 			"aria-labelledby": ariaLabelledby,
-			"aria-describedby": t22,
+			"aria-describedby": t20,
 			"aria-pressed": isOn,
-			"aria-disabled": t23,
-			children: [t30, t32]
+			"aria-disabled": t21,
+			children: [t28, t30]
 		});
-		$[75] = ariaLabelledby;
-		$[76] = buttonType;
-		$[77] = handleToggleClick;
-		$[78] = isOn;
-		$[79] = ref;
-		$[80] = size;
-		$[81] = t21;
-		$[82] = t22;
-		$[83] = t23;
-		$[84] = t30;
-		$[85] = t32;
-		$[86] = t33;
-	} else t33 = $[86];
-	let t34;
-	if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
-		t34 = /*#__PURE__*/ jsxs("div", {
-			className: t10,
+		$[70] = ariaLabelledby;
+		$[71] = buttonType;
+		$[72] = handleToggleClick;
+		$[73] = isOn;
+		$[74] = ref;
+		$[75] = size;
+		$[76] = t19;
+		$[77] = t20;
+		$[78] = t21;
+		$[79] = t28;
+		$[80] = t30;
+		$[81] = t31;
+	} else t31 = $[81];
+	let t32;
+	if ($[82] !== rest || $[83] !== statusLabelPosition || $[84] !== t10 || $[85] !== t11 || $[86] !== t18 || $[87] !== t31 || $[88] !== t8) {
+		t32 = /*#__PURE__*/ jsxs("div", {
+			className: t8,
 			"data-status-label-position": statusLabelPosition,
 			...rest,
 			children: [
-				t12,
-				t13,
-				t20,
-				t33
+				t10,
+				t11,
+				t18,
+				t31
 			]
 		});
-		$[87] = rest;
-		$[88] = statusLabelPosition;
-		$[89] = t10;
-		$[90] = t12;
-		$[91] = t13;
-		$[92] = t20;
-		$[93] = t33;
-		$[94] = t34;
-	} else t34 = $[94];
-	return t34;
+		$[82] = rest;
+		$[83] = statusLabelPosition;
+		$[84] = t10;
+		$[85] = t11;
+		$[86] = t18;
+		$[87] = t31;
+		$[88] = t8;
+		$[89] = t32;
+	} else t32 = $[89];
+	return t32;
 });
 ToggleSwitch.displayName = "ToggleSwitch";
 //#endregion