@dialpad/dialtone 7.24.1 → 7.25.1

package/lib/dist/css/dialtone.css

@@ -417,16 +417,6 @@ body {
   --size-700: calc(0.8rem * 8);
   --size-800: calc(0.8rem * 16);
 }
-body {
-  --size-100: calc(0.8rem / 8);
-  --size-200: calc(0.8rem / 4);
-  --size-300: calc(0.8rem / 2);
-  --size-400: 0.8rem;
-  --size-500: calc(0.8rem * 2);
-  --size-600: calc(0.8rem * 4);
-  --size-700: calc(0.8rem * 8);
-  --size-800: calc(0.8rem * 16);
-}
 body {
   --size-100-16: calc(1.6rem / 8);
   --size-200-16: calc(1.6rem / 4);
@@ -3655,10 +3645,51 @@ legend .d-label {
   --icon-size: var(--icon-size-100);
 }
 .d-root-layout {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template: 'header' auto 'body' 1fr 'footer' auto / 1fr;
+  min-height: 100vh;
+}
+.d-root-layout--fixed {
   height: 100vh;
 }
+.d-root-layout__header {
+  grid-area: header;
+}
+.d-root-layout__header--sticky {
+  position: sticky;
+  top: 0;
+}
+.d-root-layout__body {
+  display: flex;
+  grid-area: body;
+  overflow: auto;
+  box-shadow: none;
+}
+.d-root-layout__body--invert {
+  flex-direction: row-reverse;
+}
+.d-root-layout__sidebar {
+  box-shadow: none;
+}
+.d-root-layout__sidebar--sticky {
+  position: sticky;
+  top: 0;
+  height: 100%;
+  overflow: auto;
+}
+.d-root-layout__content {
+  flex: 1;
+  box-shadow: none;
+}
+.d-root-layout__content.focus-visible.js-focus-visible, .js-focus-visible .d-root-layout__content.focus-visible {
+  box-shadow: none;
+}
+.d-root-layout__content:focus-visible {
+  box-shadow: none;
+}
+.d-root-layout__footer {
+  grid-area: footer;
+}
 .d-stack {
   --stack-gap: 0;
   --stack-direction: column;
@@ -13614,6 +13645,42 @@ body.theme-dark .d\:d-bgc-black-700 {
 .fv\:d-bgc-moderate-opaque:focus-visible {
   background-color: var(--bgc-moderate-opaque);
 }
+.d-bgc-strong-opaque {
+  background-color: var(--bgc-strong-opaque);
+}
+.h\:d-bgc-strong-opaque:hover {
+  background-color: var(--bgc-strong-opaque);
+}
+.f\:d-bgc-strong-opaque:focus {
+  background-color: var(--bgc-strong-opaque);
+}
+.f\:d-bgc-strong-opaque:focus-within {
+  background-color: var(--bgc-strong-opaque);
+}
+.fv\:d-bgc-strong-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-strong-opaque.focus-visible {
+  background-color: var(--bgc-strong-opaque);
+}
+.fv\:d-bgc-strong-opaque:focus-visible {
+  background-color: var(--bgc-strong-opaque);
+}
+.d-bgc-contrast-opaque {
+  background-color: var(--bgc-contrast-opaque);
+}
+.h\:d-bgc-contrast-opaque:hover {
+  background-color: var(--bgc-contrast-opaque);
+}
+.f\:d-bgc-contrast-opaque:focus {
+  background-color: var(--bgc-contrast-opaque);
+}
+.f\:d-bgc-contrast-opaque:focus-within {
+  background-color: var(--bgc-contrast-opaque);
+}
+.fv\:d-bgc-contrast-opaque.focus-visible.js-focus-visible, .js-focus-visible .fv\:d-bgc-contrast-opaque.focus-visible {
+  background-color: var(--bgc-contrast-opaque);
+}
+.fv\:d-bgc-contrast-opaque:focus-visible {
+  background-color: var(--bgc-contrast-opaque);
+}
 .d-bgc-bold-opaque {
   background-color: var(--bgc-bold-opaque);
 }
@@ -22139,8 +22206,10 @@ body {
   --bgc-bold-opaque: hsla(var(--black-900-hsl) / 0.18);
   --bgc-strong: var(--black-600);
   --bgc-strong-hsl: var(--black-600-hsl);
+  --bgc-strong-opaque: hsla(var(--black-900-hsl) / 0.67);
   --bgc-contrast: var(--black-800);
   --bgc-contrast-hsl: var(--black-800-hsl);
+  --bgc-contrast-opaque: hsla(var(--black-900-hsl) / 0.87);
   --bc-subtle: rgba(0, 0, 0, 0.1);
   --bc-default: rgba(0, 0, 0, 0.18);
   --bc-moderate: rgba(0, 0, 0, 0.34);
@@ -22447,10 +22516,18 @@ body.theme-dark {
   --bc-moderate: rgba(255, 255, 255, 0.4);
   --bc-bold: rgba(255, 255, 255, 0.6);
   --bgc-moderate-opaque: var(--bgc-moderate);
+  --bgc-strong-opaque: var(--bgc-strong);
+  --bgc-contrast-opaque: var(--bgc-contrast);
   --fc-critical: var(--red-400);
   --fc-warning: var(--gold-400);
 }
 @media (max-width: 480px) {
+  .d-root-layout__responsive--sm .d-root-layout__body {
+    flex-direction: column;
+  }
+  .d-root-layout__responsive--sm .d-root-layout__body--invert {
+    flex-direction: column-reverse;
+  }
 .sm\:d-stack {
   --stack-gap: 0;
   --stack-direction: column;
@@ -22961,6 +23038,120 @@ body.theme-dark {
 .sm\:d-pr-unset {
   padding-right: unset !important;
 }
+.sm\:d-pb0 {
+  padding-bottom: 0 !important;
+}
+.sm\:d-pb1 {
+  padding-bottom: 0.1rem !important;
+}
+.sm\:d-pb2 {
+  padding-bottom: 0.2rem !important;
+}
+.sm\:d-pb4 {
+  padding-bottom: 0.4rem !important;
+}
+.sm\:d-pb6 {
+  padding-bottom: 0.6rem !important;
+}
+.sm\:d-pb8 {
+  padding-bottom: 0.8rem !important;
+}
+.sm\:d-pb12 {
+  padding-bottom: 1.2rem !important;
+}
+.sm\:d-pb16 {
+  padding-bottom: 1.6rem !important;
+}
+.sm\:d-pb24 {
+  padding-bottom: 2.4rem !important;
+}
+.sm\:d-pb32 {
+  padding-bottom: 3.2rem !important;
+}
+.sm\:d-pb48 {
+  padding-bottom: 4.8rem !important;
+}
+.sm\:d-pb64 {
+  padding-bottom: 6.4rem !important;
+}
+.sm\:d-pb72 {
+  padding-bottom: 7.2rem !important;
+}
+.sm\:d-pb84 {
+  padding-bottom: 8.4rem !important;
+}
+.sm\:d-pb96 {
+  padding-bottom: 9.6rem !important;
+}
+.sm\:d-pb102 {
+  padding-bottom: 10.2rem !important;
+}
+.sm\:d-pb114 {
+  padding-bottom: 11.4rem !important;
+}
+.sm\:d-pb128 {
+  padding-bottom: 12.8rem !important;
+}
+.sm\:d-pb-unset {
+  padding-bottom: unset !important;
+}
+.sm\:d-pl0 {
+  padding-left: 0 !important;
+}
+.sm\:d-pl1 {
+  padding-left: 0.1rem !important;
+}
+.sm\:d-pl2 {
+  padding-left: 0.2rem !important;
+}
+.sm\:d-pl4 {
+  padding-left: 0.4rem !important;
+}
+.sm\:d-pl6 {
+  padding-left: 0.6rem !important;
+}
+.sm\:d-pl8 {
+  padding-left: 0.8rem !important;
+}
+.sm\:d-pl12 {
+  padding-left: 1.2rem !important;
+}
+.sm\:d-pl16 {
+  padding-left: 1.6rem !important;
+}
+.sm\:d-pl24 {
+  padding-left: 2.4rem !important;
+}
+.sm\:d-pl32 {
+  padding-left: 3.2rem !important;
+}
+.sm\:d-pl48 {
+  padding-left: 4.8rem !important;
+}
+.sm\:d-pl64 {
+  padding-left: 6.4rem !important;
+}
+.sm\:d-pl72 {
+  padding-left: 7.2rem !important;
+}
+.sm\:d-pl84 {
+  padding-left: 8.4rem !important;
+}
+.sm\:d-pl96 {
+  padding-left: 9.6rem !important;
+}
+.sm\:d-pl102 {
+  padding-left: 10.2rem !important;
+}
+.sm\:d-pl114 {
+  padding-left: 11.4rem !important;
+}
+.sm\:d-pl128 {
+  padding-left: 12.8rem !important;
+}
+.sm\:d-pl-unset {
+  padding-left: unset !important;
+}
 .sm\:d-fs-100 {
   font-size: var(--fs-100) !important;
 }
@@ -22978,6 +23169,12 @@ body.theme-dark {
 }
 }
 @media (max-width: 640px) {
+  .d-root-layout__responsive--md .d-root-layout__body {
+    flex-direction: column;
+  }
+  .d-root-layout__responsive--md .d-root-layout__body--invert {
+    flex-direction: column-reverse;
+  }
 .md\:d-stack {
   --stack-gap: 0;
   --stack-direction: column;
@@ -23488,6 +23685,120 @@ body.theme-dark {
 .md\:d-pr-unset {
   padding-right: unset !important;
 }
+.md\:d-pb0 {
+  padding-bottom: 0 !important;
+}
+.md\:d-pb1 {
+  padding-bottom: 0.1rem !important;
+}
+.md\:d-pb2 {
+  padding-bottom: 0.2rem !important;
+}
+.md\:d-pb4 {
+  padding-bottom: 0.4rem !important;
+}
+.md\:d-pb6 {
+  padding-bottom: 0.6rem !important;
+}
+.md\:d-pb8 {
+  padding-bottom: 0.8rem !important;
+}
+.md\:d-pb12 {
+  padding-bottom: 1.2rem !important;
+}
+.md\:d-pb16 {
+  padding-bottom: 1.6rem !important;
+}
+.md\:d-pb24 {
+  padding-bottom: 2.4rem !important;
+}
+.md\:d-pb32 {
+  padding-bottom: 3.2rem !important;
+}
+.md\:d-pb48 {
+  padding-bottom: 4.8rem !important;
+}
+.md\:d-pb64 {
+  padding-bottom: 6.4rem !important;
+}
+.md\:d-pb72 {
+  padding-bottom: 7.2rem !important;
+}
+.md\:d-pb84 {
+  padding-bottom: 8.4rem !important;
+}
+.md\:d-pb96 {
+  padding-bottom: 9.6rem !important;
+}
+.md\:d-pb102 {
+  padding-bottom: 10.2rem !important;
+}
+.md\:d-pb114 {
+  padding-bottom: 11.4rem !important;
+}
+.md\:d-pb128 {
+  padding-bottom: 12.8rem !important;
+}
+.md\:d-pb-unset {
+  padding-bottom: unset !important;
+}
+.md\:d-pl0 {
+  padding-left: 0 !important;
+}
+.md\:d-pl1 {
+  padding-left: 0.1rem !important;
+}
+.md\:d-pl2 {
+  padding-left: 0.2rem !important;
+}
+.md\:d-pl4 {
+  padding-left: 0.4rem !important;
+}
+.md\:d-pl6 {
+  padding-left: 0.6rem !important;
+}
+.md\:d-pl8 {
+  padding-left: 0.8rem !important;
+}
+.md\:d-pl12 {
+  padding-left: 1.2rem !important;
+}
+.md\:d-pl16 {
+  padding-left: 1.6rem !important;
+}
+.md\:d-pl24 {
+  padding-left: 2.4rem !important;
+}
+.md\:d-pl32 {
+  padding-left: 3.2rem !important;
+}
+.md\:d-pl48 {
+  padding-left: 4.8rem !important;
+}
+.md\:d-pl64 {
+  padding-left: 6.4rem !important;
+}
+.md\:d-pl72 {
+  padding-left: 7.2rem !important;
+}
+.md\:d-pl84 {
+  padding-left: 8.4rem !important;
+}
+.md\:d-pl96 {
+  padding-left: 9.6rem !important;
+}
+.md\:d-pl102 {
+  padding-left: 10.2rem !important;
+}
+.md\:d-pl114 {
+  padding-left: 11.4rem !important;
+}
+.md\:d-pl128 {
+  padding-left: 12.8rem !important;
+}
+.md\:d-pl-unset {
+  padding-left: unset !important;
+}
 .md\:d-fs-100 {
   font-size: var(--fs-100) !important;
 }
@@ -23505,6 +23816,12 @@ body.theme-dark {
 }
 }
 @media (max-width: 980px) {
+  .d-root-layout__responsive--lg .d-root-layout__body {
+    flex-direction: column;
+  }
+  .d-root-layout__responsive--lg .d-root-layout__body--invert {
+    flex-direction: column-reverse;
+  }
 .lg\:d-stack {
   --stack-gap: 0;
   --stack-direction: column;
@@ -24015,6 +24332,120 @@ body.theme-dark {
 .lg\:d-pr-unset {
   padding-right: unset !important;
 }
+.lg\:d-pb0 {
+  padding-bottom: 0 !important;
+}
+.lg\:d-pb1 {
+  padding-bottom: 0.1rem !important;
+}
+.lg\:d-pb2 {
+  padding-bottom: 0.2rem !important;
+}
+.lg\:d-pb4 {
+  padding-bottom: 0.4rem !important;
+}
+.lg\:d-pb6 {
+  padding-bottom: 0.6rem !important;
+}
+.lg\:d-pb8 {
+  padding-bottom: 0.8rem !important;
+}
+.lg\:d-pb12 {
+  padding-bottom: 1.2rem !important;
+}
+.lg\:d-pb16 {
+  padding-bottom: 1.6rem !important;
+}
+.lg\:d-pb24 {
+  padding-bottom: 2.4rem !important;
+}
+.lg\:d-pb32 {
+  padding-bottom: 3.2rem !important;
+}
+.lg\:d-pb48 {
+  padding-bottom: 4.8rem !important;
+}
+.lg\:d-pb64 {
+  padding-bottom: 6.4rem !important;
+}
+.lg\:d-pb72 {
+  padding-bottom: 7.2rem !important;
+}
+.lg\:d-pb84 {
+  padding-bottom: 8.4rem !important;
+}
+.lg\:d-pb96 {
+  padding-bottom: 9.6rem !important;
+}
+.lg\:d-pb102 {
+  padding-bottom: 10.2rem !important;
+}
+.lg\:d-pb114 {
+  padding-bottom: 11.4rem !important;
+}
+.lg\:d-pb128 {
+  padding-bottom: 12.8rem !important;
+}
+.lg\:d-pb-unset {
+  padding-bottom: unset !important;
+}
+.lg\:d-pl0 {
+  padding-left: 0 !important;
+}
+.lg\:d-pl1 {
+  padding-left: 0.1rem !important;
+}
+.lg\:d-pl2 {
+  padding-left: 0.2rem !important;
+}
+.lg\:d-pl4 {
+  padding-left: 0.4rem !important;
+}
+.lg\:d-pl6 {
+  padding-left: 0.6rem !important;
+}
+.lg\:d-pl8 {
+  padding-left: 0.8rem !important;
+}
+.lg\:d-pl12 {
+  padding-left: 1.2rem !important;
+}
+.lg\:d-pl16 {
+  padding-left: 1.6rem !important;
+}
+.lg\:d-pl24 {
+  padding-left: 2.4rem !important;
+}
+.lg\:d-pl32 {
+  padding-left: 3.2rem !important;
+}
+.lg\:d-pl48 {
+  padding-left: 4.8rem !important;
+}
+.lg\:d-pl64 {
+  padding-left: 6.4rem !important;
+}
+.lg\:d-pl72 {
+  padding-left: 7.2rem !important;
+}
+.lg\:d-pl84 {
+  padding-left: 8.4rem !important;
+}
+.lg\:d-pl96 {
+  padding-left: 9.6rem !important;
+}
+.lg\:d-pl102 {
+  padding-left: 10.2rem !important;
+}
+.lg\:d-pl114 {
+  padding-left: 11.4rem !important;
+}
+.lg\:d-pl128 {
+  padding-left: 12.8rem !important;
+}
+.lg\:d-pl-unset {
+  padding-left: unset !important;
+}
 .lg\:d-fs-100 {
   font-size: var(--fs-100) !important;
 }
@@ -24542,6 +24973,120 @@ body.theme-dark {
 .xl\:d-pr-unset {
   padding-right: unset !important;
 }
+.xl\:d-pb0 {
+  padding-bottom: 0 !important;
+}
+.xl\:d-pb1 {
+  padding-bottom: 0.1rem !important;
+}
+.xl\:d-pb2 {
+  padding-bottom: 0.2rem !important;
+}
+.xl\:d-pb4 {
+  padding-bottom: 0.4rem !important;
+}
+.xl\:d-pb6 {
+  padding-bottom: 0.6rem !important;
+}
+.xl\:d-pb8 {
+  padding-bottom: 0.8rem !important;
+}
+.xl\:d-pb12 {
+  padding-bottom: 1.2rem !important;
+}
+.xl\:d-pb16 {
+  padding-bottom: 1.6rem !important;
+}
+.xl\:d-pb24 {
+  padding-bottom: 2.4rem !important;
+}
+.xl\:d-pb32 {
+  padding-bottom: 3.2rem !important;
+}
+.xl\:d-pb48 {
+  padding-bottom: 4.8rem !important;
+}
+.xl\:d-pb64 {
+  padding-bottom: 6.4rem !important;
+}
+.xl\:d-pb72 {
+  padding-bottom: 7.2rem !important;
+}
+.xl\:d-pb84 {
+  padding-bottom: 8.4rem !important;
+}
+.xl\:d-pb96 {
+  padding-bottom: 9.6rem !important;
+}
+.xl\:d-pb102 {
+  padding-bottom: 10.2rem !important;
+}
+.xl\:d-pb114 {
+  padding-bottom: 11.4rem !important;
+}
+.xl\:d-pb128 {
+  padding-bottom: 12.8rem !important;
+}
+.xl\:d-pb-unset {
+  padding-bottom: unset !important;
+}
+.xl\:d-pl0 {
+  padding-left: 0 !important;
+}
+.xl\:d-pl1 {
+  padding-left: 0.1rem !important;
+}
+.xl\:d-pl2 {
+  padding-left: 0.2rem !important;
+}
+.xl\:d-pl4 {
+  padding-left: 0.4rem !important;
+}
+.xl\:d-pl6 {
+  padding-left: 0.6rem !important;
+}
+.xl\:d-pl8 {
+  padding-left: 0.8rem !important;
+}
+.xl\:d-pl12 {
+  padding-left: 1.2rem !important;
+}
+.xl\:d-pl16 {
+  padding-left: 1.6rem !important;
+}
+.xl\:d-pl24 {
+  padding-left: 2.4rem !important;
+}
+.xl\:d-pl32 {
+  padding-left: 3.2rem !important;
+}
+.xl\:d-pl48 {
+  padding-left: 4.8rem !important;
+}
+.xl\:d-pl64 {
+  padding-left: 6.4rem !important;
+}
+.xl\:d-pl72 {
+  padding-left: 7.2rem !important;
+}
+.xl\:d-pl84 {
+  padding-left: 8.4rem !important;
+}
+.xl\:d-pl96 {
+  padding-left: 9.6rem !important;
+}
+.xl\:d-pl102 {
+  padding-left: 10.2rem !important;
+}
+.xl\:d-pl114 {
+  padding-left: 11.4rem !important;
+}
+.xl\:d-pl128 {
+  padding-left: 12.8rem !important;
+}
+.xl\:d-pl-unset {
+  padding-left: unset !important;
+}
 .xl\:d-fs-100 {
   font-size: var(--fs-100) !important;
 }