@amboss/design-system 4.9.2 → 4.9.4-canary.0

package/build/cjs/components/Layout/usePanelDockedSlide.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getMaxSize(){return getMaxSize},get usePanelDockedSlide(){return usePanelDockedSlide}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_parseDurationMs=require("../../shared/parseDurationMs"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_useLayout=require("./useLayout"),resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize})=>void 0===collapsedSize?minSize:isVisible?minSize??collapsedSize:collapsedSize,getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),rowKey=(0,_registry.usePanelRow)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[fixedWidth,setFixedWidth]=(0,_react.useState)(null),[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible);isVisible!==prevVisible&&(setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;(0,_registry.useDeclarePanel)(slot,{defaultSize:mountDefaultSizeFor({collapsedSize,defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,hasCollapsedRest||isMounted);let latestRest=(0,_react.useRef)({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},(0,_react.useLayoutEffect)(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),(0,_react.useLayoutEffect)(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let{duration,timingFunction}=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open,durationMs=(0,_parseDurationMs.parseDurationMs)(duration),setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`flex-grow ${duration} ${timingFunction}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest){frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1));return}let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;return handle&&element&&isHandleReady(handle)?void runSlide(handle,element):"exiting"===phase||!animation||attempt>=30?void settle(handle):void(frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1)))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var target=exports,all={get getMaxSize(){return getMaxSize},get usePanelDockedSlide(){return usePanelDockedSlide}};for(var name in all)Object.defineProperty(target,name,{enumerable:!0,get:Object.getOwnPropertyDescriptor(all,name).get});const _react=require("react"),_reactdom=require("react-dom"),_react1=require("@emotion/react"),_useWindow=require("../../shared/useWindow"),_parseDurationMs=require("../../shared/parseDurationMs"),_prefersReducedMotion=require("../../shared/prefersReducedMotion"),_registry=require("./registry"),_usePanelAnimations=require("./usePanelAnimations"),_useLayout=require("./useLayout"),resolveSizePx=(size,groupWidthPx)=>{if("number"==typeof size)return size;if("string"!=typeof size)return null;let parsed=parseFloat(size);return Number.isFinite(parsed)?size.trim().endsWith("px")?parsed:null!=groupWidthPx?parsed/100*groupWidthPx:null:null},groupColumnsOf=element=>{let columns=element.closest("[data-group]")?.querySelectorAll("[data-panel]");return columns?Array.from(columns):[element]},isHandleReady=handle=>{try{return handle.isCollapsed(),!0}catch{return!1}},mountDefaultSizeFor=({collapsedSize,defaultSize,isVisible,isSlidingIn})=>void 0!==collapsedSize?isVisible?defaultSize:collapsedSize:isSlidingIn?0:defaultSize,minSizeFor=({collapsedSize,isVisible,minSize,phase})=>void 0===collapsedSize?minSize:isVisible&&"idle"===phase?minSize??collapsedSize:collapsedSize,getMaxSize=({collapsedSize,isVisible,maxSize,openSize,phase})=>void 0===collapsedSize?maxSize:isVisible||"idle"!==phase?maxSize??openSize:collapsedSize;function usePanelDockedSlide({slot,defaultSize,minSize,maxSize,collapsible,resizable,lockWidthOnWindowResize,collapsedSize}){let{isVisible,state}=(0,_useLayout.useLayout)()[slot],theme=(0,_react1.useTheme)(),window=(0,_useWindow.useWindow)(),animation=(0,_registry.usePanelAnimationControl)(),rowKey=(0,_registry.usePanelRow)(),reducedMotion=(0,_prefersReducedMotion.prefersReducedMotion)(window),hasCollapsedRest=void 0!==collapsedSize,isCollapsible=collapsible&&!hasCollapsedRest,[isMounted,setIsMounted]=(0,_react.useState)(isVisible),[phase,setPhase]=(0,_react.useState)("idle"),[fixedWidth,setFixedWidth]=(0,_react.useState)(null),animations=(0,_usePanelAnimations.usePanelAnimationsStore)(),panelSlideAnimation=(0,_react.useMemo)(()=>{let timing=hasCollapsedRest?theme.variables.animation.navSlide.collapse:theme.variables.animation.navSlide.open;return{property:"flex-grow",duration:reducedMotion?0:(0,_parseDurationMs.parseDurationMs)(timing.duration),easing:timing.timingFunction}},[theme,hasCollapsedRest,reducedMotion]);(0,_react.useLayoutEffect)(()=>{animations?.set(slot,"idle"===phase||reducedMotion||!collapsible&&!hasCollapsedRest?null:panelSlideAnimation)},[animations,slot,phase,panelSlideAnimation,reducedMotion,collapsible,hasCollapsedRest]),(0,_react.useLayoutEffect)(()=>()=>animations?.set(slot,null),[animations,slot]);let[prevVisible,setPrevVisible]=(0,_react.useState)(isVisible),declaredMountSize=(0,_react.useRef)(hasCollapsedRest&&!isVisible?collapsedSize:state.size??defaultSize),chosenOpenSize=(0,_react.useRef)(state.size??defaultSize),needsRestCorrection=(0,_react.useRef)(!1);isVisible!==prevVisible&&(chosenOpenSize.current=state.size??defaultSize,needsRestCorrection.current=!0,hasCollapsedRest&&setFixedWidth(resolveSizePx(state.size??defaultSize,null)),setPrevVisible(isVisible),setPhase(isVisible?"entering":"exiting"),isVisible&&setIsMounted(!0),animation?.setResizeSuppressed(slot,!0));let openSize=hasCollapsedRest?state.size??defaultSize:defaultSize;(0,_registry.useDeclarePanel)(slot,{defaultSize:hasCollapsedRest?declaredMountSize.current:mountDefaultSizeFor({defaultSize:openSize,isVisible,isSlidingIn:"entering"===phase&&collapsible&&!reducedMotion}),minSize:minSizeFor({collapsedSize,isVisible,minSize,phase}),maxSize:getMaxSize({collapsedSize,isVisible,maxSize,openSize,phase}),collapsible:isCollapsible,resizable:(!hasCollapsedRest||!!isVisible&&"idle"===phase)&&resizable,lockWidthOnWindowResize}),(0,_registry.usePanelPresence)(slot,hasCollapsedRest||isMounted),(0,_react.useLayoutEffect)(()=>{if(!hasCollapsedRest||"idle"!==phase||!needsRestCorrection.current)return;let restSize=isVisible?chosenOpenSize.current:collapsedSize,cancelled=!1;return animation?.setResizeSuppressed(slot,!0),Promise.resolve().then(()=>{if(cancelled)return;let handle=animation?.getHandle(slot);try{handle&&isHandleReady(handle)&&void 0!==restSize&&(0,_reactdom.flushSync)(()=>handle.resize(restSize))}finally{needsRestCorrection.current=!1,animation?.setResizeSuppressed(slot,!1)}}),()=>{cancelled=!0,animation?.setResizeSuppressed(slot,!1)}},[phase,hasCollapsedRest,isVisible,collapsedSize,animation,slot]);let latestRest=(0,_react.useRef)({isVisible,openSize,phase});return latestRest.current={isVisible,openSize,phase},(0,_react.useLayoutEffect)(()=>{if(!hasCollapsedRest)return;let frame=0,cancelled=!1,resizeToRest=attempt=>{if(cancelled)return;let handle=animation?.getHandle(slot)??null;if(handle&&isHandleReady(handle)){let rest=latestRest.current;if("idle"!==rest.phase)return;let restSize=rest.isVisible?rest.openSize??minSize:collapsedSize;try{void 0!==restSize&&handle.resize(restSize)}catch{}return}animation&&!(attempt>=30)&&(frame=window.requestAnimationFrame(()=>resizeToRest(attempt+1)))};return Promise.resolve().then(()=>resizeToRest(0)),()=>{cancelled=!0,window.cancelAnimationFrame(frame)}},[rowKey]),(0,_react.useLayoutEffect)(()=>{if("idle"===phase)return;let cancelled=!1,frame=0,settleTimer=0,animatedColumns=[];animation?.setResizeSuppressed(slot,!0);let durationMs=panelSlideAnimation.duration,setColumnTransitions=enabled=>{animatedColumns.forEach(column=>{enabled?column.style.setProperty("transition",`${panelSlideAnimation.property} ${panelSlideAnimation.duration}ms ${panelSlideAnimation.easing}`):column.style.removeProperty("transition")})},targetSize=state.size??defaultSize??minSize,openColumn=(handle,targetPx)=>{handle.isCollapsed()&&handle.expand(),handle.resize(targetPx??targetSize??minSize??"20%")},settle=handle=>{if(setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1),"entering"===phase&&handle&&!hasCollapsedRest)try{handle.getSize().inPixels<1&&openColumn(handle,null)}catch{}setFixedWidth(null),"exiting"!==phase||hasCollapsedRest||setIsMounted(!1),setPhase("idle")},runSlide=(handle,element)=>{animatedColumns=groupColumnsOf(element);let groupWidthPx=element.closest("[data-group]")?.getBoundingClientRect().width??null,targetPx=resolveSizePx(targetSize,groupWidthPx),collapsedPx=resolveSizePx(collapsedSize,groupWidthPx);setFixedWidth("entering"===phase||hasCollapsedRest?targetPx:handle.getSize().inPixels),reducedMotion||setColumnTransitions(!0),element.getBoundingClientRect();try{"entering"===phase?openColumn(handle,targetPx):hasCollapsedRest?handle.resize(collapsedPx??collapsedSize):handle.collapse()}catch{settle(handle);return}settleTimer=window.setTimeout(()=>settle(handle),reducedMotion?0:durationMs+80)},waitForColumn=attempt=>{if(cancelled)return;if(0===attempt&&hasCollapsedRest)return void Promise.resolve().then(()=>waitForColumn(attempt+1));let handle=animation?.getHandle(slot)??null,element=animation?.getElement(slot)??null;if(handle&&element&&isHandleReady(handle)){if(hasCollapsedRest){let startSize="entering"===phase?collapsedSize:chosenOpenSize.current;void 0!==startSize&&(0,_reactdom.flushSync)(()=>handle.resize(startSize))}runSlide(handle,element);return}if("exiting"===phase||!animation||attempt>=30)return void settle(handle);frame=window.requestAnimationFrame(()=>waitForColumn(attempt+1))};return collapsible||hasCollapsedRest?waitForColumn(0):settle(animation?.getHandle(slot)??null),()=>{cancelled=!0,window.cancelAnimationFrame(frame),window.clearTimeout(settleTimer),setColumnTransitions(!1),animation?.setResizeSuppressed(slot,!1)}},[phase,slot,collapsible,hasCollapsedRest,reducedMotion,animation,window,theme,panelSlideAnimation]),{isMounted:hasCollapsedRest||isMounted,fixedWidth}}

package/build/cjs/web-tokens/_sizes.json

@@ -37,7 +37,7 @@
         "value": "1024px",
         "original": 1024,
         "variableName": "$size-dimension-content-max-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -47,7 +47,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-divider-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -57,7 +57,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-divider-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -67,7 +67,7 @@
         "value": "32px",
         "original": 32,
         "variableName": "$size-dimension-divider-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -77,7 +77,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-checkbox-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -87,7 +87,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-checkbox-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -97,7 +97,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-kbd-min-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -107,7 +107,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-radio-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -117,7 +117,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-radio-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -127,7 +127,7 @@
         "value": "6px",
         "original": 6,
         "variableName": "$size-dimension-radio-point-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -137,7 +137,7 @@
         "value": "10px",
         "original": 10,
         "variableName": "$size-dimension-radio-point-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -147,7 +147,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-toggle-height-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -157,7 +157,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-dimension-toggle-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -167,7 +167,7 @@
         "value": "28px",
         "original": 28,
         "variableName": "$size-dimension-toggle-width-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -177,7 +177,7 @@
         "value": "40px",
         "original": 40,
         "variableName": "$size-dimension-toggle-width-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -187,7 +187,7 @@
         "value": "36px",
         "original": 36,
         "variableName": "$size-dimension-textarea-min-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -197,7 +197,7 @@
         "value": "8px",
         "original": 8,
         "variableName": "$size-dimension-toggle-point-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -207,7 +207,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-dimension-toggle-point-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -217,7 +217,7 @@
         "value": "32px",
         "original": 32,
         "variableName": "$size-dimension-toggle-button-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -227,7 +227,7 @@
         "value": "120px",
         "original": 120,
         "variableName": "$size-dimension-dropdown-menu-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -237,7 +237,7 @@
         "value": "320px",
         "original": 320,
         "variableName": "$size-dimension-prompt-button-group-popover-min-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -247,7 +247,7 @@
         "value": "560px",
         "original": 560,
         "variableName": "$size-dimension-modal-width-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -257,7 +257,7 @@
         "value": "720px",
         "original": 720,
         "variableName": "$size-dimension-modal-width-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -267,7 +267,7 @@
         "value": "800px",
         "original": 800,
         "variableName": "$size-dimension-modal-max-height-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -277,7 +277,7 @@
         "value": "40px",
         "original": 40,
         "variableName": "$size-dimension-modal-margin-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -287,7 +287,7 @@
         "value": "1280px",
         "original": 1280,
         "variableName": "$size-dimension-modal-full-screen-content-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -297,7 +297,7 @@
         "value": "1px",
         "original": 1,
         "variableName": "$size-dimension-media-viewer-bar-separator-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -307,7 +307,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-dimension-legend-key-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -317,7 +317,7 @@
         "value": "56px",
         "original": 56,
         "variableName": "$size-dimension-left-nav-bar-width",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -327,7 +327,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-letter-spacing-none",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -337,7 +337,7 @@
         "value": "0.5px",
         "original": 0.5,
         "variableName": "$size-letter-spacing-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -347,7 +347,7 @@
         "value": "1px",
         "original": 1,
         "variableName": "$size-letter-spacing-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -357,7 +357,7 @@
         "value": "10px",
         "original": 10,
         "variableName": "$size-font-xxs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -367,7 +367,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-font-xs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -377,7 +377,7 @@
         "value": "14px",
         "original": 14,
         "variableName": "$size-font-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -387,7 +387,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-font-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -397,7 +397,7 @@
         "value": "18px",
         "original": 18,
         "variableName": "$size-font-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -407,7 +407,7 @@
         "value": "20px",
         "original": 20,
         "variableName": "$size-font-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -417,7 +417,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-font-xxl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -427,7 +427,7 @@
         "value": "26px",
         "original": 26,
         "variableName": "$size-font-xxxl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -447,7 +447,7 @@
         "value": "2px",
         "original": 2,
         "variableName": "$size-spacing-xxxs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -527,7 +527,7 @@
         "value": "0px",
         "original": 0,
         "variableName": "$size-border-radius-none",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -537,7 +537,7 @@
         "value": "4px",
         "original": 4,
         "variableName": "$size-border-radius-xs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -547,7 +547,7 @@
         "value": "8px",
         "original": 8,
         "variableName": "$size-border-radius-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -557,7 +557,7 @@
         "value": "12px",
         "original": 12,
         "variableName": "$size-border-radius-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -567,7 +567,7 @@
         "value": "16px",
         "original": 16,
         "variableName": "$size-border-radius-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -577,7 +577,7 @@
         "value": "24px",
         "original": 24,
         "variableName": "$size-border-radius-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -587,7 +587,7 @@
         "value": "9999px",
         "original": 9999,
         "variableName": "$size-border-radius-full",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -597,7 +597,7 @@
         "value": 1.1428571429,
         "original": 1.1428571429,
         "variableName": "$size-line-height-xs",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -607,7 +607,7 @@
         "value": 1.25,
         "original": 1.25,
         "variableName": "$size-line-height-s",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -617,7 +617,7 @@
         "value": 1.3333333,
         "original": 1.3333333,
         "variableName": "$size-line-height-m",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -627,7 +627,7 @@
         "value": 1.4285714286,
         "original": 1.4285714286,
         "variableName": "$size-line-height-l",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -637,7 +637,7 @@
         "value": 1.5,
         "original": 1.5,
         "variableName": "$size-line-height-xl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -647,7 +647,7 @@
         "value": 1.625,
         "original": 1.625,
         "variableName": "$size-line-height-xxl",
-        "isUsed": false
+        "isUsed": true
     },
     {
         "category": "size",
@@ -657,6 +657,6 @@
         "value": 1.714286,
         "original": 1.714286,
         "variableName": "$size-line-height-xxxl",
-        "isUsed": false
+        "isUsed": true
     }
 ]

package/build/cjs/web-tokens/layout-vars.d.ts

@@ -1,13 +1,20 @@
 export declare const LAYOUT_VARS: {
     readonly contentWidth: "--ds-layout-content-width";
+    readonly contentStart: "--ds-layout-content-start";
     readonly leftPanelWidth: "--ds-layout-leftPanel-width";
+    readonly leftPanelStart: "--ds-layout-leftPanel-start";
     readonly rightPanelWidth: "--ds-layout-rightPanel-width";
     readonly rightPanelBottomBarHeight: "--ds-layout-rightPanel-bottomBar-height";
+    readonly rightPanelStart: "--ds-layout-rightPanel-start";
     readonly splitMaxWidth: "--ds-layout-split-max-width";
     readonly bottomBarHeight: "--ds-layout-bottomBar-height";
+    readonly bottomBarContentHeight: "--ds-layout-bottomBar-content-height";
     readonly subnavOffset: "--ds-layout-subnav-offset";
     readonly floatWidth: "--ds-layout-float-width";
     readonly floatHeight: "--ds-layout-float-height";
+    readonly splitviewWidth: "--ds-layout-splitview-width";
+    readonly splitviewStart: "--ds-layout-splitview-start";
+    readonly regionsReady: "--ds-layout-regions-ready";
 };
 export type LayoutVarKey = keyof typeof LAYOUT_VARS;
 export type LayoutVarName = (typeof LAYOUT_VARS)[LayoutVarKey];

package/build/cjs/web-tokens/layout-vars.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LAYOUT_VARS",{enumerable:!0,get:function(){return LAYOUT_VARS}});const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",leftPanelWidth:"--ds-layout-leftPanel-width",rightPanelWidth:"--ds-layout-rightPanel-width",rightPanelBottomBarHeight:"--ds-layout-rightPanel-bottomBar-height",splitMaxWidth:"--ds-layout-split-max-width",bottomBarHeight:"--ds-layout-bottomBar-height",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"LAYOUT_VARS",{enumerable:!0,get:function(){return LAYOUT_VARS}});const LAYOUT_VARS={contentWidth:"--ds-layout-content-width",contentStart:"--ds-layout-content-start",leftPanelWidth:"--ds-layout-leftPanel-width",leftPanelStart:"--ds-layout-leftPanel-start",rightPanelWidth:"--ds-layout-rightPanel-width",rightPanelBottomBarHeight:"--ds-layout-rightPanel-bottomBar-height",rightPanelStart:"--ds-layout-rightPanel-start",splitMaxWidth:"--ds-layout-split-max-width",bottomBarHeight:"--ds-layout-bottomBar-height",bottomBarContentHeight:"--ds-layout-bottomBar-content-height",subnavOffset:"--ds-layout-subnav-offset",floatWidth:"--ds-layout-float-width",floatHeight:"--ds-layout-float-height",splitviewWidth:"--ds-layout-splitview-width",splitviewStart:"--ds-layout-splitview-start",regionsReady:"--ds-layout-regions-ready"};

package/build/cjs/web-tokens/layout-vars.ts

@@ -3,14 +3,21 @@
 
 export const LAYOUT_VARS = {
   contentWidth: "--ds-layout-content-width",
+  contentStart: "--ds-layout-content-start",
   leftPanelWidth: "--ds-layout-leftPanel-width",
+  leftPanelStart: "--ds-layout-leftPanel-start",
   rightPanelWidth: "--ds-layout-rightPanel-width",
   rightPanelBottomBarHeight: "--ds-layout-rightPanel-bottomBar-height",
+  rightPanelStart: "--ds-layout-rightPanel-start",
   splitMaxWidth: "--ds-layout-split-max-width",
   bottomBarHeight: "--ds-layout-bottomBar-height",
+  bottomBarContentHeight: "--ds-layout-bottomBar-content-height",
   subnavOffset: "--ds-layout-subnav-offset",
   floatWidth: "--ds-layout-float-width",
   floatHeight: "--ds-layout-float-height",
+  splitviewWidth: "--ds-layout-splitview-width",
+  splitviewStart: "--ds-layout-splitview-start",
+  regionsReady: "--ds-layout-regions-ready",
 } as const;
 
 export type LayoutVarKey = keyof typeof LAYOUT_VARS;

package/build/cjs/web-tokens/visualConfig.d.ts

@@ -230,12 +230,18 @@ type Variables = {
             "width": {
                 "default": string;
             };
+            "start": {
+                "default": string;
+            };
         };
         "leftPanel": {
             "width": {
                 "default": string;
                 "open": string;
             };
+            "start": {
+                "default": string;
+            };
         };
         "rightPanel": {
             "width": {
@@ -252,6 +258,9 @@ type Variables = {
                     "default": string;
                 };
             };
+            "start": {
+                "default": string;
+            };
         };
         "split": {
             "maxWidth": {
@@ -262,6 +271,9 @@ type Variables = {
             "height": {
                 "default": string;
             };
+            "contentHeight": {
+                "default": string;
+            };
         };
         "subnav": {
             "offset": {
@@ -276,6 +288,19 @@ type Variables = {
                 "default": string;
             };
         };
+        "splitview": {
+            "width": {
+                "default": string;
+            };
+            "start": {
+                "default": string;
+            };
+        };
+        "regions": {
+            "ready": {
+                "default": string;
+            };
+        };
     };
     "opacity": {
         "hidden": number;