quilt-vanilla 0.1.0

package/dist/styles.css

@@ -0,0 +1,842 @@
+.layouts {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  color: var(--layouts-text, #e5e9f0);
+  background: var(--layouts-bg, #161a20);
+  font-family: var(--layouts-font-family, system-ui, sans-serif);
+  font-size: var(--layouts-font-size, 13px);
+  line-height: 1.45;
+  isolation: isolate;
+}
+.layouts *,
+.layouts *::before,
+.layouts *::after {
+  box-sizing: border-box;
+}
+.layouts [hidden] {
+  display: none !important;
+}
+.layouts-stage {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+.layouts-node {
+  position: absolute;
+  min-width: 0;
+  min-height: 0;
+}
+.layouts-group {
+  display: flex;
+  flex-direction: column;
+  background: var(--layouts-panel, #1d222a);
+}
+.layouts-group::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+  border: 1px solid;
+  border-color: var(--layouts-edge-top, var(--layouts-line, #39414e))
+    var(--layouts-edge-right, var(--layouts-line, #39414e))
+    var(--layouts-edge-bottom, var(--layouts-line, #39414e))
+    var(--layouts-edge-left, var(--layouts-line, #39414e));
+}
+.layouts-header {
+  height: var(--layouts-header-height, 34px);
+  flex: 0 0 var(--layouts-header-height, 34px);
+  display: flex;
+  align-items: center;
+  background: var(--layouts-header, #242a34);
+  border-bottom: 1px solid var(--layouts-line, #39414e);
+  padding: 4px 6px;
+  gap: 2px;
+}
+.layouts-tabs {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  height: 100%;
+  gap: 3px;
+}
+.layouts-button,
+.layouts-tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--layouts-muted, #a2acba);
+  font: inherit;
+  padding: 5px 9px;
+  cursor: pointer;
+  border-radius: var(--layouts-radius, 5px);
+  white-space: nowrap;
+}
+.layouts-tab {
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  text-overflow: ellipsis;
+  max-width: 240px;
+  overflow: hidden;
+}
+.layouts-tab[aria-selected='true'] {
+  color: var(--layouts-text, #e5e9f0);
+  background: var(--layouts-panel, #1d222a);
+}
+.layouts-button:hover:not(:disabled),
+.layouts-tab:hover {
+  color: var(--layouts-text, #e5e9f0);
+  background: color-mix(in srgb, var(--layouts-text, #e5e9f0) 8%, transparent);
+}
+.layouts-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.layouts :focus-visible {
+  outline: 2px solid var(--layouts-focus, #b3decf);
+  outline-offset: -2px;
+}
+.layouts .layouts-menu:focus-visible {
+  outline: none;
+}
+/* Arrow-key navigation activates the focused tab; its background marks selection. */
+.layouts .layouts-tab[aria-selected='true']:focus-visible {
+  outline: none;
+}
+.layouts-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.layouts-pane {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.layouts-divider {
+  position: absolute;
+  z-index: 3;
+  touch-action: none;
+  background: var(--layouts-bg, #161a20);
+}
+.layouts-divider[data-axis='horizontal'] {
+  cursor: col-resize;
+}
+.layouts-divider[data-axis='vertical'] {
+  cursor: row-resize;
+}
+.layouts-divider:hover:not([aria-disabled='true']),
+.layouts-divider:focus-visible {
+  background: var(--layouts-accent, #8bbaaa);
+}
+.layouts-divider[aria-disabled='true'] {
+  cursor: default;
+}
+.layouts-resizing {
+  user-select: none;
+}
+.layouts-placeholder {
+  padding: 24px;
+  color: var(--layouts-muted, #a2acba);
+}
+.layouts-status {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  max-width: min(560px, 90%);
+  padding: 10px 14px;
+  background: var(--layouts-header, #242a34);
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 5px);
+  z-index: 20;
+}
+.layouts-status:empty {
+  display: none;
+}
+.layouts-menu {
+  position: fixed;
+  margin: 0;
+  padding: 5px;
+  width: 240px;
+  max-height: min(520px, 70vh);
+  overflow: auto;
+  background: var(--layouts-header, #242a34);
+  color: var(--layouts-text, #e5e9f0);
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 7px);
+  box-shadow: 0 12px 40px #0005;
+}
+.layouts-menu .layouts-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  white-space: normal;
+}
+.layouts-menu::backdrop {
+  background: transparent;
+}
+.layouts-group[data-drop]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--layouts-accent, #8bbaaa) 22%, transparent);
+  border: 2px solid var(--layouts-accent, #8bbaaa);
+}
+.layouts-group[data-drop='left']::after {
+  right: 50%;
+}
+.layouts-group[data-drop='right']::after {
+  left: 50%;
+}
+.layouts-group[data-drop='top']::after {
+  bottom: 50%;
+}
+.layouts-group[data-drop='bottom']::after {
+  top: 50%;
+}
+.layouts-companion {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+}
+.layouts-companion-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 38px;
+  background: var(--layouts-header, #242a34);
+  border-bottom: 1px solid var(--layouts-line, #39414e);
+  padding: 0 10px;
+}
+.layouts-companion > .layouts-pane {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+}
+
+/* Each tab responds to its allocated width, not the whole viewport. */
+.layouts-tab-item {
+  position: relative;
+  display: flex;
+  flex: 0 1 180px;
+  min-width: 32px;
+  container: layouts-tab / inline-size;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-tab-item[data-active='true'] {
+  min-width: 56px;
+  background: var(--layouts-panel, #1d222a);
+}
+.layouts-tab-item .layouts-tab {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  padding: 0 8px;
+}
+.layouts-tab-icon {
+  flex: 0 0 var(--layouts-icon-size, 16px);
+  width: var(--layouts-icon-size, 16px);
+  height: var(--layouts-icon-size, 16px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.layouts-tab-icon > * {
+  width: var(--layouts-icon-size, 16px);
+  height: var(--layouts-icon-size, 16px);
+}
+.layouts-tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.layouts-tab-item .layouts-tab-close {
+  flex: 0 0 22px;
+  align-self: center;
+  width: 22px;
+  height: 100%;
+  max-height: 24px;
+  padding: 0;
+  margin-right: 3px;
+}
+@container layouts-tab (max-width: 130px) {
+  .layouts-tab-close {
+    display: none;
+  }
+  .layouts-tab-item[data-active='true'] > .layouts-tab-close {
+    display: block;
+  }
+}
+@container layouts-tab (max-width: 95px) {
+  .layouts-tab-label {
+    display: none;
+  }
+  .layouts-tab-item .layouts-tab {
+    justify-content: center;
+    padding-inline: 4px;
+  }
+}
+.layouts-tab-item[data-tab-drop]::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0;
+  width: 2px;
+  background: var(--layouts-accent, #8bbaaa);
+  pointer-events: none;
+}
+.layouts-tab-item[data-tab-drop='after']::after {
+  left: auto;
+  right: 0;
+}
+
+.layouts-picker {
+  width: min(340px, calc(100vw - 16px));
+}
+.layouts-picker-search {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 5px);
+  background: var(--layouts-panel, #1d222a);
+  color: var(--layouts-text, #e5e9f0);
+  font: inherit;
+}
+.layouts-picker-list {
+  max-height: 280px;
+  overflow: auto;
+  margin-top: 5px;
+}
+.layouts-picker-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  cursor: pointer;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-picker-option[aria-selected='true'],
+.layouts-picker-option:hover {
+  background: color-mix(in srgb, var(--layouts-accent, #8bbaaa) 20%, transparent);
+}
+.layouts-picker-option strong,
+.layouts-picker-option small {
+  display: block;
+}
+.layouts-picker-option small,
+.layouts-picker-status {
+  color: var(--layouts-muted, #a2acba);
+}
+.layouts-picker-status {
+  padding: 10px;
+}
+
+/* Consumer-owned scrollbar roles also apply to nested application content. */
+.layouts,
+.layouts * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--layouts-scrollbar-thumb, var(--layouts-line, #39414e))
+    var(--layouts-scrollbar-track, transparent);
+}
+.layouts ::-webkit-scrollbar {
+  width: var(--layouts-scrollbar-size, 6px);
+  height: var(--layouts-scrollbar-size, 6px);
+}
+.layouts ::-webkit-scrollbar-thumb {
+  background: var(--layouts-scrollbar-thumb, var(--layouts-line, #39414e));
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts ::-webkit-scrollbar-track {
+  background: var(--layouts-scrollbar-track, transparent);
+}
+.layouts-submenu {
+  position: relative;
+}
+.layouts-submenu > button {
+  width: 100%;
+  text-align: left;
+}
+.layouts-submenu-content {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  border: 1px solid var(--layouts-line);
+  background: var(--layouts-panel);
+}
+.layouts-menu:has(.layouts-submenu-content:not([hidden])) {
+  min-width: 300px;
+}
+.layouts-corner {
+  position: absolute;
+  display: var(--layouts-corner-handle-display, block);
+  width: var(--layouts-corner-handle-size, 8px);
+  height: var(--layouts-corner-handle-size, 8px);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  z-index: 3;
+  touch-action: none;
+  cursor: crosshair;
+}
+.layouts-corner::after {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-style: solid;
+  border-width: var(--layouts-corner-handle-border-width, 2px 0 0 2px);
+  border-color: var(--layouts-corner-handle-color, var(--layouts-muted));
+  border-radius: var(--layouts-corner-handle-radius, 0px);
+  background: var(--layouts-corner-handle-fill, transparent);
+  opacity: var(--layouts-corner-handle-opacity, 0.35);
+}
+.layouts-corner:hover::after {
+  opacity: 1;
+}
+.layouts-corner[data-corner='tl'] {
+  top: var(--layouts-corner-handle-inset, 0px);
+  left: var(--layouts-corner-handle-inset, 0px);
+}
+.layouts-corner[data-corner='tr'] {
+  top: var(--layouts-corner-handle-inset, 0px);
+  right: var(--layouts-corner-handle-inset, 0px);
+  transform: rotate(90deg);
+}
+.layouts-corner[data-corner='br'] {
+  bottom: var(--layouts-corner-handle-inset, 0px);
+  right: var(--layouts-corner-handle-inset, 0px);
+  transform: rotate(180deg);
+}
+.layouts-corner[data-corner='bl'] {
+  bottom: var(--layouts-corner-handle-inset, 0px);
+  left: var(--layouts-corner-handle-inset, 0px);
+  transform: rotate(270deg);
+}
+.layouts-group[data-corner-preview] {
+  outline: 2px solid var(--layouts-accent);
+  outline-offset: -2px;
+}
+
+.layouts-menu:has(.layouts-submenu) {
+  overflow: visible;
+}
+.layouts-submenu-content {
+  position: absolute;
+  top: 0;
+  left: calc(100% - 1px);
+  width: 200px;
+  box-shadow: 0 8px 24px #0005;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-submenu[data-side='left'] .layouts-submenu-content {
+  left: auto;
+  right: calc(100% - 1px);
+}
+.layouts-menu:has(.layouts-submenu-content:not([hidden])) {
+  min-width: 0;
+}
+
+.layouts-corner-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 100;
+}
+.layouts-corner-preview {
+  position: fixed;
+  box-sizing: border-box;
+  border: 2px solid var(--layouts-accent);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+.layouts-corner-preview[data-corner-preview='split'],
+.layouts-corner-preview[data-corner-preview='join-target'] {
+  background: color-mix(in srgb, var(--layouts-accent) 16%, transparent);
+}
+.layouts-corner-preview[data-corner-preview='join-source'] {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--layouts-bg) 65%, transparent);
+}
+.layouts-corner-preview[data-corner-preview='join'] {
+  border-width: 3px;
+}
+.layouts-corner-label {
+  background: var(--layouts-panel);
+  color: var(--layouts-text);
+  padding: 6px 10px;
+  border-radius: var(--layouts-radius);
+  text-align: center;
+}
+.layouts-corner-label:empty {
+  display: none;
+}
+
+/* Themeable density affects chrome only; structural divider gaps stay in layout JSON. */
+.layouts-menu button,
+.layouts-picker button {
+  min-height: var(--layouts-control-height, 28px);
+}
+.layouts-menu {
+  padding: var(--layouts-spacing, 5px);
+}
+
+/* Tapered chrome overlays the pane; only its painted footprint intercepts input. */
+.layouts-group[data-tab-bar='tapered'] > .layouts-header {
+  position: absolute;
+  inset: 0 auto auto 0;
+  z-index: 2;
+  max-width: 100%;
+  border-bottom-color: transparent;
+}
+.layouts-group[data-tab-bar='tapered'] .layouts-tab-item {
+  flex-basis: var(--layouts-tab-preferred-width, 180px);
+}
+.layouts-header > .layouts-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 100%;
+  padding: 0 7px;
+}
+.layouts-tab-cap {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  height: calc(100% + 1px);
+  overflow: visible;
+  pointer-events: none;
+}
+.layouts-tab-cap path {
+  fill: var(--layouts-header, #242a34);
+  pointer-events: visiblePainted;
+}
+.layouts-header.layouts-tab-measure {
+  position: fixed !important;
+  inset: -10000px auto auto -10000px !important;
+  width: max-content !important;
+  max-width: none !important;
+  visibility: hidden;
+  pointer-events: none;
+}
+.layouts-tab-measure .layouts-tabs {
+  flex: none;
+  overflow: visible;
+}
+.layouts-tab-measure .layouts-tab-item {
+  container: none;
+  flex: none;
+  width: max-content;
+  min-width: 0;
+  max-width: 180px;
+}
+.layouts-tab-measure .layouts-tab-label {
+  display: block;
+}
+.layouts-tab-measure .layouts-tab-close {
+  display: block;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab-label {
+  display: block;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab-close {
+  display: block;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab {
+  padding: 0 8px;
+  justify-content: flex-start;
+}
+
+.layouts-tab-measure .layouts-tab {
+  flex: none;
+  max-width: none;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab-item {
+  flex-shrink: 0;
+}
+
+.layouts-tab-outline {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.layouts-tab-outline path {
+  fill: none;
+  stroke: var(--layouts-line, #39414e);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+.layouts-chrome-icon {
+  display: inline-block;
+  width: var(--layouts-icon-size, 16px);
+  height: var(--layouts-icon-size, 16px);
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+/* A reserved left rail keeps pane content clear of icon-only controls. */
+.layouts-group[data-tab-placement='left'] {
+  flex-direction: row;
+}
+.layouts-group[data-tab-placement='left'] > .layouts-header {
+  position: relative;
+  inset: auto;
+  width: var(--layouts-header-width, 32px);
+  height: 100%;
+  flex: 0 0 var(--layouts-header-width, 32px);
+  flex-direction: column;
+  padding: 4px;
+  border-bottom: 0;
+  border-right: 1px solid var(--layouts-line, #39414e);
+  min-height: 0;
+  gap: 4px;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tabs {
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item {
+  flex: 0 0 30px;
+  min-width: 0;
+  width: 100%;
+  height: 30px;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item .layouts-tab {
+  padding: 0;
+  justify-content: center;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-label,
+.layouts-group[data-tab-placement='left'] .layouts-tab-item > .layouts-tab-close {
+  display: none;
+}
+.layouts-group[data-tab-placement='left'] > .layouts-header > .layouts-button {
+  flex: 0 0 30px;
+  height: 30px;
+  width: 100%;
+  padding: 0;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item[data-tab-drop]::after {
+  inset: 0 2px auto;
+  width: auto;
+  height: 2px;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item[data-tab-drop='after']::after {
+  inset: auto 2px 0;
+}
+
+.layouts-group[data-tab-placement='left'][data-tab-bar='tapered'] > .layouts-header {
+  position: absolute;
+  inset: 0 auto auto 0;
+  border-right-color: transparent;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-cap {
+  left: 0;
+  top: 100%;
+}
+.layouts-group[data-tab-placement='left'] > .layouts-header > .layouts-button .layouts-chrome-icon {
+  transform: rotate(90deg);
+}
+
+.layouts-picker-persistent {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  top: calc(50% + var(--layouts-header-height, 32px) / 2);
+  transform: translate(-50%, -50%);
+  width: min(340px, calc(100% - 16px));
+  max-height: calc(100% - var(--layouts-header-height, 32px) - 16px);
+  box-sizing: border-box;
+}
+
+.layouts-tab-tooltip {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  max-width: min(280px, calc(100vw - 16px));
+  padding: 6px 9px;
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 5px);
+  background: var(--layouts-panel, #1d222a);
+  color: var(--layouts-text, #e5e9f0);
+  box-shadow: 0 3px 12px #0003;
+  font-size: 12px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+/* Gapless frozen boundaries are decorative and never intercept pane input. */
+[data-frozen-border='horizontal']::after,
+[data-frozen-border='vertical']::after {
+  content: '';
+  position: absolute;
+  z-index: 4;
+  pointer-events: none;
+  background: var(--layouts-frozen-pane-border, var(--layouts-line, #39414e));
+}
+[data-frozen-border='horizontal']::after {
+  left: calc(var(--layouts-frozen-boundary) - 1px);
+  top: 0;
+  width: 1px;
+  height: 100%;
+}
+[data-frozen-border='vertical']::after {
+  top: calc(var(--layouts-frozen-boundary) - 1px);
+  left: 0;
+  height: 1px;
+  width: 100%;
+}
+
+/* The split owns shared frozen borders; descendants omit those same edges. */
+.layouts-group[data-shared-edges~='top'] {
+  --layouts-edge-top: transparent;
+}
+.layouts-group[data-shared-edges~='right'] {
+  --layouts-edge-right: transparent;
+}
+.layouts-group[data-shared-edges~='bottom'] {
+  --layouts-edge-bottom: transparent;
+}
+.layouts-group[data-shared-edges~='left'] {
+  --layouts-edge-left: transparent;
+}
+
+.layouts-tabs:empty {
+  display: none;
+}
+
+.layouts-empty {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--layouts-line, #39414e);
+  cursor: pointer;
+}
+.layouts-empty:disabled {
+  cursor: default;
+}
+.layouts-empty:focus-visible {
+  outline: 1px solid var(--layouts-accent, #8bbaaa);
+  outline-offset: -3px;
+}
+.layouts-empty > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1;
+}
+
+.layouts-picker-search:focus,
+.layouts-picker-search:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.layouts-group[data-tab-attachment='floating'][data-tab-bar] > .layouts-header {
+  position: absolute;
+  inset: var(--layouts-floating-inset-y, 8px) auto auto var(--layouts-floating-inset-x, 8px);
+  max-width: calc(100% - 2 * var(--layouts-floating-inset-x, 8px));
+  max-height: calc(100% - 2 * var(--layouts-floating-inset-y, 8px));
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--layouts-line, #39414e);
+}
+.layouts-header[data-tab-bar-shape='rounded'] {
+  border-radius: var(--layouts-radius, 5px);
+}
+
+.layouts-group[data-tab-attachment='floating'][data-tab-bar]
+  > .layouts-header[data-tab-corners='rounded'] {
+  border-radius: var(--layouts-radius, 5px);
+  box-shadow: inset 0 0 0 1px var(--layouts-line, #39414e);
+}
+.layouts-group[data-tab-attachment='floating'][data-tab-bar]
+  > .layouts-header[data-tab-corners='capsule'] {
+  border-radius: 999px;
+}
+.layouts-group[data-tab-attachment='floating'][data-tab-bar]
+  > .layouts-header[data-tab-corners='fitted'] {
+  border-radius: 0;
+}
+
+/* Display is independent of orientation; automatic follows each tab's width. */
+@container layouts-tab (min-width: 96px) {
+  .layouts-group[data-tab-placement='left'][data-tab-display='automatic'] .layouts-tab-label {
+    display: block;
+  }
+  .layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+    .layouts-tab-item
+    .layouts-tab {
+    padding: 0 8px;
+    justify-content: flex-start;
+  }
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic'] > .layouts-header {
+  min-width: max(32px, calc(var(--layouts-icon-size, 16px) + 10px));
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']:has(> .layouts-tab-close) {
+  flex-direction: column;
+  flex-basis: 52px;
+  height: 52px;
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']:has(> .layouts-tab-close)
+  > .layouts-tab {
+  flex: 0 0 30px;
+  width: 100%;
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']
+  > .layouts-tab-close {
+  display: block;
+  flex: 0 0 22px;
+  height: 22px;
+  margin: 0;
+}
+.layouts-group[data-tab-display='compact'] .layouts-tab-label,
+.layouts-group[data-tab-display='compact'] .layouts-tab-close,
+.layouts-header[data-tab-display='compact'] .layouts-tab-label,
+.layouts-header[data-tab-display='compact'] .layouts-tab-close {
+  display: none;
+}
+.layouts-group[data-tab-display='compact'] .layouts-tab-item .layouts-tab,
+.layouts-header[data-tab-display='compact'] .layouts-tab-item .layouts-tab {
+  justify-content: center;
+  padding-inline: 8px;
+}
+.layouts-group[data-tab-placement='top'][data-tab-display='compact'] .layouts-tab-item,
+.layouts-header.layouts-tab-measure[data-tab-display='compact'] .layouts-tab-item {
+  flex: 0 0 calc(var(--layouts-icon-size, 16px) + 16px);
+  min-width: calc(var(--layouts-icon-size, 16px) + 16px);
+}