@dialpad/dialtone-css 8.81.0-next.11 → 8.81.0-next.13

package/lib/build/less/components/emoji-picker.less

@@ -38,7 +38,8 @@
     // !important to default value to override popover dialog box-sizing: border-box style
     box-sizing: content-box !important;
     inline-size: auto;
-    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
+    // 340px fits 9 emojis per row (9 × 36px + 8 × 2px gap)
+    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
     margin: 0 var(--dt-spacing-200);
   }
 
@@ -59,6 +60,10 @@
 
   &__tabset-list {
       gap: var(--dt-spacing-0);
+      // The tabset sits flush above the emoji list, so it does not need the
+      // standalone tablist's underline gap that would otherwise add height here.
+      --tablist-padding-bottom: var(--dt-spacing-0);
+
 
       &::after {
         background-color: var(--dt-color-neutral-transparent) !important;
@@ -127,7 +132,8 @@
   }
 
   &__selector {
-    min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
+    // 297px keeps the list tall enough to show a full grid of emoji rows
+    min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
 
     p {
       padding-block-end: var(--dt-spacing-50);
@@ -149,7 +155,8 @@
   &__list {
     position: relative;
     block-size: 100%;
-    max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
+    // 297px keeps the list tall enough to show a full grid of emoji rows
+    max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
     padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
     overflow: hidden auto;
 
@@ -173,7 +180,8 @@
     flex-wrap: wrap;
     gap: var(--dt-spacing-25);
     inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
-    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
+    // 340px fits 9 emojis per row (9 × 36px + 8 × 2px gap)
+    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
     // We use this margin left to align the emoji list with the tabset label
     margin-inline-start: var(--dt-spacing-75-negative);
     padding-block-start: var(--dt-spacing-50);

package/lib/build/less/components/radio-checkbox.less

@@ -197,9 +197,19 @@
         &:focus,
         &:focus-visible,
         &:checked:focus-visible {
+            --check-radio-color-border: var(--dt-color-border-focus);
+
             box-shadow: var(--dt-shadow-focus);
         }
 
+        &:checked:focus,
+        &:checked:focus-visible,
+        &:indeterminate:focus,
+        &:indeterminate:focus-visible {
+            outline: var(--dt-size-border-200) solid CanvasText;
+            outline-offset: calc(var(--dt-size-border-200) * -1);
+        }
+
         &:checked {
             --check-radio-color-background: var(--check-radio-color-background-checked);
 
@@ -295,7 +305,11 @@
         &:focus,
         &:focus-visible,
         &:checked:focus-visible {
-          box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-border-200) var(--dt-radio-color-foreground-checked);
+          outline: var(--dt-size-border-200) solid var(--dt-color-border-focus);
+          outline-offset: calc(var(--dt-size-border-200) * -1);
+          box-shadow:
+            inset 0 0 0 var(--dt-size-border-200) var(--dt-radio-color-foreground-checked)
+          ;
         }
 
         &--disabled:checked {

package/lib/build/less/components/toggle.less

@@ -151,8 +151,11 @@
   //  $$  FOCUSED TOGGLE
   //  ----------------------------------------------------------------------------
   &:focus-visible {
-    outline: none;
-    box-shadow: var(--dt-shadow-focus);
+    box-shadow: none;
+
+    &::after {
+      box-shadow: var(--dt-shadow-focus);
+    }
   }
 
   //  $$  DISABLED TOGGLE

package/lib/dist/dialtone-default-theme.css

@@ -6833,7 +6833,9 @@
             transform: translate(-50%, 0);
   }
   .d-toggle:focus-visible {
-    outline: none;
+    box-shadow: none;
+  }
+  .d-toggle:focus-visible::after {
     box-shadow: var(--dt-shadow-focus);
   }
   .d-toggle--disabled,
@@ -9635,8 +9637,16 @@
     .d-checkbox:focus,
     .d-checkbox:focus-visible,
     .d-checkbox:checked:focus-visible {
+      --check-radio-color-border: var(--dt-color-border-focus);
       box-shadow: var(--dt-shadow-focus);
     }
+    .d-checkbox:checked:focus,
+    .d-checkbox:checked:focus-visible,
+    .d-checkbox:indeterminate:focus,
+    .d-checkbox:indeterminate:focus-visible {
+      outline: var(--dt-size-border-200) solid CanvasText;
+      outline-offset: calc(var(--dt-size-border-200) * -1);
+    }
     .d-checkbox:checked {
       --check-radio-color-background: var(--check-radio-color-background-checked);
       background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
@@ -9708,7 +9718,9 @@
     .d-radio:focus,
     .d-radio:focus-visible,
     .d-radio:checked:focus-visible {
-      box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-border-200) var(--dt-radio-color-foreground-checked);
+      outline: var(--dt-size-border-200) solid var(--dt-color-border-focus);
+      outline-offset: calc(var(--dt-size-border-200) * -1);
+      box-shadow: inset 0 0 0 var(--dt-size-border-200) var(--dt-radio-color-foreground-checked);
     }
     .d-radio--disabled:checked {
       --check-radio-color-border: var(--check-radio-color-border-disabled);
@@ -10794,7 +10806,7 @@
   .d-emoji-picker__alignment {
     box-sizing: content-box !important;
     inline-size: auto;
-    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
+    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
     margin: 0 var(--dt-spacing-200);
   }
   .d-emoji-picker--footer {
@@ -10813,6 +10825,7 @@
   }
   .d-emoji-picker__tabset-list {
     gap: var(--dt-spacing-0);
+    --tablist-padding-bottom: var(--dt-spacing-0);
   }
   .d-emoji-picker__tabset-list::after {
     background-color: var(--dt-color-neutral-transparent) !important;
@@ -10867,7 +10880,7 @@
     border-color: var(--dt-color-border-subtle);
   }
   .d-emoji-picker__selector {
-    min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
+    min-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
   }
   .d-emoji-picker__selector p {
     -webkit-padding-after: var(--dt-spacing-50);
@@ -10887,7 +10900,7 @@
   .d-emoji-picker__list {
     position: relative;
     block-size: 100%;
-    max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-1));
+    max-block-size: calc(var(--dt-layout-450) + var(--dt-spacing-100) + var(--dt-spacing-1));
     -webkit-padding-after: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
             padding-block-end: calc(var(--dt-spacing-50) + var(--dt-spacing-1));
     overflow: hidden auto;
@@ -10909,7 +10922,7 @@
     flex-wrap: wrap;
     gap: var(--dt-spacing-25);
     inline-size: calc(100% + calc(var(--dt-layout-25) - var(--dt-spacing-1)));
-    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-100));
+    max-inline-size: calc(var(--dt-layout-500) + var(--dt-spacing-250));
     -webkit-margin-start: var(--dt-spacing-75-negative);
             margin-inline-start: var(--dt-spacing-75-negative);
     -webkit-padding-before: var(--dt-spacing-50);