@usequeek/theme-kit 0.1.22 → 0.1.24

package/components/language-menu.css

@@ -0,0 +1,349 @@
+/* ============================================================
+   LanguageSwitcher variant="menu" — a trigger and a list of language links:
+   a popover on wide screens, a bottom sheet below 640px. Prefix: qn-lang.
+
+   STYLING SURFACE. Every part has a class AND a data-part attribute:
+     root            .qn-lang--menu [data-qn-language-switcher][data-variant="menu"]
+     trigger         .qn-lang__trigger          [data-part="trigger"]
+       label/code    .qn-lang__trigger-label    [data-part="trigger-label"]
+                     .qn-lang__trigger-code     [data-part="trigger-code"]
+       chevron       .qn-lang__chevron          [data-part="chevron"]
+     scrim           .qn-lang__scrim            [data-part="scrim"]
+     popover/sheet   .qn-lang__popover          [data-part="popover"]
+       grabber       .qn-lang__handle           [data-part="handle"]
+       group label   .qn-lang__title            [data-part="title"]
+       list          .qn-lang__options          [data-part="list"]
+       item          .qn-lang__item             [data-part="item"]
+       link          .qn-lang__option           [data-part="option"]  (aria-current / data-current on the current one)
+         name/code   .qn-lang__name / __code    [data-part="name"] / [data-part="code"]
+         marker      .qn-lang__mark             [data-part="mark"]
+   State on the root: data-state="open|closed", data-side="bottom|top",
+   data-align="start|end", data-mode="popover|sheet" (while open),
+   data-count="<n>", data-many="true" (more than 10), data-show-code="true".
+
+   VARIABLES (--qn-lang-*): each is read as var(--qn-lang-x, var(--qn-token, fallback)),
+   and none is declared on the root, so set them on the root, an ancestor or :root.
+     surface ink muted border radius item-radius item-hover current-bg accent
+     focus shadow row-height sheet-row-height gap pad offset popover-width
+     many-width many-columns list-max sheet-radius scrim z duration ease
+   Logical properties only: it mirrors itself in right-to-left storefronts.
+   ============================================================ */
+
+.qn-lang--menu {
+  position: relative;
+  display: inline-block;
+  max-inline-size: 100%;
+}
+
+/* ── trigger ───────────────────────────────────────────── */
+
+.qn-lang__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-inline-size: 44px;
+  min-block-size: 44px;
+  padding-inline: 12px;
+  border: 1px solid var(--qn-lang-border, var(--qn-border, color-mix(in srgb, currentColor 22%, transparent)));
+  border-radius: var(--qn-lang-radius, var(--qn-radius-sm, 6px));
+  background: transparent;
+  color: var(--qn-lang-ink, var(--qn-text, inherit));
+  font: inherit;
+  line-height: 1.25;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.qn-lang__trigger:hover {
+  border-color: var(--qn-lang-ink, var(--qn-text, currentColor));
+}
+
+.qn-lang__trigger:focus-visible,
+.qn-lang__option:focus-visible {
+  outline: 2px solid var(--qn-lang-focus, var(--qn-focus, currentColor));
+  outline-offset: 2px;
+}
+
+.qn-lang__trigger-code,
+.qn-lang__code {
+  display: none;
+  color: var(--qn-lang-muted, var(--qn-text-muted, color-mix(in srgb, currentColor 60%, transparent)));
+  font-size: 0.8em;
+  letter-spacing: 0.04em;
+}
+
+.qn-lang--menu[data-show-code='true'] .qn-lang__trigger-code,
+.qn-lang--menu[data-show-code='true'] .qn-lang__code {
+  display: inline;
+}
+
+.qn-lang__trigger .qn-lang__chevron {
+  position: static;
+  inline-size: 10px;
+  block-size: 10px;
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+}
+
+/* ── popover ───────────────────────────────────────────── */
+
+.qn-lang__popover {
+  position: absolute;
+  z-index: var(--qn-lang-z, 50);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  inline-size: var(--qn-lang-popover-width, 240px);
+  max-inline-size: calc(100vw - 32px);
+  max-block-size: var(--qn-lang-avail, none);
+  padding: var(--qn-lang-pad, 4px);
+  overflow: hidden;
+  border: 1px solid var(--qn-lang-border, var(--qn-border, color-mix(in srgb, currentColor 16%, transparent)));
+  border-radius: var(--qn-lang-radius, var(--qn-radius-md, 8px));
+  background: var(--qn-lang-surface, var(--qn-surface, Canvas));
+  color: var(--qn-lang-ink, var(--qn-text, CanvasText));
+  box-shadow: var(--qn-lang-shadow, 0 4px 16px rgb(0 0 0 / 0.08));
+  font: inherit;
+  text-align: start;
+  translate: var(--qn-lang-shift, 0px) 0;
+}
+
+.qn-lang__popover[hidden],
+.qn-lang__scrim[hidden] {
+  display: none;
+}
+
+.qn-lang--menu[data-side='bottom'] > .qn-lang__popover {
+  inset-block-start: calc(100% + var(--qn-lang-offset, 8px));
+}
+
+.qn-lang--menu[data-side='top'] > .qn-lang__popover {
+  inset-block-end: calc(100% + var(--qn-lang-offset, 8px));
+}
+
+.qn-lang--menu[data-align='end'] > .qn-lang__popover {
+  inset-inline-end: 0;
+}
+
+.qn-lang--menu[data-align='start'] > .qn-lang__popover {
+  inset-inline-start: 0;
+}
+
+.qn-lang--menu[data-many='true'] > .qn-lang__popover {
+  inline-size: var(--qn-lang-many-width, var(--qn-lang-popover-width, 240px));
+}
+
+.qn-lang__handle,
+.qn-lang__scrim {
+  display: none;
+}
+
+.qn-lang__title {
+  padding: 8px 12px 6px;
+  color: var(--qn-lang-muted, var(--qn-text-muted, color-mix(in srgb, currentColor 60%, transparent)));
+  font-size: 0.75em;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* ── list ──────────────────────────────────────────────── */
+
+.qn-lang__options {
+  display: grid;
+  grid-template-columns: repeat(var(--qn-lang-many-columns, 1), minmax(0, 1fr));
+  gap: var(--qn-lang-gap, 0);
+  flex: 1 1 auto;
+  min-block-size: 0;
+  max-block-size: var(--qn-lang-list-max, calc(var(--qn-lang-row-height, 44px) * 8.5));
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+/* The extra columns only apply to long lists. */
+.qn-lang--menu:not([data-many='true']) .qn-lang__options {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.qn-lang__item {
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.qn-lang__option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+  min-block-size: var(--qn-lang-row-height, 44px);
+  padding-inline: 12px;
+  border-radius: var(--qn-lang-item-radius, var(--qn-radius-sm, 6px));
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.qn-lang__option:hover {
+  background: var(--qn-lang-item-hover, color-mix(in srgb, currentColor 6%, transparent));
+}
+
+.qn-lang__option[aria-current='true'] {
+  background: var(--qn-lang-current-bg, transparent);
+  font-weight: 600;
+}
+
+.qn-lang__option:focus-visible {
+  outline-offset: -2px;
+}
+
+.qn-lang__name {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qn-lang__code {
+  flex: none;
+}
+
+.qn-lang__mark {
+  display: inline-flex;
+  inline-size: 16px;
+  block-size: 16px;
+  flex: none;
+  color: var(--qn-lang-accent, var(--qn-accent, currentColor));
+  visibility: hidden;
+}
+
+.qn-lang__option[aria-current='true'] .qn-lang__mark {
+  visibility: visible;
+}
+
+.qn-lang__mark svg {
+  inline-size: 100%;
+  block-size: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ── motion ────────────────────────────────────────────── */
+
+@keyframes qn-lang-pop-down {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes qn-lang-pop-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes qn-lang-sheet-in {
+  from { transform: translateY(100%); }
+  to { transform: none; }
+}
+
+@keyframes qn-lang-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.qn-lang--menu[data-side='bottom'] > .qn-lang__popover:not([hidden]) {
+  animation: qn-lang-pop-down var(--qn-lang-duration, 160ms) var(--qn-lang-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+}
+
+.qn-lang--menu[data-side='top'] > .qn-lang__popover:not([hidden]) {
+  animation: qn-lang-pop-up var(--qn-lang-duration, 160ms) var(--qn-lang-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .qn-lang__chevron {
+    transition: rotate var(--qn-lang-duration, 160ms) var(--qn-lang-ease, ease);
+  }
+}
+
+.qn-lang--menu[data-state='open'] .qn-lang__trigger .qn-lang__chevron {
+  rotate: 180deg;
+}
+
+/* ── bottom sheet (narrow screens) ─────────────────────── */
+
+@media (max-width: 639.98px) {
+  .qn-lang__scrim:not([hidden]) {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--qn-lang-z, 50) - 1);
+    display: block;
+    background: var(--qn-lang-scrim, rgb(0 0 0 / 0.4));
+    animation: qn-lang-fade-in var(--qn-lang-duration, 160ms) linear;
+  }
+
+  /* [data-side][data-align] outranks the popover placement rules above. */
+  .qn-lang--menu[data-side][data-align] > .qn-lang__popover {
+    position: fixed;
+    inset-block: auto 0;
+    inset-inline: 0;
+    inline-size: auto;
+    max-inline-size: none;
+    max-block-size: 85vh;
+    max-block-size: 85dvh;
+    padding: var(--qn-lang-pad, 4px) var(--qn-lang-pad, 4px) calc(var(--qn-lang-pad, 4px) + env(safe-area-inset-bottom, 0px));
+    border-inline-width: 0;
+    border-block-end-width: 0;
+    border-start-start-radius: var(--qn-lang-sheet-radius, 16px);
+    border-start-end-radius: var(--qn-lang-sheet-radius, 16px);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    translate: none;
+  }
+
+  .qn-lang--menu[data-side][data-align] > .qn-lang__popover:not([hidden]) {
+    animation: qn-lang-sheet-in calc(var(--qn-lang-duration, 160ms) * 1.5) var(--qn-lang-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
+  }
+
+  .qn-lang__handle {
+    display: block;
+    inline-size: 36px;
+    block-size: 4px;
+    margin: 8px auto 4px;
+    border-radius: 2px;
+    background: color-mix(in srgb, currentColor 25%, transparent);
+  }
+
+  .qn-lang--menu .qn-lang__options,
+  .qn-lang--menu:not([data-many='true']) .qn-lang__options {
+    grid-template-columns: minmax(0, 1fr);
+    max-block-size: none;
+  }
+
+  .qn-lang__option {
+    min-block-size: var(--qn-lang-sheet-row-height, 52px);
+  }
+}
+
+/* Page scroll is locked behind an open sheet. */
+body.qn-lang-lock {
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .qn-lang--menu[data-side][data-align] > .qn-lang__popover:not([hidden]) {
+    animation: qn-lang-fade-in 80ms linear;
+  }
+
+  .qn-lang__scrim:not([hidden]) {
+    animation-duration: 80ms;
+  }
+}