@bigtablet/design-system 3.11.0 → 3.13.0

package/README.md

@@ -139,7 +139,8 @@ showAlert({ title: "Delete?", showCancel: true, onConfirm: ... });
 }
 ```
 
-> The React entry's `style.css` only emits `--bt-color-*`, `--bt-elevation-*`, `--bt-focus-*`, `--bt-sidebar-*`, and `--bt-bottom-nav-*`. Spacing, radius, and typography are **SCSS-only** on this entry - use `scss/token` for them (`--bt-spacing-*` / `--bt-radius-*` exist only in the [Vanilla bundle](./docs/VANILLA.md)).
+<!-- css-var-claim: 아래 한 줄이 React entry 의 변수 계열 전부를 주장한다. scripts/check-css-vars.sh 가 이 줄만 검사한다. -->
+> The React entry's `style.css` only emits `--bt-color-*`, `--bt-elevation-*`, `--bt-focus-*`, `--bt-sidebar-*`, `--bt-bottom-nav-*`, `--bt-bottom-inset*`, `--bt-scrollbar-width`. Spacing, radius, and typography are **SCSS-only** on this entry - use `scss/token` for them (`--bt-spacing-*` / `--bt-radius-*` exist only in the [Vanilla bundle](./docs/VANILLA.md)).
 
 `colors`&nbsp;·&nbsp;`spacing`&nbsp;·&nbsp;`typography`&nbsp;·&nbsp;`radius`&nbsp;·&nbsp;`elevation`&nbsp;·&nbsp;`motion`&nbsp;·&nbsp;`z-index`&nbsp;·&nbsp;`breakpoints`&nbsp;·&nbsp;`border-width`&nbsp;·&nbsp;`opacity`&nbsp;·&nbsp;`skeleton`&nbsp;·&nbsp;`icon`&nbsp;·&nbsp;`a11y`&nbsp;·&nbsp;`layout`<sup>SCSS only</sup>
 

package/dist/index.css

@@ -65,6 +65,11 @@
   --bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
   --bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
   --bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12);
+  --bt-bottom-nav-inset: 0px;
+  --bt-bottom-inset-app: 0px;
+}
+body {
+  --bt-bottom-inset: calc( var(--bt-bottom-nav-inset, 0px) + var(--bt-bottom-inset-app, 0px) );
 }
 :root {
   --bt-scrollbar-width: 0px;
@@ -502,6 +507,10 @@ select:-webkit-autofill:disabled {
   width: 100%;
   gap: 12px;
 }
+.empty_state_fill_height {
+  flex: 1;
+  justify-content: center;
+}
 .empty_state_illustration {
   color: var(--bt-color-text-caption);
   display: inline-flex;
@@ -634,6 +643,9 @@ select:-webkit-autofill:disabled {
   --bt-bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);
   --bt-bottom-nav-total-height: calc( var(--bt-bottom-nav-height) + var(--bt-bottom-nav-safe-area) );
 }
+body:has(.bottom_nav) {
+  --bt-bottom-nav-inset: var(--bt-bottom-nav-total-height);
+}
 .bottom_nav {
   position: fixed;
   left: 0;
@@ -643,6 +655,7 @@ select:-webkit-autofill:disabled {
   display: flex;
   align-items: stretch;
   justify-content: space-around;
+  box-sizing: border-box;
   height: var(--bt-bottom-nav-total-height);
   padding-bottom: var(--bt-bottom-nav-safe-area);
   background: var(--bt-color-bg-solid);
@@ -1337,7 +1350,8 @@ select:-webkit-autofill:disabled {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
@@ -1443,6 +1457,8 @@ select:-webkit-autofill:disabled {
     margin: 0;
     overflow: visible;
     clip: auto;
+    clip-path: none;
+    white-space: normal;
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1666,7 +1682,7 @@ select:-webkit-autofill:disabled {
   line-height: 1.4;
   font-weight: 500;
   white-space: normal;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   word-break: keep-all;
   text-align: center;
   box-shadow: var(--bt-elevation-level2);
@@ -2266,7 +2282,8 @@ select:-webkit-autofill:disabled {
 .button_label {
   position: relative;
   white-space: normal;
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: keep-all;
   text-align: center;
 }
 .button_full_width {
@@ -2789,6 +2806,244 @@ select:-webkit-autofill:disabled {
   }
 }
 
+/* src/ui/display/prose/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.prose {
+  font-family: "Pretendard", sans-serif;
+  color: var(--bt-color-text-heading);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+}
+.prose p,
+.prose ul,
+.prose ol,
+.prose blockquote,
+.prose table,
+.prose pre {
+  margin: 0 0 16px;
+}
+.prose > :last-child {
+  margin-bottom: 0;
+}
+.prose,
+.prose p,
+.prose li,
+.prose blockquote,
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6,
+.prose dl,
+.prose dd,
+.prose ul,
+.prose ol {
+  white-space: normal;
+}
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  color: var(--bt-color-text-heading);
+  margin: 20px 0 8px;
+}
+.prose h1:first-child,
+.prose h2:first-child,
+.prose h3:first-child,
+.prose h4:first-child,
+.prose h5:first-child,
+.prose h6:first-child {
+  margin-top: 0;
+}
+.prose h1 {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--bt-color-border-default);
+}
+.prose h2 {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 0px;
+}
+.prose h3 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+.prose h4,
+.prose h5,
+.prose h6 {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+.prose ul,
+.prose ol {
+  padding-left: 24px;
+}
+.prose ul {
+  list-style: disc;
+}
+.prose ol {
+  list-style: decimal;
+}
+.prose li {
+  margin-bottom: 4px;
+}
+.prose li > p {
+  margin-bottom: 0;
+}
+.prose li ul,
+.prose li ol {
+  margin: 4px 0 0;
+}
+.prose code {
+  font-family:
+    ui-monospace,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    monospace;
+  font-size: 13px;
+  line-height: 18px;
+  background: var(--bt-color-bg-solid-dim);
+  color: var(--bt-color-text-heading);
+  border-radius: 4px;
+  padding: 0.2em 0.45em;
+}
+.prose pre {
+  background: var(--bt-color-bg-inverse-surface);
+  border-radius: 8px;
+  padding: 20px;
+  overflow-x: auto;
+}
+.prose pre code {
+  background: transparent;
+  color: var(--bt-color-text-inverse);
+  padding: 0;
+  border-radius: 0;
+}
+.prose blockquote {
+  border-left: 4px solid var(--bt-color-accent-default);
+  background: color-mix(in srgb, var(--bt-color-accent-default) 5%, transparent);
+  border-radius: 0 6px 6px 0;
+  padding: 8px 12px;
+  color: var(--bt-color-text-body);
+}
+.prose blockquote > :last-child {
+  margin-bottom: 0;
+}
+.prose blockquote blockquote {
+  border-left: none;
+  padding-left: 0;
+  background: transparent;
+  margin-bottom: 0;
+}
+.prose a {
+  color: var(--bt-color-accent-default);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.prose a:hover {
+  text-decoration-thickness: 2px;
+}
+.prose a:focus-visible {
+  outline: none;
+  border-radius: 4px;
+  box-shadow: var(--bt-focus-ring);
+}
+.prose strong {
+  font-weight: 600;
+}
+.prose em {
+  font-style: italic;
+}
+.prose del {
+  text-decoration: line-through;
+  color: var(--bt-color-text-caption);
+}
+.prose hr {
+  border: none;
+  border-top: 2px solid var(--bt-color-border-default);
+  margin: 24px 0;
+}
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  display: block;
+  margin: 16px auto;
+}
+.prose table {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+.prose pre[tabindex]:focus-visible,
+.prose table[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
+.prose th,
+.prose td {
+  padding: 4px 12px;
+  border: 1px solid var(--bt-color-border-default);
+  text-align: left;
+  white-space: nowrap;
+}
+.prose th {
+  background: var(--bt-color-bg-solid-dim);
+  font-weight: 600;
+}
+.prose_size_lg h1,
+.prose_size_lg h2,
+.prose_size_lg h3,
+.prose_size_lg h4,
+.prose_size_lg h5,
+.prose_size_lg h6 {
+  margin-top: 32px;
+}
+.prose_size_lg h1 {
+  font-size: 28px;
+  line-height: 36px;
+}
+.prose_size_lg h2 {
+  font-size: 24px;
+  line-height: 32px;
+}
+.prose_size_lg h3 {
+  font-size: 20px;
+  line-height: 28px;
+}
+.prose_size_lg h4,
+.prose_size_lg h5,
+.prose_size_lg h6 {
+  font-size: 16px;
+  line-height: 24px;
+}
+.prose_size_lg li {
+  margin-bottom: 8px;
+}
+
 /* src/ui/feedback/skeleton/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -2874,10 +3129,13 @@ select:-webkit-autofill:disabled {
   position: absolute;
   width: 1px;
   height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
+  border: 0;
 }
 .checkbox_state_layer {
   display: inline-flex;
@@ -3014,7 +3272,8 @@ select:-webkit-autofill:disabled {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
@@ -3496,7 +3755,7 @@ select:-webkit-autofill:disabled {
 @media (max-width: 599px) {
   .toast_container {
     top: auto;
-    bottom: 16px;
+    bottom: calc(16px + var(--bt-bottom-inset, 0px));
     left: 16px;
     right: 16px;
     width: auto;
@@ -3561,7 +3820,8 @@ select:-webkit-autofill:disabled {
 }
 .toast_message {
   flex: 1;
-  word-break: break-word;
+  overflow-wrap: anywhere;
+  word-break: keep-all;
 }
 .toast_close {
   flex-shrink: 0;
@@ -4074,7 +4334,8 @@ select:-webkit-autofill:disabled {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
@@ -4378,7 +4639,8 @@ select:-webkit-autofill:disabled {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }
@@ -4526,10 +4788,13 @@ select:-webkit-autofill:disabled {
   position: absolute;
   width: 1px;
   height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
+  border: 0;
 }
 .radio_state_layer {
   display: inline-flex;
@@ -4894,6 +5159,10 @@ select:-webkit-autofill:disabled {
   cursor: not-allowed;
   color: var(--bt-color-text-disabled);
 }
+.text_field_input_identifier {
+  font-feature-settings: "cv05" 1, "cv08" 1;
+  font-variant-numeric: slashed-zero;
+}
 .text_field_icon {
   display: inline-flex;
   align-items: center;
@@ -5033,6 +5302,20 @@ select:-webkit-autofill:disabled {
   transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
   cursor: pointer;
 }
+.toggle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  min-height: 32px;
+}
+@media (max-width: 599px) {
+  .toggle::after {
+    min-height: 40px;
+  }
+}
 .toggle_thumb {
   position: relative;
   width: 12px;
@@ -5455,6 +5738,10 @@ select:-webkit-autofill:disabled {
   line-height: 22.5px;
   letter-spacing: 0px;
 }
+.drawer_body:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
 .drawer_footer {
   flex: 0 0 auto;
   display: flex;
@@ -5502,6 +5789,8 @@ select:-webkit-autofill:disabled {
   border-radius: 12px;
   box-shadow: var(--bt-elevation-level3);
   max-width: calc(100% - 64px);
+  max-height: calc(100vh - 64px);
+  max-height: calc(100dvh - 64px);
   padding: 24px;
   overflow: visible;
   will-change: transform, opacity;
@@ -5544,6 +5833,14 @@ select:-webkit-autofill:disabled {
   line-height: 36px;
   letter-spacing: -0.01em;
 }
+@media (max-width: 599px) {
+  .modal_title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 32px;
+    letter-spacing: -0.01em;
+  }
+}
 .modal_description {
   margin: 0;
   color: var(--bt-color-text-body);
@@ -5559,12 +5856,19 @@ select:-webkit-autofill:disabled {
   margin-bottom: 0;
 }
 .modal_body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
   color: var(--bt-color-text-body);
   font-size: 15px;
   font-weight: 400;
   line-height: 22.5px;
   letter-spacing: 0px;
 }
+.modal_body:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
 .modal_footer {
   display: flex;
   gap: 8px;