@ponchia/ui 0.2.1 → 0.3.0

package/css/app.css

@@ -3,32 +3,32 @@
    For admin / operator dashboards.
    ========================================================================== */
 
-.app-shell {
+.ui-app-shell {
   display: grid;
   grid-template-columns: var(--app-rail, 14rem) minmax(0, 1fr);
-  min-height: 100vh;
+  min-block-size: 100vh;
 }
 
-.app-shell--full {
+.ui-app-shell--full {
   grid-template-columns: minmax(0, 1fr);
 }
 
 /* --- Sidebar rail --- */
 
-.app-rail {
+.ui-app-rail {
   background: var(--panel);
-  border-right: 1px solid var(--line);
+  border-inline-end: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   padding: var(--space-md);
   position: sticky;
-  top: 0;
-  height: 100vh;
+  inset-block-start: 0;
+  block-size: 100vh;
   overflow-y: auto;
 }
 
-.app-rail__brand {
+.ui-app-rail__brand {
   align-items: center;
   color: var(--text);
   display: flex;
@@ -40,20 +40,20 @@
   text-transform: uppercase;
 }
 
-.app-rail__brand::before {
+.ui-app-rail__brand::before {
   background: var(--accent);
   border-radius: 50%;
   content: '';
-  height: 0.5rem;
-  width: 0.5rem;
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
 }
 
-.app-nav {
+.ui-app-nav {
   display: grid;
   gap: 0.15rem;
 }
 
-.app-nav__section {
+.ui-app-nav__section {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -63,9 +63,9 @@
   text-transform: uppercase;
 }
 
-.app-nav a {
+.ui-app-nav a {
   align-items: center;
-  border-left: 2px solid transparent;
+  border-inline-start: 2px solid transparent;
   color: var(--text-soft);
   display: flex;
   font-family: var(--mono);
@@ -78,62 +78,62 @@
     color var(--duration-fast) var(--ease-standard);
 }
 
-.app-nav a::before {
+.ui-app-nav a::before {
   background: currentColor;
   border-radius: 50%;
   content: '';
-  height: 0.34rem;
+  block-size: 0.34rem;
   opacity: 0.45;
-  width: 0.34rem;
+  inline-size: 0.34rem;
 }
 
-.app-nav a:hover {
+.ui-app-nav a:hover {
   background: var(--bg-accent);
   color: var(--text);
 }
 
-.app-nav a.is-active {
+.ui-app-nav a.is-active {
   background: var(--accent-soft);
-  border-left-color: var(--accent);
-  color: var(--accent);
+  border-inline-start-color: var(--accent);
+  color: var(--accent-text);
 }
 
-.app-nav a.is-active::before {
+.ui-app-nav a.is-active::before {
   opacity: 1;
 }
 
-.app-rail__foot {
-  border-top: 1px solid var(--line);
+.ui-app-rail__foot {
+  border-block-start: 1px solid var(--line);
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
-  margin-top: auto;
-  padding-top: var(--space-sm);
+  margin-block-start: auto;
+  padding-block-start: var(--space-sm);
 }
 
 /* --- Main column --- */
 
-.app-main {
+.ui-app-main {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
-.app-topbar {
+.ui-app-topbar {
   align-items: center;
   background: color-mix(in srgb, var(--bg) 86%, transparent);
   backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--line);
+  border-block-end: 1px solid var(--line);
   display: flex;
   gap: var(--space-md);
   justify-content: space-between;
   padding: 0.75rem var(--space-lg);
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: 10;
 }
 
-.app-topbar__title {
+.ui-app-topbar__title {
   color: var(--text);
   font-family: var(--display);
   font-size: 1.1rem;
@@ -142,7 +142,7 @@
   text-transform: uppercase;
 }
 
-.app-content {
+.ui-app-content {
   display: grid;
   gap: var(--space-lg);
   padding: var(--space-lg);
@@ -150,7 +150,7 @@
 
 /* --- Toolbar --- */
 
-.app-toolbar {
+.ui-app-toolbar {
   align-items: center;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -162,7 +162,7 @@
   padding: 0.7rem 0.85rem;
 }
 
-.app-toolbar__group {
+.ui-app-toolbar__group {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -171,7 +171,7 @@
 
 /* --- Panel --- */
 
-.app-panel {
+.ui-app-panel {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -180,14 +180,14 @@
   padding: var(--space-md);
 }
 
-.app-panel__head {
+.ui-app-panel__head {
   align-items: flex-start;
   display: flex;
   gap: 0.7rem;
   justify-content: space-between;
 }
 
-.app-panel__title {
+.ui-app-panel__title {
   color: var(--text);
   font-family: var(--display);
   font-size: 0.95rem;
@@ -196,21 +196,21 @@
   text-transform: uppercase;
 }
 
-.app-panel__head p,
-.app-empty-state p {
+.ui-app-panel__head p,
+.ui-app-empty-state p {
   color: var(--text-dim);
   margin: 0.3rem 0 0;
 }
 
 /* --- Metric tiles --- */
 
-.app-metrics {
+.ui-app-metrics {
   display: grid;
   gap: var(--space-md);
   grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
 }
 
-.app-metric {
+.ui-app-metric {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -219,7 +219,7 @@
   padding: var(--space-md);
 }
 
-.app-metric__label {
+.ui-app-metric__label {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -227,7 +227,7 @@
   text-transform: uppercase;
 }
 
-.app-metric__value {
+.ui-app-metric__value {
   color: var(--text);
   font-family: var(--display);
   font-size: 1.9rem;
@@ -236,22 +236,22 @@
   line-height: 1;
 }
 
-.app-metric__delta {
+.ui-app-metric__delta {
   font-family: var(--mono);
   font-size: var(--text-xs);
 }
 
-.app-metric__delta.is-pos {
+.ui-app-metric__delta.is-pos {
   color: var(--success);
 }
 
-.app-metric__delta.is-neg {
+.ui-app-metric__delta.is-neg {
   color: var(--danger);
 }
 
 /* --- Empty state --- */
 
-.app-empty-state {
+.ui-app-empty-state {
   border: 1px dashed var(--line-strong);
   border-radius: var(--radius-md);
   color: var(--text-dim);
@@ -261,49 +261,49 @@
 
 /* --- Mobile rail collapse --- */
 
-.app-rail__toggle {
+.ui-app-rail__toggle {
   display: none;
 }
 
 @media (max-width: 880px) {
-  .app-shell {
+  .ui-app-shell {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .app-rail {
+  .ui-app-rail {
     flex-direction: row;
-    height: auto;
+    block-size: auto;
     overflow-x: auto;
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: 11;
   }
 
-  .app-rail__foot {
+  .ui-app-rail__foot {
     display: none;
   }
 
-  .app-nav {
+  .ui-app-nav {
     grid-auto-flow: column;
     gap: 0.15rem;
   }
 
-  .app-nav__section {
+  .ui-app-nav__section {
     display: none;
   }
 
-  .app-nav a {
-    border-left: 0;
-    border-bottom: 2px solid transparent;
+  .ui-app-nav a {
+    border-inline-start: 0;
+    border-block-end: 2px solid transparent;
     white-space: nowrap;
   }
 
-  .app-nav a.is-active {
-    border-left: 0;
-    border-bottom-color: var(--accent);
+  .ui-app-nav a.is-active {
+    border-inline-start: 0;
+    border-block-end-color: var(--accent);
   }
 
-  .app-content {
+  .ui-app-content {
     padding: var(--space-md);
   }
 }

package/css/base.css

@@ -24,7 +24,7 @@ body {
   background: var(--bg);
   color: var(--text);
   margin: 0;
-  min-height: 100vh;
+  min-block-size: 100vh;
   position: relative;
 }
 
@@ -58,7 +58,7 @@ textarea {
 img,
 svg {
   display: block;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 p,
@@ -134,13 +134,13 @@ pre code {
 
 hr {
   border: 0;
-  border-top: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   margin: var(--space-lg) 0;
 }
 
 ::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
+  block-size: 10px;
+  inline-size: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -161,26 +161,10 @@ input:focus-visible,
 select:focus-visible,
 textarea:focus-visible,
 [tabindex]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
-.skip-link {
-  background: var(--panel-strong);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-md);
-  color: var(--text);
-  left: 1rem;
-  padding: 0.7rem 1rem;
-  position: fixed;
-  top: -4rem;
-  z-index: 40;
-}
-
-.skip-link:focus {
-  top: 1rem;
-}
-
 /* Small global helpers reused across apps. */
 .ui-muted {
   color: var(--text-dim);
@@ -198,9 +182,137 @@ textarea:focus-visible,
 .ui-visually-hidden {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  height: 1px;
+  block-size: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
+  inline-size: 1px;
+}
+
+/* --------------------------------------------------------------------------
+   Forced colors (Windows High Contrast). The OS replaces the palette and
+   strips backgrounds/shadows, so any state signalled only by a fill goes
+   invisible. Re-assert those with system colors so meaning survives.
+   -------------------------------------------------------------------------- */
+@media (forced-colors: active) {
+  .ui-progress__bar,
+  .ui-dotbar i.is-on,
+  .ui-dotspinner i {
+    background: Highlight;
+  }
+
+  .ui-dot,
+  .ui-dot--accent,
+  .ui-dot--success,
+  .ui-dot--warning,
+  .ui-dot--danger,
+  .ui-switch__thumb {
+    background: CanvasText;
+  }
+
+  .ui-dot--live::after {
+    border-color: CanvasText;
+  }
+
+  .ui-switch input:checked + .ui-switch__track,
+  .ui-segmented__option:has(input:checked) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+
+  /* The active tab signals selection only via accent colour/border, both
+     flattened by the forced palette — re-assert it with a system colour
+     so the selected tab stays distinguishable (a11y review L3). */
+  .ui-tab.is-active {
+    border-block-end-color: Highlight;
+    color: Highlight;
+  }
+
+  /* Keyboard focus must never depend on a colour that gets overridden. */
+  a:focus-visible,
+  button:focus-visible,
+  summary:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible,
+  [tabindex]:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Print — ink on white, no chrome, no page-break scars. The framework
+   dresses content sites too, so a clean printout / PDF matters.
+   -------------------------------------------------------------------------- */
+@media print {
+  html,
+  body {
+    background: #fff;
+    color: #000;
+  }
+
+  /* Decorative / interactive chrome never prints. */
+  .ui-dotfield,
+  .ui-toast-stack,
+  .ui-app-rail,
+  .ui-app-topbar,
+  .ui-sitenav,
+  .ui-themetoggle__button,
+  .ui-sitemenu,
+  .ui-spinner,
+  .ui-dotloader,
+  .ui-dotspinner,
+  dialog.ui-modal::backdrop {
+    display: none !important;
+  }
+
+  /* Flat ink: drop shadows/fills, keep hairlines as real rules. */
+  *,
+  *::before,
+  *::after {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  .ui-card,
+  .ui-panel,
+  .ui-surface,
+  .ui-alert,
+  .ui-table-wrap {
+    border: 1px solid #999;
+  }
+
+  /* Scroll containers must spill on paper, not clip. */
+  .ui-table-wrap,
+  .ui-prose table,
+  .ui-tabs__list,
+  pre {
+    overflow: visible !important;
+  }
+
+  /* Do not split atomic blocks across pages. */
+  .ui-card,
+  .ui-panel,
+  .ui-alert,
+  figure,
+  blockquote,
+  pre,
+  tr {
+    break-inside: avoid;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+  }
+
+  /* Long-form: surface link targets when printed. */
+  .ui-prose a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.85em;
+    word-break: break-all;
+  }
+
+  @page {
+    margin: 18mm;
+  }
 }