@jungherz-de/glasskit 1.19.1 → 1.21.0

package/glasskit.css

@@ -1,11 +1,12 @@
 /* ============================================================
    GLASSKIT COMPONENT LIBRARY
-   Jungherz GmbH – v1.19.1
+   Jungherz GmbH – v1.21.0
 
    Features:
    - Scoped Reset (box-sizing fix)
    - Dark Mode (default)
    - Light Mode via [data-theme="light"]
+   - Compact density via [data-density="compact"]
    - 34 components (incl. floating Tab-Bar variant + Accessory)
    ============================================================ */
 
@@ -68,6 +69,8 @@
   --gl-color-text-muted:     rgba(255, 255, 255, 0.60);
   --gl-color-text-on-light:  #1a3a4a;
   --gl-color-text-heading:   #ffffff;
+  /* The select's chevron, drawn in the muted text colour of each theme. */
+  --gl-select-chevron:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   --gl-color-success:        #34c759;
   --gl-color-error:          #ff3b30;
   --gl-color-warning:        #ffcc00;
@@ -198,6 +201,29 @@
   --gl-space-3xl:            40px;
   --gl-space-4xl:            56px;
 
+  /* ---- Density: control sizes ----
+     The sizes GlassKit has always drawn its controls at, as tokens; the
+     rules read them with that value as fallback, like --gl-modal-max-width.
+     [data-density="compact"] (1c below) swaps in a denser set. The toggle's
+     thumb inset and travel and the first-line alignment of toggle, checkbox
+     and radio are derived from these, so any value set here stays aligned.
+     Two more are left unset on purpose, like --gl-toast-top:
+     --gl-control-padding-x (inner left and right of input, select and
+     textarea) and --gl-list-item-padding-y. Unset, the rules fall back to
+     --gl-space-md as before, so a spacing override still reaches them
+     wherever it is declared. */
+  --gl-control-height:       52px;   /* input, select */
+  --gl-btn-height:           56px;
+  --gl-btn-height-sm:        44px;
+  --gl-btn-height-lg:        64px;
+  --gl-textarea-min-height:  120px;
+  --gl-list-item-min-height: 56px;
+  --gl-toggle-width:         52px;
+  --gl-toggle-height:        30px;
+  --gl-toggle-thumb-size:    22px;
+  --gl-check-size:           24px;   /* checkbox, radio */
+  --gl-modal-action-height:  52px;
+
   /* ---- Typography ---- */
   --gl-font-family:          -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                              'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -219,6 +245,8 @@
 
   /* ---- Tab-Bar ---- */
   --gl-tab-bar-height:       82px;
+  /* Widest a .glass-modal grows; dialogs with a form or a table can take more. */
+  --gl-modal-max-width:      340px;
 
   /* ---- Tab-Bar Floating ---- */
   --gl-tab-bar-floating-bottom:    16px;
@@ -261,6 +289,7 @@
   --gl-color-text-muted:     rgba(26, 42, 54, 0.55);
   --gl-color-text-on-light:  #1a3a4a;
   --gl-color-text-heading:   #0f1f2a;
+  --gl-select-chevron:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(26,42,54,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   --gl-color-success:        #28a745;
   --gl-color-error:          #dc3545;
   --gl-color-warning:        #e6a800;
@@ -347,6 +376,37 @@
 }
 
 
+/* ============================================================
+   1c. DESIGN TOKENS – COMPACT DENSITY
+   ============================================================ */
+/* Opt-in, next to the theme: <html data-density="compact">. Fields and
+   buttons at 40px instead of 52 and 56, smaller toggles and boxes, denser
+   list rows — for admin screens, desktop layouts and narrow forms. Only
+   the density tokens change; colours, type and spacing stay as they are.
+
+   A bare attribute selector, like [data-theme="light"]: it matches <html>,
+   and a theme wrapper that carries the attribute in a shadow root that
+   adopts the full sheet. build-styles-js.mjs moves it into tokensCss with
+   the theme blocks. It stays after them: the dark one declares the
+   defaults with the same specificity, and where both match, the later
+   block wins. */
+[data-density="compact"] {
+  --gl-control-height:       40px;
+  --gl-control-padding-x:    var(--gl-space-sm);
+  --gl-btn-height:           40px;
+  --gl-btn-height-sm:        32px;
+  --gl-btn-height-lg:        48px;
+  --gl-textarea-min-height:  88px;
+  --gl-list-item-min-height: 48px;
+  --gl-list-item-padding-y:  10px;
+  --gl-toggle-width:         44px;
+  --gl-toggle-height:        26px;
+  --gl-toggle-thumb-size:    18px;
+  --gl-check-size:           20px;
+  --gl-modal-action-height:  44px;
+}
+
+
 /* ============================================================
    2. HINTERGRUND
    ============================================================ */
