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

package/lib/dist/dialtone.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);