@dialpad/dialtone 9.177.1 → 9.178.0

package/dist/css/dialtone.css

@@ -4534,6 +4534,81 @@ legend .d-label--md {
     --check-radio-color-background: var(--check-radio-color-background-disabled);
   }
 }
+.d-resizable {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: clip;
+}
+.d-resizable--column {
+  -webkit-writing-mode: vertical-lr;
+      -ms-writing-mode: tb-lr;
+          writing-mode: vertical-lr;
+}
+.d-resizable-panel {
+  position: absolute;
+  inset-block: 0;
+  overflow: hidden;
+}
+.d-resizable-panel--collapsed {
+  pointer-events: none;
+}
+.d-resizable-panel__content {
+  display: flex;
+  flex: 1;
+  align-items: start;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  -webkit-writing-mode: horizontal-tb;
+      -ms-writing-mode: lr-tb;
+          writing-mode: horizontal-tb;
+}
+.d-resizable-handle {
+  --d-resizable-handle-color-surface: var(--dt-color-border-focus);
+  position: absolute;
+  z-index: calc(var(--zi-navigation-fixed) + var(--zi-base1));
+  background-color: transparent;
+  border-radius: var(--dt-size-radius-pill);
+  touch-action: none;
+  inset-block: var(--dt-size-200);
+  inline-size: var(--dt-size-300);
+}
+.d-resizable-handle::before {
+  position: absolute;
+  content: '';
+  inset: var(--dt-size-400-negative);
+}
+.d-resizable-handle--row {
+  cursor: ew-resize;
+}
+.d-resizable-handle--column {
+  cursor: ns-resize;
+}
+.d-resizable-handle--disabled {
+  background-color: transparent !important;
+  cursor: default;
+  opacity: var(--dt-opacity-500);
+  pointer-events: none;
+}
+.d-resizable-handle__indicator {
+  position: absolute;
+  background-color: transparent;
+  border-radius: var(--dt-size-radius-pill);
+  transition: background-color var(--td150) ease;
+  inset: 0;
+}
+.d-resizable-handle:hover:not(.d-resizable-handle--disabled) .d-resizable-handle__indicator,
+.d-resizable-handle--active .d-resizable-handle__indicator {
+  background-color: var(--d-resizable-handle-color-surface);
+}
+.d-resizable-handle:focus {
+  outline: none;
+}
+.d-resizable-handle:focus-visible {
+  background-color: var(--d-resizable-handle-color-surface);
+  box-shadow: none;
+}
 .d-rich-text-editor__code-block {
   padding: var(--dt-space-400);
   font: var(--dt-typography-code-md);