@@ -519,7 +579,7 @@
    ============================================================ */
 .glass-btn {
   display: flex; align-items: center; justify-content: center;
-  gap: 10px; width: 100%; height: 56px;
+  gap: 10px; width: 100%; height: var(--gl-btn-height, 56px);
   border: none; border-radius: var(--gl-radius-btn);
   font-family: var(--gl-font-family);
   font-size: var(--gl-font-size-btn);
@@ -598,8 +658,8 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-btn--tertiary:active { transform: translateY(1px); }
 
 /* Sizes */
-.glass-btn--sm { height: 44px; font-size: var(--gl-font-size-sm); border-radius: var(--gl-radius-sm); }
-.glass-btn--lg { height: 64px; font-size: var(--gl-font-size-lg); }
+.glass-btn--sm { height: var(--gl-btn-height-sm, 44px); font-size: var(--gl-font-size-sm); border-radius: var(--gl-radius-sm); }
+.glass-btn--lg { height: var(--gl-btn-height-lg, 64px); font-size: var(--gl-font-size-lg); }
 .glass-btn--auto { width: auto; padding: 0 var(--gl-space-xl); }
 
 
@@ -643,12 +703,12 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   font-size: var(--gl-font-size-sm);
   font-weight: var(--gl-font-weight-medium);
   color: var(--gl-icon-strong);
-  padding-left: var(--gl-space-2xs);
+  padding-inline-start: var(--gl-space-2xs);
 }
 
 .glass-input {
-  width: 100%; height: 52px;
-  padding: 0 var(--gl-space-md);
+  width: 100%; height: var(--gl-control-height, 52px);
+  padding: 0 var(--gl-control-padding-x, var(--gl-space-md));
   background: var(--gl-surface-2);
   backdrop-filter: blur(var(--gl-blur-light));
   -webkit-backdrop-filter: blur(var(--gl-blur-light));
@@ -697,14 +757,14 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-hint {
   font-size: var(--gl-font-size-xs);
   color: var(--gl-color-text-muted);
-  padding-left: var(--gl-space-2xs);
+  padding-inline-start: var(--gl-space-2xs);
 }
 .glass-hint--error { color: var(--gl-color-error); }
 
 /* Textarea */
 .glass-textarea {
-  width: 100%; min-height: 120px;
-  padding: var(--gl-space-md);
+  width: 100%; min-height: var(--gl-textarea-min-height, 120px);
+  padding: var(--gl-space-md) var(--gl-control-padding-x, var(--gl-space-md));
   background: var(--gl-surface-2);
   backdrop-filter: blur(var(--gl-blur-light));
   -webkit-backdrop-filter: blur(var(--gl-blur-light));
@@ -730,8 +790,8 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
    9. SELECT
    ============================================================ */
 .glass-select {
-  width: 100%; height: 52px;
-  padding: 0 var(--gl-space-3xl) 0 var(--gl-space-md);
+  width: 100%; height: var(--gl-control-height, 52px);
+  padding: 0 var(--gl-space-3xl) 0 var(--gl-control-padding-x, var(--gl-space-md));
   background: var(--gl-surface-2);
   backdrop-filter: blur(var(--gl-blur-light));
   -webkit-backdrop-filter: blur(var(--gl-blur-light));
@@ -745,10 +805,16 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   box-shadow: var(--gl-inset-subtle);
   cursor: pointer;
   appearance: none; -webkit-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-image: var(--gl-select-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"));
   background-repeat: no-repeat;
   background-position: right 16px center;
 }
+/* Right to left: the chevron and the room kept for it move to the left —
+   together, under :dir(), so a browser without it keeps both on the right. */
+.glass-select:dir(rtl) {
+  padding: 0 var(--gl-control-padding-x, var(--gl-space-md)) 0 var(--gl-space-3xl);
+  background-position: left 16px center;
+}
 .glass-select:focus {
   border-color: var(--gl-border-focus);
   box-shadow: var(--gl-shadow-focus), var(--gl-inset-medium);
@@ -764,7 +830,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 }
 
 .glass-search__icon {
-  position: absolute; left: var(--gl-space-md);
+  position: absolute; inset-inline-start: var(--gl-space-md);
   width: 18px; height: 18px;
   stroke: var(--gl-icon-muted) !important;
   stroke-width: 2 !important;
@@ -776,7 +842,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 }
 
 .glass-search .glass-input {
-  padding-left: 44px;
+  padding-inline-start: 44px;
   border-radius: var(--gl-radius-full);
 }
 
@@ -784,23 +850,30 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 /* ============================================================
    11. TOGGLE SWITCH
    ============================================================ */
-/* First-line alignment — see the note on .glass-checkbox below. Track is 30px. */
+/* First-line alignment — see the note on .glass-checkbox below. The track
+   is --gl-toggle-height high (30px by default). */
 .glass-toggle {
   display: inline-flex; align-items: flex-start;
   gap: var(--gl-space-sm); cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Visually hidden but keeps the control's area: zero-size inputs make the
-   browser suppress the native validation bubble on required fields
-   (silent submit block). pointer-events: none — the label handles clicks. */
+/* Visually hidden, but it keeps the control's area and lies on top of it.
+   Zero-size inputs make the browser suppress the native validation bubble
+   on required fields (silent submit block). On top, a pointer — or a test
+   tool that clicks the switch by its role — reaches the input itself; the
+   track drew over it before and took the click. It covers the track only:
+   the label text, which may hold a link, stays the label's. margin-top is
+   the track's first-line offset, from the label's font; a browser without
+   the lh unit drops it and keeps margin: 0, as the track does. */
 .glass-toggle__input {
-  position: absolute; opacity: 0; margin: 0;
-  width: 52px; height: 30px; pointer-events: none;
+  position: absolute; z-index: 1; opacity: 0; cursor: inherit;
+  width: var(--gl-toggle-width, 52px); height: var(--gl-toggle-height, 30px); margin: 0; font: inherit;
+  margin-top: max(0px, calc((1lh - var(--gl-toggle-height, 30px)) / 2));
 }
 
 .glass-toggle__track {
-  position: relative; width: 52px; height: 30px;
+  position: relative; width: var(--gl-toggle-width, 52px); height: var(--gl-toggle-height, 30px);
   background: var(--gl-surface-2);
   backdrop-filter: blur(var(--gl-blur-soft));
   -webkit-backdrop-filter: blur(var(--gl-blur-soft));
@@ -809,12 +882,19 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   transition: var(--gl-transition);
   box-shadow: var(--gl-inset-subtle);
   flex-shrink: 0;
-  margin-top: max(0px, calc((1lh - 30px) / 2));
+  margin-top: max(0px, calc((1lh - var(--gl-toggle-height, 30px)) / 2));
 }
 
+/* Inset and travel follow the track. Top and left (right, right to left)
+   are (height − thumb) / 2 − 1px inside the 1.5px border: 3px at 52 × 30,
+   where the thumb has always sat (taking off the whole border would move
+   it by half a pixel). It travels width − height, so the gap at the end
+   mirrors the one below. */
 .glass-toggle__thumb {
-  position: absolute; top: 3px; left: 3px;
-  width: 22px; height: 22px;
+  position: absolute;
+  top: calc((var(--gl-toggle-height, 30px) - var(--gl-toggle-thumb-size, 22px)) / 2 - 1px);
+  left: calc((var(--gl-toggle-height, 30px) - var(--gl-toggle-thumb-size, 22px)) / 2 - 1px);
+  width: var(--gl-toggle-thumb-size, 22px); height: var(--gl-toggle-thumb-size, 22px);
   border-radius: var(--gl-radius-pill);
   background: var(--gl-toggle-thumb-bg);
   box-shadow: 0 2px 6px rgba(0,0,0,0.2), var(--gl-inset-milk);
@@ -829,7 +909,15 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 }
 
 .glass-toggle__input:checked + .glass-toggle__track .glass-toggle__thumb {
-  transform: translateX(22px);
+  transform: translateX(calc(var(--gl-toggle-width, 52px) - var(--gl-toggle-height, 30px)));
+}
+/* Right to left the thumb starts on the right and travels left — both
+   under :dir(), so a browser without it keeps the left-to-right switch. */
+.glass-toggle__thumb:dir(rtl) {
+  left: auto; right: calc((var(--gl-toggle-height, 30px) - var(--gl-toggle-thumb-size, 22px)) / 2 - 1px);
+}
+.glass-toggle__input:checked + .glass-toggle__track .glass-toggle__thumb:dir(rtl) {
+  transform: translateX(calc(var(--gl-toggle-height, 30px) - var(--gl-toggle-width, 52px)));
 }
 
 .glass-toggle__input:focus-visible + .glass-toggle__track { box-shadow: var(--gl-shadow-focus); }
@@ -838,8 +926,12 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   font-size: var(--gl-font-size-base);
   color: var(--gl-color-text);
   user-select: none;
-  margin-top: max(0px, calc((30px - 1lh) / 2));
+  margin-top: max(0px, calc((var(--gl-toggle-height, 30px) - 1lh) / 2));
 }
+/* A control without a label keeps no gap for one. */
+.glass-toggle__label:empty,
+.glass-checkbox__label:empty,
+.glass-radio__label:empty { display: none; }
 
 
 /* ============================================================
@@ -847,24 +939,26 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
    ============================================================ */
 /* Control and label are aligned on the *first line*, not on the middle of the
    text block — a consent label runs over several lines and a centred box then
-   points at nothing. The two margins below centre the 24px box on that first
-   line; whichever is the shorter of the two gets the offset, so exactly one is
-   ever non-zero. For a single-line label this is pixel-identical to the
-   `align-items: center` of pre-1.11.0. Repeated on .glass-radio (24px) and
-   .glass-toggle (30px) — keep the three in step. */
+   points at nothing. The two margins below centre the box (--gl-check-size,
+   24px by default) on that first line; whichever is the shorter of the two
+   gets the offset, so exactly one is ever non-zero. For a single-line label
+   this is pixel-identical to the `align-items: center` of pre-1.11.0.
+   Repeated on .glass-radio (--gl-check-size) and .glass-toggle
+   (--gl-toggle-height) — keep the three in step. */
 .glass-checkbox {
   display: inline-flex; align-items: flex-start;
   gap: var(--gl-space-sm); cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
-/* See .glass-toggle__input: keep area so native validation bubbles anchor */
+/* On top of the box, covering it only — see .glass-toggle__input. */
 .glass-checkbox__input {
-  position: absolute; opacity: 0; margin: 0;
-  width: 24px; height: 24px; pointer-events: none;
+  position: absolute; z-index: 1; opacity: 0; cursor: inherit;
+  width: var(--gl-check-size, 24px); height: var(--gl-check-size, 24px); margin: 0; font: inherit;
+  margin-top: max(0px, calc((1lh - var(--gl-check-size, 24px)) / 2));
 }
 
 .glass-checkbox__box {
-  width: 24px; height: 24px;
+  width: var(--gl-check-size, 24px); height: var(--gl-check-size, 24px);
   border-radius: var(--gl-radius-xs);
   background: var(--gl-surface-2);
   backdrop-filter: blur(var(--gl-blur-soft));
@@ -874,7 +968,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   transition: var(--gl-transition);
   box-shadow: var(--gl-inset-subtle);
   flex-shrink: 0;
-  margin-top: max(0px, calc((1lh - 24px) / 2));
+  margin-top: max(0px, calc((1lh - var(--gl-check-size, 24px)) / 2));
 }
 
 .glass-checkbox__box svg {
@@ -897,7 +991,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-checkbox__label {
   font-size: var(--gl-font-size-base);
   color: var(--gl-color-text); user-select: none;
-  margin-top: max(0px, calc((24px - 1lh) / 2));
+  margin-top: max(0px, calc((var(--gl-check-size, 24px) - 1lh) / 2));
 }
 
 
@@ -910,14 +1004,15 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   gap: var(--gl-space-sm); cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
-/* See .glass-toggle__input: keep area so native validation bubbles anchor */
+/* On top of the circle, covering it only — see .glass-toggle__input. */
 .glass-radio__input {
-  position: absolute; opacity: 0; margin: 0;
-  width: 24px; height: 24px; pointer-events: none;
+  position: absolute; z-index: 1; opacity: 0; cursor: inherit;
+  width: var(--gl-check-size, 24px); height: var(--gl-check-size, 24px); margin: 0; font: inherit;
+  margin-top: max(0px, calc((1lh - var(--gl-check-size, 24px)) / 2));
 }
 
 .glass-radio__circle {
-  width: 24px; height: 24px;
+  width: var(--gl-check-size, 24px); height: var(--gl-check-size, 24px);
   border-radius: var(--gl-radius-pill);
   background: var(--gl-surface-2);
   backdrop-filter: blur(var(--gl-blur-soft));
@@ -926,7 +1021,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   transition: var(--gl-transition);
   box-shadow: var(--gl-inset-subtle);
   flex-shrink: 0;
-  margin-top: max(0px, calc((1lh - 24px) / 2));
+  margin-top: max(0px, calc((1lh - var(--gl-check-size, 24px)) / 2));
 }
 
 .glass-radio__dot {
@@ -949,7 +1044,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-radio__label {
   font-size: var(--gl-font-size-base);
   color: var(--gl-color-text); user-select: none;
-  margin-top: max(0px, calc((24px - 1lh) / 2));
+  margin-top: max(0px, calc((var(--gl-check-size, 24px) - 1lh) / 2));
 }
 
 
@@ -1071,6 +1166,9 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   );
   box-shadow: 0 0 8px color-mix(in srgb, var(--gl-color-error) 30%, transparent), var(--gl-inset-strong);
 }
+/* The fill grows from the inline start; right to left its gradient turns
+   round so the darker end still leads. */
+.glass-progress__fill:dir(rtl) { scale: -1 1; }
 
 
 /* ============================================================
@@ -1089,9 +1187,20 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   -webkit-font-smoothing: antialiased;
 }
 .glass-modal-overlay.is-active { opacity: 1; pointer-events: auto; }
+/* The overlay may be a native <dialog>: opened with showModal() it lies in
+   the top layer, the page behind it is inert, focus moves in and Escape
+   closes it. These rules undo the dialog's own box and backdrop; the
+   overlay above paints the dimmed, blurred layer. GlassKit Elements'
+   <glk-modal> uses exactly this. */
+dialog.glass-modal-overlay {
+  width: auto; height: auto; max-width: none; max-height: none;
+  margin: 0; border: 0; color: inherit;
+}
+dialog.glass-modal-overlay:not([open]) { display: none; }
+dialog.glass-modal-overlay::backdrop { background: transparent; }
 
 .glass-modal {
-  width: 100%; max-width: 340px;
+  width: 100%; max-width: var(--gl-modal-max-width, 340px);
   background: linear-gradient(to bottom,
     var(--gl-card-glow-top) 0%, var(--gl-card-glow-bottom) 100%
   );
@@ -1123,7 +1232,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-modal__footer { display: flex; border-top: 1px solid var(--gl-border-subtle); }
 
 .glass-modal__action {
-  flex: 1; height: 52px;
+  flex: 1; height: var(--gl-modal-action-height, 52px);
   background: transparent; border: none;
   font-family: var(--gl-font-family);
   font-size: var(--gl-font-size-btn);
@@ -1132,7 +1241,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   cursor: pointer; transition: var(--gl-transition-fast); outline: none;
 }
 .glass-modal__action:hover { background: var(--gl-surface-1); }
-.glass-modal__action + .glass-modal__action { border-left: 1px solid var(--gl-border-subtle); }
+.glass-modal__action + .glass-modal__action { border-inline-start: 1px solid var(--gl-border-subtle); }
 .glass-modal__action--primary { color: var(--gl-color-primary); font-weight: var(--gl-font-weight-semibold); }
 .glass-modal__action--danger { color: var(--gl-color-error); font-weight: var(--gl-font-weight-semibold); }
 
@@ -1243,7 +1352,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 }
 .glass-toast__action:active { transform: scale(0.96); }
 .glass-toast__close {
-  width: 28px; height: 28px; margin: 0 -8px 0 -4px; padding: 0;
+  width: 28px; height: 28px; margin-block: 0; margin-inline: -4px -8px; padding: 0;
   display: inline-flex; align-items: center; justify-content: center;
   border: 0; border-radius: 50%;
   background: transparent;
@@ -1327,7 +1436,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-tab-bar__item:not(.is-active):hover .glass-tab-bar__label { color: var(--gl-icon-default); }
 
 .glass-tab-bar__badge {
-  position: absolute; top: -4px; right: -8px;
+  position: absolute; top: -4px; inset-inline-end: -8px;
   min-width: 16px; height: 16px; padding: 0 4px;
   border-radius: var(--gl-radius-full);
   /* 10px text needs 4.5:1 – white on the plain error red only reaches 3.55:1
@@ -1513,7 +1622,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   font-family: var(--gl-font-family);
   font-size: var(--gl-font-size-base);
   font-weight: var(--gl-font-weight-semibold);
-  color: var(--gl-color-text); text-align: left;
+  color: var(--gl-color-text); text-align: start;
   outline: none; transition: var(--gl-transition);
   -webkit-tap-highlight-color: transparent;
 }
@@ -1782,18 +1891,19 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   transform-origin: bottom center;
 }
 .glass-popover--start {
-  left: 0;
+  inset-inline-start: 0; inset-inline-end: auto;
   transform: translateY(-4px) scale(0.96);
   transform-origin: top left;
 }
+.glass-popover--start:dir(rtl) { transform-origin: top right; }
 .glass-popover--start.is-open { transform: translateY(0) scale(1); }
 
 .glass-popover--end {
-  left: auto;
-  right: 0;
+  inset-inline-start: auto; inset-inline-end: 0;
   transform: translateY(-4px) scale(0.96);
   transform-origin: top right;
 }
+.glass-popover--end:dir(rtl) { transform-origin: top left; }
 .glass-popover--end.is-open { transform: translateY(0) scale(1); }
 
 
@@ -1850,15 +1960,15 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   display: flex;
   align-items: center;
   gap: var(--gl-space-sm);
-  padding: var(--gl-space-md) var(--gl-space-lg);
-  min-height: 56px;
+  padding: var(--gl-list-item-padding-y, var(--gl-space-md)) var(--gl-space-lg);
+  min-height: var(--gl-list-item-min-height, 56px);
   color: var(--gl-color-text);
   font-size: var(--gl-font-size-base);
   text-decoration: none;
   background: transparent;
   border: none;
   width: 100%;
-  text-align: left;
+  text-align: start;
   font-family: inherit;
   list-style: none;
 }
@@ -1866,20 +1976,20 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-list__item:not(:last-child)::after {
   content: '';
   position: absolute;
-  left: calc(var(--gl-space-lg) + 28px + var(--gl-space-sm));
-  right: var(--gl-space-lg);
+  inset-inline-start: calc(var(--gl-space-lg) + 28px + var(--gl-space-sm));
+  inset-inline-end: var(--gl-space-lg);
   bottom: 0;
   height: 1px;
   background: var(--gl-border-subtle);
   pointer-events: none;
 }
-/* Items without a leading icon: divider follows the standard horizontal
-   padding instead of the (non-existent) icon slot. */
-.glass-list__item:not(:has(.glass-list__leading)):not(:last-child)::after {
-  left: var(--gl-space-lg);
+/* Items without a leading icon — no slot, or a hidden one: divider follows
+   the standard horizontal padding instead of the icon slot. */
+.glass-list__item:not(:has(.glass-list__leading:not([hidden]))):not(:last-child)::after {
+  inset-inline-start: var(--gl-space-lg);
 }
-.glass-list__item:has(.glass-list__leading--lg):not(:last-child)::after {
-  left: calc(var(--gl-space-lg) + 40px + var(--gl-space-sm));
+.glass-list__item:has(.glass-list__leading--lg:not([hidden])):not(:last-child)::after {
+  inset-inline-start: calc(var(--gl-space-lg) + 40px + var(--gl-space-sm));
 }
 
 .glass-list__item--center {
@@ -1925,6 +2035,10 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   justify-content: center;
   color: var(--gl-icon-strong);
 }
+/* display: flex above beats the hidden attribute's own rule: an empty slot
+   hidden by script kept its 28px and its gap. */
+.glass-list__leading[hidden],
+.glass-list__trailing[hidden] { display: none; }
 .glass-list__leading svg,
 .glass-list__leading ::slotted(svg) {
   width: 24px;
@@ -2049,7 +2163,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
   font-size: var(--gl-font-size-sm); color: var(--gl-color-text);
 }
 .glass-table th {
-  text-align: left; padding: 8px 10px; white-space: nowrap;
+  text-align: start; padding: 8px 10px; white-space: nowrap;
   font-weight: var(--gl-font-weight-medium); color: var(--gl-color-text-muted);
   border-bottom: 1px solid var(--gl-border-medium);
 }
@@ -2059,7 +2173,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 }
 .glass-table tbody tr:last-child td { border-bottom: 0; }
 .glass-table tbody tr:hover td { background: var(--gl-surface-1); }
-.glass-table__num { text-align: right; font-variant-numeric: tabular-nums; }
+.glass-table__num { text-align: end; font-variant-numeric: tabular-nums; }
 .glass-table__muted { color: var(--gl-color-text-muted); }
 
 
@@ -2085,7 +2199,7 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-prose h3 { font-size: var(--gl-font-size-lg); }
 .glass-prose p, .glass-prose ul, .glass-prose ol, .glass-prose pre,
 .glass-prose blockquote, .glass-prose table { margin: 0 0 0.9em; }
-.glass-prose ul, .glass-prose ol { padding-left: 1.3em; }
+.glass-prose ul, .glass-prose ol { padding-inline-start: 1.3em; }
 .glass-prose strong { color: var(--gl-color-text-heading); }
 /* Links in running text are underlined: colour alone does not mark them. */
 .glass-prose a { color: var(--gl-color-primary); text-decoration: underline; text-underline-offset: 2px; }
@@ -2100,15 +2214,16 @@ a.glass-btn { display: inline-flex; text-decoration: none; }
 .glass-prose pre code { background: none; padding: 0; }
 .glass-prose blockquote {
   padding: 8px 14px;
-  border-left: 3px solid var(--gl-color-primary);
+  border-inline-start: 3px solid var(--gl-color-primary);
   background: var(--gl-surface-1);
-  border-radius: 0 var(--gl-radius-xs) var(--gl-radius-xs) 0;
+  border-start-start-radius: 0; border-end-start-radius: 0;
+  border-start-end-radius: var(--gl-radius-xs); border-end-end-radius: var(--gl-radius-xs);
 }
 .glass-prose img { max-width: 100%; height: auto; border-radius: var(--gl-radius-sm); }
 .glass-prose hr { height: 1px; border: 0; margin: 1.2em 0; background: var(--gl-border-subtle); }
 .glass-prose table { width: 100%; border-collapse: collapse; }
 .glass-prose th, .glass-prose td {
-  padding: 6px 8px; text-align: left;
+  padding: 6px 8px; text-align: start;
   border-bottom: 1px solid var(--gl-border-subtle);
 }