@tcn/ui 0.16.0 → 0.18.0

package/dist/themes/themes/ergo/ergo_theme.js

@@ -99,7 +99,7 @@ const r = `@layer tcn-theme {
     --on-material: var(--ergo-accent-blue);
   }
 }
-`, a = `@layer tcn-theme {
+`, e = `@layer tcn-theme {
   :root {
     /* ========== Blackcat System Tokens ========== */
     --scalar: 1;
@@ -167,7 +167,7 @@ const r = `@layer tcn-theme {
     --foreground-color-quaternary: var(--ergo-text-color-primary);
   }
 }
-`, e = `@layer tcn-theme {
+`, a = `@layer tcn-theme {
   /* ===== CSS VARIABLES ===== */
 
   .tcn-theme-root {
@@ -183,13 +183,6 @@ const r = `@layer tcn-theme {
   /* ===== Actions ===== */
 
   .tcn-interactive {
-    cursor: pointer;
-    user-select: none;
-    transition:
-      transform 0.1s,
-      background 0.1s,
-      color 0.1s;
-
     --ink: var(--on-material);
     --act: var(--action);
     --mat: var(--material);
@@ -199,6 +192,8 @@ const r = `@layer tcn-theme {
     --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);
     --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);
 
+    cursor: pointer;
+    user-select: none;
     background: var(--mat);
     color: var(--ink);
     transition:
@@ -227,7 +222,15 @@ const r = `@layer tcn-theme {
     }
   }
 
-  /* ===== Base Button ===== 
+  /* ===== MATERIAL ===== */
+
+  .material {
+    background-color: var(--material);
+    color: var(--on-material);
+  }
+}
+`, t = `@layer tcn-theme {
+  /* ===== Base Button =====
   * Shared between Button and Toggle.
   * Primarily manages button dimensions and sizing ratios.
   */
@@ -276,7 +279,7 @@ const r = `@layer tcn-theme {
     }
   }
 
-  /* ===== Button ===== 
+  /* ===== Button =====
   * Manages Hierarchy and Severity.
   */
   .tcn-button {
@@ -378,42 +381,6 @@ const r = `@layer tcn-theme {
     }
   }
 
-  /* @deprecated - use Button with utility prop instead */
-  .tcn-slim-button {
-    height: auto;
-    width: auto;
-    padding: 0;
-
-    &[data-size="sm"] {
-      min-height: 12px;
-      min-width: 12px;
-      padding: 0;
-      .tcn-icon {
-        min-height: 10px;
-        min-width: 10px;
-      }
-    }
-    &[data-size="md"] {
-      min-height: 18px;
-      min-width: 18px;
-      padding: 0;
-      .tcn-icon {
-        min-height: 14px;
-        min-width: 14px;
-      }
-    }
-
-    &[data-size="lg"] {
-      min-height: 24px;
-      min-width: 24px;
-      padding: 0;
-      .tcn-icon {
-        min-height: 20px;
-        min-width: 20px;
-      }
-    }
-  }
-
   .tcn-button[data-size].tcn-select {
     padding-inline-end: 26px;
   }
@@ -504,6 +471,7 @@ const r = `@layer tcn-theme {
     }
   }
 
+  /* TODO: move to inputs.css once that part file is extracted */
   .tcn-select-group {
     .tcn-select-group-option:hover,
     .tcn-select-group-option:active {
@@ -547,174 +515,446 @@ const r = `@layer tcn-theme {
       border-bottom-right-radius: var(--ergo-shape-radius-medium);
     }
   }
+}
+`, o = `@layer tcn-theme {
+  /* ===== INPUTS ===== */
+  .tcn-entry,
+  .tcn-control {
+    --act: var(--action);
+    --mat: var(--material);
+    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
 
-  /* ===== Tabs ===== */
-  .tcn-tabs-bar {
-    .tcn-tabs-list {
-      .tcn-tab-item {
-        min-height: 24px;
-        padding: 0px var(--padding-medium);
-        text-decoration: none;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
+    font-size: var(--ergo-text-size-input);
+    border: 1px solid var(--ergo-grey);
+    box-sizing: border-box;
+    min-height: var(--ergo-sizing-action-md);
+    border-radius: var(--ergo-shape-radius-medium);
+    padding-inline: 4px;
   }
 
-  /* Default */
-  .tcn-tabs-bar[data-variant="default"] {
-    .tcn-tabs-list {
-      .tcn-tab-item {
-        box-sizing: border-box;
-        border: none;
-        padding: 0px var(--padding-medium);
-        border-radius: 0;
-      }
-      .tcn-tab-item[data-is-selected="true"] {
-        --mat: var(--tcn-button-color, var(--material));
-        --ink: var(--tcn-button-text-color, var(--ergo-primary));
-        --act: var(--ergo-primary);
-      }
-
-      .tcn-tab-item:focus-visible {
-        z-index: 2;
-      }
-      /* Hover Indicator */
-      .tcn-tab-item[data-is-selected="false"]:hover::after,
-      .tcn-tab-item[data-is-selected="false"]:focus-visible::after {
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0px;
-        height: 1px;
-        background: var(--ergo-accent-blue);
-        pointer-events: none;
-        width: 100%;
-        z-index: 3;
-      }
+  .tcn-radio-label,
+  .tcn-select-selected-label {
+    font-size: var(--ergo-text-size-input);
+  }
 
-      /* Indicator */
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: -1px;
-        left: 0;
-        min-height: 2px;
-        transform: translateX(var(--tabs-active-rectangle-position-x, 0));
-        width: var(--tabs-active-rectangle-width, 0);
-        background: var(--ergo-primary);
-        pointer-events: none;
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-        transition:
-          transform 300ms ease-in-out,
-          width 300ms ease-in-out;
-        will-change: transform, width;
-        z-index: 2;
-      }
-    }
+  .tcn-control[data-is-disabled="false"]:hover {
+    background: var(--act-raised);
+  }
 
-    /* Rail */
-    &::before {
-      content: "";
-      position: absolute;
-      bottom: 0px;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background: var(--ergo-material-divider);
-      pointer-events: none;
-      z-index: 1;
-    }
+  .tcn-control:focus-within {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
   }
 
-  /* Inline  */
-  .tcn-tabs-bar[data-variant="inline"] {
-    font-size: 12px;
-    min-width: min-content;
-    width: auto;
-    flex-grow: 0;
-    border-radius: 6px;
-    border: 1px solid var(--on-material);
-    padding: 2px;
+  .tcn-control:focus {
+    border: 1px solid var(--act);
+  }
 
-    .tcn-tabs-list {
-      height: 20px;
-      gap: var(--ergo-spacing-xs);
-      .tcn-tab-item {
-        border-radius: var(--ergo-shape-radius-medium);
-        min-height: 20px;
-      }
-    }
+  .tcn-control::placeholder {
+    color: var(--ergo-grey);
   }
 
-  /* ===== MATERIAL ===== */
+  .tcn-control[data-is-disabled="true"] {
+    cursor: not-allowed;
+    background: var(--ergo-material-disabled-outline);
+    color: var(--ergo-text-color-disabled-outline);
+  }
 
-  .material {
-    background-color: var(--material);
-    color: var(--on-material);
+  .tcn-control[data-is-disabled="true"]::placeholder {
+    color: var(--ergo-text-color-disabled-outline);
   }
 
-  /* Divider: use material-line; emphasis variants for strong/faint */
-  .tcn-divider-line,
-  .tcn-divider-line[data-emphasis="normal"] {
-    background: var(--material-line);
+  .tcn-control {
+    display: flex;
+    justify-content: center;
+    gap: var(--gap-small);
   }
-  .tcn-divider-line[data-emphasis="strong"] {
-    background: color-mix(in srgb, var(--material-line) 80%, black 20%);
+
+  .tcn-control-row {
+    min-height: 22px;
+    height: auto;
+    align-items: center;
+    gap: var(--gap-small);
+    padding-block: 2px;
   }
-  .tcn-divider-line[data-emphasis="faint"] {
-    background: color-mix(in srgb, var(--material-line) 80%, white 20%);
+
+  .tcn-control-row > .tcn-icon {
+    color: var(--ergo-grey);
   }
 
-  /* ===== SURFACES ===== */
-  .tcn-draggable[data-is-draggable="true"] {
-    .tcn-drag-handle {
-      cursor: move;
+  .tcn-control .tcn-entry {
+    border: none;
+    background: transparent;
+    padding: 0;
+    min-height: unset;
+    border-radius: 0;
+    height: 100%;
+    flex-grow: 1;
+
+    &:hover,
+    &:active,
+    &:focus-visible,
+    &:focus {
+      outline: none;
+      border: none;
+      background: transparent;
     }
   }
 
-  .tcn-frame-dialog {
-    border: inherit;
+  .tcn-input {
+    height: auto;
   }
 
-  .tcn-tethered {
-    /* Managing offset of the indicator in relation for the tethered element
-    pad defaults to 0, but should be set depending on the surface */
-
-    --tether-pad-x: 0px;
-    --tether-pad-y: 0px;
-    --indicator-pad-x: 0px;
-    --indicator-pad-y: 0px;
-    --tether-pad-size: 0px;
-    --tether-pad-pos: var(--tether-pad-size);
-    --tether-pad-neg: calc(-1 * var(--tether-pad-size));
-    left: calc(
-      var(--tether-pad-x, 0) -
-      var(--indicator-pad-x, 0) +
-      var(--tethered-left, 0)
-    );
-    top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));
-
-    :where(.tcn-tethered-origin-indicator) {
-      left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));
-      top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));
-    }
+  .tcn-textarea,
+  .tcn-input {
+    cursor: text;
+  }
 
-    &[data-h-anchor="start"] {
-      --tether-pad-x: var(--tether-pad-pos);
-    }
+  .tcn-control-set {
+    border-radius: var(--ergo-shape-radius-medium);
 
-    &[data-h-anchor="end"] {
-      --tether-pad-x: var(--tether-pad-neg);
+    &:focus-within {
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
     }
 
-    &[data-h-origin="start"] {
-      --indicator-pad-x: var(--tether-pad-pos);
-    }
+    .tcn-control-set-item {
+      z-index: 1;
+      border-radius: 0;
+      height: auto;
+      min-height: var(--ergo-sizing-action-md);
+      padding-block: 0;
+      &:focus,
+      &:focus-visible {
+        z-index: 3;
+        outline: none;
+      }
+    }
+
+    .tcn-control-set-item:first-child {
+      border-top-left-radius: var(--ergo-shape-radius-medium);
+      border-bottom-left-radius: var(--ergo-shape-radius-medium);
+    }
+
+    .tcn-control-set-item:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    .tcn-control-set-item:last-child {
+      border-top-right-radius: var(--ergo-shape-radius-medium);
+      border-bottom-right-radius: var(--ergo-shape-radius-medium);
+    }
+
+    .tcn-select,
+    .tcn-button,
+    .tcn-button[data-hierarchy] {
+      border: 1px solid var(--ergo-grey);
+      height: auto;
+      min-height: var(--ergo-sizing-action-md);
+      min-width: var(--ergo-sizing-action-md);
+      box-sizing: border-box;
+      &:hover,
+      &[data-hover] {
+        transform: none;
+      }
+    }
+
+    .tcn-button.tcn-select,
+    .tcn-button[data-hierarchy].tcn-select {
+      border-color: var(--ergo-grey);
+    }
+
+    .tcn-select:focus-visible,
+    .tcn-button:focus-visible,
+    .tcn-button[data-hierarchy]:focus-visible {
+      border-color: var(--ergo-primary);
+    }
+  }
+
+  .tcn-slider[data-is-disabled="true"] {
+    &::-webkit-slider-runnable-track {
+      background: var(--ergo-grey-light);
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: var(--ergo-white);
+      border: 1px solid var(--ergo-grey-light);
+    }
+  }
+
+  .tcn-checkbox {
+    --checkbox-color: var(--action, var(--ergo-primary));
+
+    border-color: var(--checkbox-color);
+
+    &:focus-visible,
+    &:focus {
+      outline: 2px solid var(--checkbox-color);
+      outline-offset: 2px;
+    }
+
+    &[data-is-disabled="true"] {
+      cursor: not-allowed;
+      border-color: var(--ergo-material-disabled-outline);
+    }
+
+    &[data-checked="true"] {
+      background-color: var(--checkbox-color);
+    }
+
+    &[data-checked="true"][data-is-disabled="true"] {
+      background-color: var(--ergo-grey-light);
+    }
+
+    &[data-checked="false"][data-is-disabled="true"] {
+      background: var(--material);
+      border-color: var(--ergo-grey-light);
+      color: var(--ergo-grey-light);
+    }
+
+    &[data-is-disabled="false"]:active {
+      background-color: var(--checkbox-color);
+    }
+  }
+
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="false"],
+  .tcn-switch-wrapper[data-focused="true"][data-is-checked="true"] {
+    outline: 2px solid var(--ergo-primary);
+    outline-offset: 2px;
+  }
+
+  /* Quick fix to use some of the default module styles.*/
+  .tcn-input,
+  .tcn-select,
+  .tcn-slider,
+  .tcn-textarea,
+  .tcn-checkbox,
+  .tcn-switch-wrapper,
+  .tcn-date-picker,
+  .tcn-date-picker-year-selector,
+  .tcn-radio,
+  .tcn-date-picker-input,
+  .tcn-mobile-date-picker,
+  .tcn-mobile-date-picker-year-selector,
+  .tcn-suggestion-list-search-input,
+  .tcn-suggestion-list {
+    --accent-color: var(--ergo-primary);
+  }
+
+  /* ===== MultiSelect / MultiComboBox =====
+   * Some visual styles below override chrome that is currently baked into
+   * the system layer (CSS modules) and should not be there.
+   * See: https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/318
+   */
+
+  .tcn-multiselect-values-container {
+    background-color: var(--material);
+    border: 1px solid var(--ergo-grey);
+    border-radius: var(--ergo-shape-radius-medium);
+  }
+
+  .tcn-multiselect-values-container[data-is-disabled="true"] {
+    background-color: var(--ergo-material-disabled-outline);
+    color: var(--ergo-text-color-disabled-outline);
+    cursor: not-allowed;
+  }
+
+  .tcn-multiselect-values-container[data-is-disabled="true"] > .tcn-multiselect-chip {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tcn-multiselect-chip {
+    --accent-color: var(--ergo-accent-blue);
+  }
+}
+`, i = `@layer tcn-theme {
+  /* ===== FIELD SET ===== */
+
+  .tcn-field-set {
+    gap: var(--gap-medium);
+
+    .tcn-field-set-legend {
+      padding-block: var(--padding-medium);
+      min-height: var(--ergo-sizing-bar-md);
+      border-bottom: 1px solid var(--ergo-material-divider);
+    }
+  }
+
+  .tcn-field-set[data-is-disabled="true"] .tcn-entry {
+    cursor: not-allowed;
+    background: var(--ergo-material-disabled-outline);
+    color: var(--ergo-text-color-disabled-outline);
+  }
+
+  .tcn-field-set[data-is-disabled="true"] .tcn-entry::placeholder {
+    color: var(--ergo-text-color-disabled-outline);
+  }
+}
+`, d = `@layer tcn-theme {
+  /* ===== Tabs ===== */
+  .tcn-tabs-bar {
+    .tcn-tabs-list {
+      .tcn-tab-item {
+        min-height: 24px;
+        padding: 0px var(--padding-medium);
+        text-decoration: none;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  /* Default */
+  .tcn-tabs-bar[data-variant="default"] {
+    .tcn-tabs-list {
+      .tcn-tab-item {
+        box-sizing: border-box;
+        border: none;
+        padding: 0px var(--padding-medium);
+        border-radius: 0;
+      }
+      .tcn-tab-item[data-is-selected="true"] {
+        --mat: var(--tcn-button-color, var(--material));
+        --ink: var(--tcn-button-text-color, var(--ergo-primary));
+        --act: var(--ergo-primary);
+      }
+
+      .tcn-tab-item:focus-visible {
+        z-index: 2;
+      }
+      /* Hover Indicator */
+      .tcn-tab-item[data-is-selected="false"]:hover::after,
+      .tcn-tab-item[data-is-selected="false"]:focus-visible::after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        height: 1px;
+        background: var(--ergo-accent-blue);
+        pointer-events: none;
+        width: 100%;
+        z-index: 3;
+      }
+
+      /* Indicator */
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        min-height: 2px;
+        transform: translateX(var(--tabs-active-rectangle-position-x, 0));
+        width: var(--tabs-active-rectangle-width, 0);
+        background: var(--ergo-primary);
+        pointer-events: none;
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+        transition:
+          transform 300ms ease-in-out,
+          width 300ms ease-in-out;
+        will-change: transform, width;
+        z-index: 2;
+      }
+    }
+
+    /* Rail */
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: var(--ergo-material-divider);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  /* Inline  */
+  .tcn-tabs-bar[data-variant="inline"] {
+    font-size: 12px;
+    min-width: min-content;
+    width: auto;
+    flex-grow: 0;
+    border-radius: 6px;
+    border: 1px solid var(--on-material);
+    padding: 2px;
+
+    .tcn-tabs-list {
+      height: 20px;
+      gap: var(--ergo-spacing-xs);
+      .tcn-tab-item {
+        border-radius: var(--ergo-shape-radius-medium);
+        min-height: 20px;
+      }
+    }
+  }
+}
+`, c = `@layer tcn-theme {
+  /* ===== DIVIDER ===== */
+
+  /* Divider: use ergo-material-divider token; emphasis variants for strong/faint */
+  .tcn-divider-line,
+  .tcn-divider-line[data-emphasis="normal"] {
+    background: var(--ergo-material-divider, #aaa);
+  }
+  .tcn-divider-line[data-emphasis="strong"] {
+    background: color-mix(in srgb, var(--ergo-material-divider, #aaa) 80%, black 20%);
+  }
+  .tcn-divider-line[data-emphasis="faint"] {
+    background: color-mix(in srgb, var(--ergo-material-divider, #aaa) 80%, white 20%);
+  }
+
+  /* ===== SURFACES ===== */
+  .tcn-draggable[data-is-draggable="true"] {
+    .tcn-drag-handle {
+      cursor: move;
+    }
+  }
+
+  .tcn-frame-dialog {
+    border: inherit;
+  }
+
+  .tcn-tethered {
+    /* Managing offset of the indicator in relation for the tethered element
+    pad defaults to 0, but should be set depending on the surface */
+
+    --tether-pad-x: 0px;
+    --tether-pad-y: 0px;
+    --indicator-pad-x: 0px;
+    --indicator-pad-y: 0px;
+    --tether-pad-size: 0px;
+    --tether-pad-pos: var(--tether-pad-size);
+    --tether-pad-neg: calc(-1 * var(--tether-pad-size));
+    left: calc(
+      var(--tether-pad-x, 0) -
+      var(--indicator-pad-x, 0) +
+      var(--tethered-left, 0)
+    );
+    top: calc(var(--tether-pad-y, 0) + var(--tethered-top, 0));
+
+    :where(.tcn-tethered-origin-indicator) {
+      left: calc(var(--indicator-pad-x, 0) + var(--tethered-origin-delta-x, 0));
+      top: calc(var(--indicator-pad-y, 0) + var(--tethered-origin-delta-y, 0));
+    }
+
+    &[data-h-anchor="start"] {
+      --tether-pad-x: var(--tether-pad-pos);
+    }
+
+    &[data-h-anchor="end"] {
+      --tether-pad-x: var(--tether-pad-neg);
+    }
+
+    &[data-h-origin="start"] {
+      --indicator-pad-x: var(--tether-pad-pos);
+    }
 
     &[data-h-origin="end"] {
       --indicator-pad-x: var(--tether-pad-neg);
@@ -803,20 +1043,19 @@ const r = `@layer tcn-theme {
   .tcn-scaffold {
     --scaffold-divide-footer: var(--divide-footer, 1);
     --scaffold-divide-header: var(--divide-header, 1);
-    --pad-inline: var(--padding-large);
+    /* Since Scaffold now acts as body too - there is no pad inline default - each outer container should set it */
+    /* --pad-inline: var(--padding-large); */
 
     /* Border appears on nested scaffold/rail when it follows header or utility-bar */
-    :where(.tcn-header) + :where(.tcn-scaffold),
-    :where(.tcn-header) + :where(.tcn-rail),
-    :where(.tcn-utility-bar) + :where(.tcn-scaffold),
-    :where(.tcn-utility-bar) + :where(.tcn-rail) {
-      border-top: calc(var(--scaffold-divide-header) * 1px) solid
+    :where(.tcn-header) {
+      border-bottom: calc(var(--scaffold-divide-header) * 1px) solid
         var(--ergo-material-border);
     }
+    :where(.tcn-utility-bar) {
+      border-bottom: 1px solid var(--ergo-material-border);
+    }
 
-    /* Border appears on footer when it follows scaffold/rail */
-    :where(.tcn-scaffold) + :where(.tcn-footer),
-    :where(.tcn-rail) + :where(.tcn-footer) {
+    :where(.tcn-footer) {
       border-top: calc(var(--scaffold-divide-footer) * 1px) solid
         var(--ergo-material-border);
     }
@@ -826,10 +1065,19 @@ const r = `@layer tcn-theme {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
+  :where(.tcn-frame) {
+    --resize-offset: -6px;
+  }
+
+  .tcn-frame > .tcn-scaffold {
+    overflow: hidden;
+  }
+
   /* PAGE: */
   .tcn-page {
     --divide-header: 0;
     --divide-footer: 0;
+    --pad-inline: var(--padding-large);
     --material: var(--background-color-tertiary);
     background-color: var(--material);
   }
@@ -837,10 +1085,10 @@ const r = `@layer tcn-theme {
   /* MODAL: */
   .tcn-modal {
     --divide-header: 0;
+    --pad-inline: var(--padding-large);
     box-shadow: 0px 4px 34px 0px #00000096;
     border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
-    overflow: hidden;
     border: 1px solid var(--ergo-material-border);
 
     :where(.tcn-header) {
@@ -860,9 +1108,9 @@ const r = `@layer tcn-theme {
   /* DRAWER: */
   .tcn-drawer {
     --divide-header: 0;
+    --pad-inline: var(--padding-large);
     box-shadow: 0px 4px 34px 0px #00000096;
     background-color: var(--background-color-primary);
-    overflow: hidden;
 
     :where(.tcn-header) {
       --material: var(--ergo-material-overlay);
@@ -882,9 +1130,9 @@ const r = `@layer tcn-theme {
   .tcn-window {
     box-shadow: 0px 4px 34px 0px #00000096;
     --divide-header: 0;
+    --pad-inline: var(--padding-large);
     border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
-    overflow: hidden;
     border: 2px solid white;
 
     :where(.tcn-header) {
@@ -906,7 +1154,7 @@ const r = `@layer tcn-theme {
     --tether-pad-size: 16px;
     --pad-inline: var(--padding-medium);
 
-    .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {
+    .tcn-pop-confirm-scaffold {
       border-radius: var(--ergo-shape-radius-medium);
       box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
       background-color: var(--background-color-primary);
@@ -963,6 +1211,7 @@ const r = `@layer tcn-theme {
   .tcn-panel {
     --divide-header: 1;
     --divide-footer: 1;
+    --pad-inline: var(--padding-large);
     --material: var(--background-color-primary);
     background-color: var(--material);
     border-radius: var(--ergo-shape-radius-medium);
@@ -977,6 +1226,7 @@ const r = `@layer tcn-theme {
   .tcn-aside {
     --divide-header: 1;
     --divide-footer: 1;
+    --pad-inline: var(--padding-large);
 
     --material: var(--background-color-secondary);
     background-color: var(--material);
@@ -1024,13 +1274,6 @@ const r = `@layer tcn-theme {
     :where(.tcn-utility-bar) {
       min-height: var(--ergo-sizing-bar-sm);
     }
-
-    :where(.tcn-scaffold-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),
-    :where(.tcn-scaffold-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack),
-    :where(.tcn-rail-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),
-    :where(.tcn-rail-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack) {
-      padding-inline: var(--padding-medium);
-    }
   }
 
   /* Columns: */
@@ -1039,6 +1282,7 @@ const r = `@layer tcn-theme {
       padding: var(--padding-large);
 
       :where(.tcn-column) {
+        gap: var(--gap-medium);
         border-right: 1px solid var(--ergo-material-border);
         padding-inline-end: var(--padding-medium);
       }
@@ -1049,12 +1293,50 @@ const r = `@layer tcn-theme {
     }
   }
 
+  /* Resize handle offsets  */
+  :where(.tcn-rail.tcn-columns) {
+    --resize-offset: calc(-1 * var(--padding-medium));
+  }
+
+  :where(.tcn-rail):not(.tcn-columns) {
+    --resize-offset: 0px;
+  }
+
   .tcn-page {
     :where(.tcn-columns) {
       padding: var(--padding-medium);
 
-      :where(.tcn-column):not(:last-child) {
-        padding-inline-end: var(--padding-medium);
+      :where(.tcn-column) {
+        gap: var(--gap-medium);
+      }
+
+      > .tcn-column:not(:last-child) {
+        padding-inline-end: var(--padding-medium);
+      }
+    }
+  }
+
+  /* Rows: */
+  .tcn-panel,
+  .tcn-card {
+    :where(.tcn-rows) {
+      :where(.tcn-row):not(:last-child) {
+        border-bottom: 1px solid var(--ergo-material-border);
+        padding-block-end: var(--padding-medium);
+      }
+
+      :where(.tcn-row):not(:first-child) {
+        padding-block-start: var(--padding-medium);
+      }
+    }
+  }
+
+  .tcn-page {
+    :where(.tcn-rows) {
+      padding: var(--padding-medium);
+
+      :where(.tcn-row):not(:last-child) {
+        padding-block-end: var(--padding-medium);
       }
     }
   }
@@ -1107,7 +1389,7 @@ const r = `@layer tcn-theme {
     padding-inline-end: var(--pad-inline, var(--padding-medium));
   }
 
-  .tcn-scaffold-stack > .tcn-detail {
+  .tcn-scaffold > .tcn-detail {
     padding-inline: var(--pad-inline, var(--padding-medium));
   }
 
@@ -1309,292 +1591,232 @@ const r = `@layer tcn-theme {
     }
   }
 
-  /* ===== INPUTS ===== */
-  .tcn-entry,
-  .tcn-control {
-    --act: var(--action);
-    --mat: var(--material);
-    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
+  /* ===== TYPOGRAPHY ===== */
 
-    font-size: var(--ergo-text-size-input);
-    border: 1px solid var(--ergo-grey);
-    box-sizing: border-box;
-    min-height: var(--ergo-sizing-action-md);
-    border-radius: var(--ergo-shape-radius-medium);
-    padding-inline: 4px;
+  .tcn-body-text[data-emphasis="faint"],
+  .tcn-headline[data-emphasis="faint"],
+  .tcn-subheadline[data-emphasis="faint"],
+  .tcn-callout[data-emphasis="faint"],
+  .tcn-footnote[data-emphasis="faint"],
+  .tcn-caption[data-emphasis="faint"],
+  .tcn-title[data-emphasis="faint"] {
+    color: color-mix(in srgb, var(--font-color) 70%, transparent);
   }
 
-  .tcn-radio-label,
-  .tcn-select-selected-label {
-    font-size: var(--ergo-text-size-input);
+  /* Datum/Tokens */
+  .tcn-chip {
+    --action: var(--ergo-primary);
+    --accent-color: var(--ergo-primary);
   }
 
-  .tcn-control[data-is-disabled="false"]:hover {
-    background: var(--act-raised);
+  .tcn-datum[data-emphasis="normal"] {
+    --datum-font-color: var(--on-material);
   }
 
-  .tcn-control:focus-within {
-    outline: 2px solid var(--ergo-primary);
-    outline-offset: 2px;
+  .tcn-datum[data-emphasis="strong"] {
+    --datum-font-weight: 700;
   }
 
-  .tcn-control:focus {
-    border: 1px solid var(--act);
+  .tcn-datum[data-emphasis="faint"] {
+    --datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%);
   }
 
-  .tcn-control::placeholder {
-    color: var(--ergo-grey);
+  .tcn-datum[data-severity="dangerous"] {
+    --datum-font-color: var(--ergo-status-red);
   }
 
-  .tcn-control[data-is-disabled="true"] {
-    cursor: not-allowed;
-    background: var(--ergo-material-disabled-outline);
-    color: var(--ergo-text-color-disabled-outline);
+  .tcn-datum[data-severity="cautious"] {
+    --datum-font-color: var(--ergo-status-yellow);
   }
 
-  .tcn-control[data-is-disabled="true"]::placeholder {
-    color: var(--ergo-text-color-disabled-outline);
+  .tcn-datum[data-severity="suggested"] {
+    --datum-font-color: var(--ergo-status-blue);
   }
 
-  .tcn-control {
-    display: flex;
-    justify-content: center;
-    gap: var(--gap-small);
+  .tcn-datum[data-severity="encouraged"] {
+    --datum-font-color: var(--ergo-status-green);
   }
 
-  .tcn-control-row {
-    min-height: 22px;
-    height: auto;
-    align-items: center;
-    gap: var(--gap-small);
-    padding-block: 2px;
+  .tcn-key {
+    --accent-color: var(--action);
+    font-size: 14px;
+    color: var(--datum-font-color);
+    font-weight: var(--datum-font-weight, 400);
   }
 
-  .tcn-control-row > .tcn-icon {
-    color: var(--ergo-grey);
+  .tcn-value {
+    font-size: 12px;
+
+    color: var(--datum-font-color);
+    font-weight: var(--datum-font-weight, 400);
   }
 
-  .tcn-control .tcn-entry {
-    border: none;
-    background: transparent;
-    padding: 0;
-    min-height: unset;
-    border-radius: 0;
-    height: 100%;
-    flex-grow: 1;
+  .tcn-term > .tcn-key,
+  .tcn-term > .tcn-value {
+    max-width: 50%;
+  }
 
-    &:hover,
-    &:active,
-    &:focus-visible,
-    &:focus {
-      outline: none;
-      border: none;
-      background: transparent;
+  .tcn-value {
+    :where(.tcn-chip) {
+      --action: var(--ergo-accent-blue);
+      --accent-color: var(--ergo-accent-blue);
     }
   }
 
-  .tcn-input {
-    height: auto;
+  /* ===== Resize Handle ===== */
+
+  /* Edge indicators: centered pill chip */
+  .tcn-resize-handle[data-axis="horizontal"] {
+    width: 8px;
   }
 
-  .tcn-textarea,
-  .tcn-input {
-    cursor: text;
+  .tcn-resize-handle[data-axis="vertical"] {
+    height: 8px;
   }
 
-  .tcn-control-set {
+  .tcn-resize-handle[data-axis="horizontal"]::after,
+  .tcn-resize-handle[data-axis="vertical"]::after {
+    content: "";
+    position: absolute;
     border-radius: var(--ergo-shape-radius-medium);
-
-    &:focus-within {
-      outline: 2px solid var(--ergo-primary);
-      outline-offset: 2px;
-    }
-
-    .tcn-control-set-item {
-      z-index: 1;
-      border-radius: 0;
-      height: auto;
-      min-height: var(--ergo-sizing-action-md);
-      padding-block: 0;
-      &:focus,
-      &:focus-visible {
-        z-index: 3;
-        outline: none;
-      }
-    }
-
-    .tcn-control-set-item:first-child {
-      border-top-left-radius: var(--ergo-shape-radius-medium);
-      border-bottom-left-radius: var(--ergo-shape-radius-medium);
-    }
-
-    .tcn-control-set-item:not(:last-child) {
-      margin-right: -1px;
-    }
-
-    .tcn-control-set-item:last-child {
-      border-top-right-radius: var(--ergo-shape-radius-medium);
-      border-bottom-right-radius: var(--ergo-shape-radius-medium);
-    }
-
-    .tcn-select,
-    .tcn-button,
-    .tcn-button[data-hierarchy] {
-      border: 1px solid var(--ergo-grey);
-      height: auto;
-      min-height: var(--ergo-sizing-action-md);
-      min-width: var(--ergo-sizing-action-md);
-      box-sizing: border-box;
-      &:hover,
-      &[data-hover] {
-        transform: none;
-      }
-    }
-
-    .tcn-button.tcn-select,
-    .tcn-button[data-hierarchy].tcn-select {
-      border-color: var(--ergo-grey);
-    }
-
-    .tcn-select:focus-visible,
-    .tcn-button:focus-visible,
-    .tcn-button[data-hierarchy]:focus-visible {
-      border-color: var(--ergo-primary);
-    }
+    background-color: var(--ergo-grey-light);
+    pointer-events: none;
+    transition: background-color 0.3s;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
-  .tcn-slider[data-is-disabled="true"] {
-    &::-webkit-slider-runnable-track {
-      background: var(--ergo-grey-light);
-    }
-
-    &::-webkit-slider-thumb {
-      background-color: var(--ergo-white);
-      border: 1px solid var(--ergo-grey-light);
-    }
+  .tcn-resize-handle[data-axis="horizontal"]::after {
+    width: 4px;
+    height: 16px;
   }
 
-  .tcn-checkbox {
-    --checkbox-color: var(--action, var(--ergo-primary));
-
-    border-color: var(--checkbox-color);
-
-    &:focus-visible,
-    &:focus {
-      outline: 2px solid var(--checkbox-color);
-      outline-offset: 2px;
-    }
-
-    &[data-is-disabled="true"] {
-      cursor: not-allowed;
-      border-color: var(--ergo-material-disabled-outline);
-    }
-
-    &[data-checked="true"] {
-      background-color: var(--checkbox-color);
-    }
-
-    &[data-checked="true"][data-is-disabled="true"] {
-      background-color: var(--ergo-grey-light);
-    }
-
-    &[data-checked="false"][data-is-disabled="true"] {
-      background: var(--material);
-      border-color: var(--ergo-grey-light);
-      color: var(--ergo-grey-light);
-    }
-
-    &[data-is-disabled="false"]:active {
-      background-color: var(--checkbox-color);
-    }
+  .tcn-resize-handle[data-axis="vertical"]::after {
+    width: 16px;
+    height: 4px;
   }
 
-  .tcn-switch-wrapper[data-focused="true"][data-is-checked="false"],
-  .tcn-switch-wrapper[data-focused="true"][data-is-checked="true"] {
-    outline: 2px solid var(--ergo-primary);
-    outline-offset: 2px;
+  /* Corner L-shape indicator */
+  .tcn-resize-handle[data-axis="corner"]::after {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-style: solid;
+    border-color: var(--ergo-grey-light);
+    border-width: 0;
+    pointer-events: none;
+    transition: border-color 0.15s;
   }
 
-  /* Quick fix to use some of the default module styles.*/
-  .tcn-input,
-  .tcn-select,
-  .tcn-slider,
-  .tcn-textarea,
-  .tcn-checkbox,
-  .tcn-switch-wrapper,
-  .tcn-date-picker,
-  .tcn-date-picker-year-selector,
-  .tcn-radio,
-  .tcn-date-picker-input,
-  .tcn-mobile-date-picker,
-  .tcn-mobile-date-picker-year-selector,
-  .tcn-suggestion-list-search-input,
-  .tcn-suggestion-list {
-    --accent-color: var(--ergo-primary);
+  /* Physical corners */
+  .tcn-resize-handle[data-position="top-left"]::after {
+    top: 0;
+    left: 0;
+    border-top-width: 4px;
+    border-left-width: 4px;
   }
 
-  /* Datum/Tokens */
-  .tcn-chip {
-    --action: var(--ergo-primary);
-    --accent-color: var(--ergo-primary);
+  .tcn-resize-handle[data-position="top-right"]::after {
+    top: 0;
+    right: 0;
+    border-top-width: 4px;
+    border-right-width: 4px;
   }
 
-  .tcn-datum[data-emphasis="normal"] {
-    --datum-font-color: var(--on-material);
+  .tcn-resize-handle[data-position="bottom-left"]::after {
+    bottom: 0;
+    left: 0;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
   }
 
-  .tcn-datum[data-emphasis="strong"] {
-    --datum-font-weight: 700;
+  .tcn-resize-handle[data-position="bottom-right"]::after {
+    bottom: 0;
+    right: 0;
+    border-bottom-width: 4px;
+    border-right-width: 4px;
   }
 
-  .tcn-datum[data-emphasis="faint"] {
-    --datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%);
+  /* Logical corners (RTL-aware) */
+  .tcn-resize-handle[data-position="top-start"]:dir(ltr)::after {
+    top: 0;
+    left: 0;
+    border-top-width: 4px;
+    border-left-width: 4px;
   }
 
-  .tcn-datum[data-severity="dangerous"] {
-    --datum-font-color: var(--ergo-status-red);
+  .tcn-resize-handle[data-position="top-start"]:dir(rtl)::after {
+    top: 0;
+    right: 0;
+    border-top-width: 4px;
+    border-right-width: 4px;
   }
 
-  .tcn-datum[data-severity="cautious"] {
-    --datum-font-color: var(--ergo-status-yellow);
+  .tcn-resize-handle[data-position="top-end"]:dir(ltr)::after {
+    top: 0;
+    right: 0;
+    border-top-width: 4px;
+    border-right-width: 4px;
   }
 
-  .tcn-datum[data-severity="suggested"] {
-    --datum-font-color: var(--ergo-status-blue);
+  .tcn-resize-handle[data-position="top-end"]:dir(rtl)::after {
+    top: 0;
+    left: 0;
+    border-top-width: 4px;
+    border-left-width: 4px;
   }
 
-  .tcn-datum[data-severity="encouraged"] {
-    --datum-font-color: var(--ergo-status-green);
+  .tcn-resize-handle[data-position="bottom-start"]:dir(ltr)::after {
+    bottom: 0;
+    left: 0;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
   }
 
-  .tcn-key {
-    --accent-color: var(--action);
-    font-size: 14px;
-    color: var(--datum-font-color);
-    font-weight: var(--datum-font-weight, 400);
+  .tcn-resize-handle[data-position="bottom-start"]:dir(rtl)::after {
+    bottom: 0;
+    right: 0;
+    border-bottom-width: 4px;
+    border-right-width: 4px;
   }
 
-  .tcn-value {
-    font-size: 12px;
+  .tcn-resize-handle[data-position="bottom-end"]:dir(ltr)::after {
+    bottom: 0;
+    right: 0;
+    border-bottom-width: 4px;
+    border-right-width: 4px;
+  }
 
-    color: var(--datum-font-color);
-    font-weight: var(--datum-font-weight, 400);
+  .tcn-resize-handle[data-position="bottom-end"]:dir(rtl)::after {
+    bottom: 0;
+    left: 0;
+    border-bottom-width: 4px;
+    border-left-width: 4px;
   }
 
-  .tcn-term > .tcn-key,
-  .tcn-term > .tcn-value {
-    max-width: 50%;
+  /* Hover */
+  .tcn-resize-handle[data-axis="horizontal"]:hover::after,
+  .tcn-resize-handle[data-axis="vertical"]:hover::after {
+    background-color: var(--ergo-grey-dark);
   }
 
-  .tcn-value {
-    :where(.tcn-chip) {
-      --action: var(--ergo-accent-blue);
-      --accent-color: var(--ergo-accent-blue);
-    }
+  .tcn-resize-handle:hover::after {
+    border-color: var(--ergo-grey-dark);
   }
 }
-`, i = n([r, a, e]);
+`, g = n([
+  r,
+  e,
+  a,
+  t,
+  o,
+  i,
+  d,
+  c
+]);
 export {
-  i as ergoStyleSheet
+  g as ergoStyleSheet
 };
 //# sourceMappingURL=ergo_theme.js.map