@hearthscale/app-ui 0.2.2 → 0.2.4

package/dist/ui.css

@@ -492,8 +492,6 @@
     pointer-events: none;
   }
   .hs-floating-tip > .hs-tip {
-    position: static;
-    opacity: 1;
     white-space: pre-line;
     overflow-wrap: anywhere;
     width: max-content;
@@ -703,6 +701,13 @@
     display: flex;
     flex-direction: column;
   }
+  .hs-scrim::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background: var(--scrim-fill);
+  }
   .hs-window-notice {
     position: absolute;
     inset: 0;
@@ -710,7 +715,7 @@
     display: grid;
     place-items: center;
     padding: var(--pad-row-x);
-    background: var(--scrim-soft);
+    --scrim-fill: var(--scrim-soft);
   }
   .hs-window-notice .hs-card {
     max-width: calc(var(--space) * 105);
@@ -808,12 +813,6 @@
     cursor: pointer;
     user-select: none;
   }
-  .hs-model-trigger-name {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   .hs-model-trigger-chevron {
     flex: none;
     color: var(--dim);
@@ -1220,7 +1219,7 @@
     translate: 0 -50%;
     width: calc(var(--space) * 80);
     padding: calc(var(--space) * 2.75) calc(var(--space) * 3.25);
-    background: var(--tipbg);
+    background: var(--plate-menu);
     backdrop-filter: var(--blur-surface);
     -webkit-backdrop-filter: var(--blur-surface);
     pointer-events: none;
@@ -1681,10 +1680,6 @@
   }
   .hs-shelf-file-name {
     flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     color: var(--text);
   }
   .hs-shelf-file-size {
@@ -1722,6 +1717,9 @@
   .hs-shelf-chip-note {
     color: var(--mut);
   }
+  .hs-shelf-chip-text {
+    max-width: calc(var(--space) * 60);
+  }
   .hs-shelf-refused {
     font-size: var(--fs-cap);
     color: var(--bad);
@@ -1915,7 +1913,10 @@
     display: grid;
     place-items: center;
     padding: calc(var(--space) * 6);
-    background: var(--scrim-soft);
+    --scrim-fill: var(--scrim-soft);
+  }
+  .hs-ask-float:not(.hs-scrim) {
+    background: var(--scrim-fill);
   }
   .hs-ask[data-placement='floating'] {
     width: min(calc(var(--space) * 140), 100%);
@@ -2379,7 +2380,7 @@
     transform: translateX(-50%);
     padding: calc(var(--space) * 0.75) calc(var(--space) * 1.75);
     border-radius: var(--r-pill);
-    background: var(--tipbg);
+    background: var(--plate-menu);
     border: var(--bw) solid var(--tipline);
     backdrop-filter: var(--blur-surface);
     -webkit-backdrop-filter: var(--blur-surface);
@@ -2515,10 +2516,6 @@
   }
   .hs-user-file-name {
     flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     font-size: var(--fs-body);
   }
   .hs-system-icon {
@@ -3252,12 +3249,6 @@
     place-items: center;
     flex: none;
   }
-  .hs-chip-text {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   .hs-lightbox {
     position: fixed;
     inset: 0;
@@ -3825,7 +3816,7 @@
     z-index: 80;
     display: grid;
     place-items: center;
-    background: var(--scrim-walk);
+    --scrim-fill: var(--scrim-walk);
   }
   .hs-walk[data-host='window'] {
     position: relative;
@@ -4003,6 +3994,8 @@
     border-radius: var(--r-round);
     background: var(--dim);
     opacity: 0.5;
+  }
+  .hs-walk-dot[data-back='true'] {
     cursor: pointer;
   }
   .hs-walk-dot[data-sel='true'] {
@@ -4310,22 +4303,15 @@
     color: var(--dim);
   }
   .hs-tooltip {
-    position: absolute;
     display: flex;
-    background: var(--tipbg);
+    background: var(--plate-menu);
     backdrop-filter: var(--blur-tip);
     -webkit-backdrop-filter: var(--blur-tip);
     white-space: nowrap;
-    pointer-events: none;
-    z-index: 10;
     align-items: center;
     flex-direction: row;
     gap: calc(var(--space) * 2);
     padding: calc(var(--space) * 2) calc(var(--space) * 2.75);
-    transition: opacity var(--dur) var(--ease-out);
-  }
-  html.hs-view .hs-tooltip {
-    background: var(--plate-menu);
   }
   .hs-tooltip-title {
     font-size: var(--fs-cap);
@@ -5573,7 +5559,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--scrim-dialog);
+    --scrim-fill: var(--scrim-dialog);
   }
   .hs-modal {
     position: relative;
@@ -6885,6 +6871,11 @@
     gap: calc(var(--space) * 2.5);
     margin-bottom: calc(var(--space) * 4.5);
     padding: calc(var(--space) * 2) 0;
+    transition: opacity var(--dur) var(--ease-out);
+  }
+  .hs-market-bar[data-away='true'] {
+    opacity: 0;
+    pointer-events: none;
   }
   .hs-market-bar, .hs-market-toolbar {
     container: market / inline-size;
@@ -7041,27 +7032,97 @@
       display: none;
     }
   }
-  .hs-market-feature {
+  .hs-carousel {
     position: relative;
-    overflow: hidden;
-    border-radius: var(--r-card);
-    isolation: isolate;
-    box-shadow: var(--shadow-pop);
   }
-  .hs-market-feature-track {
+  .hs-carousel-track {
     display: flex;
     overflow-x: auto;
-    clip-path: inset(0 round var(--r-card));
     scroll-snap-type: x mandatory;
     overscroll-behavior-x: contain;
   }
-  .hs-market-feature-track::-webkit-scrollbar {
+  .hs-carousel-track::-webkit-scrollbar {
     display: none;
   }
+  .hs-carousel-track > * {
+    flex: 0 0 100%;
+    scroll-snap-align: start;
+  }
+  .hs-carousel-dots {
+    position: absolute;
+    bottom: calc(var(--space) * 4);
+    left: 50%;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space);
+    border-radius: var(--r-pill);
+    background: var(--glass-on-dark);
+    backdrop-filter: var(--blur-glass);
+    -webkit-backdrop-filter: var(--blur-glass);
+    translate: -50% 0;
+  }
+  .hs-carousel-dots button {
+    display: grid;
+    place-items: center;
+    width: calc(var(--space) * 6);
+    height: calc(var(--space) * 6);
+    padding: 0;
+    border: 0;
+    border-radius: var(--r-pill);
+    background: none;
+    cursor: pointer;
+    transition: width var(--dur) var(--ease-out);
+  }
+  .hs-carousel-dots button::before {
+    width: calc(var(--space) * 1.75);
+    height: calc(var(--space) * 1.75);
+    border-radius: var(--r-pill);
+    background: var(--scrim-ink);
+    opacity: 0.4;
+    content: '';
+    transition: width var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
+  }
+  .hs-carousel-dots button[aria-current] {
+    width: calc(var(--space) * 9.25);
+  }
+  .hs-carousel-dots button[aria-current]::before {
+    width: calc(var(--space) * 5);
+    opacity: 1;
+  }
+  .hs-shell .hs-glass-turn {
+    position: absolute;
+    top: 50%;
+    display: grid;
+    place-items: center;
+    width: calc(var(--space) * 10);
+    height: calc(var(--space) * 10);
+    padding: 0;
+    translate: 0 -50%;
+    opacity: 0;
+    cursor: pointer;
+    transition: opacity var(--dur) var(--ease-out);
+  }
+  .hs-market-shots-wrap:hover .hs-glass-turn, .hs-carousel:hover .hs-glass-turn, .hs-glass-turn:focus-visible {
+    opacity: 1;
+  }
+  .hs-glass-turn[data-side='start'] {
+    left: calc(var(--space) * 4);
+  }
+  .hs-glass-turn[data-side='end'] {
+    right: calc(var(--space) * 4);
+  }
+  .hs-market-feature {
+    overflow: hidden;
+    border-radius: var(--r-card);
+    isolation: isolate;
+    box-shadow: var(--shadow-pop);
+  }
+  .hs-market-feature .hs-carousel-track {
+    clip-path: inset(0 round var(--r-card));
+  }
   .hs-market-feature-card {
     position: relative;
     display: flex;
-    flex: 0 0 100%;
     align-items: flex-end;
     aspect-ratio: var(--market-cover-ratio);
     min-height: calc(var(--space) * 100);
@@ -7072,7 +7133,6 @@
     font: inherit;
     text-align: left;
     text-decoration: none;
-    scroll-snap-align: start;
     isolation: isolate;
   }
   .hs-shell .hs-market-feature-card, .hs-shell .hs-market-row {
@@ -7144,35 +7204,6 @@
     padding: calc(var(--space) * 2.25) calc(var(--space) * 5.5);
     font-size: var(--fs-md);
   }
-  .hs-market-feature-dots {
-    position: absolute;
-    bottom: calc(var(--space) * 4);
-    left: 50%;
-    display: flex;
-    align-items: center;
-    gap: calc(var(--space) * 2);
-    padding: calc(var(--space) * 2) calc(var(--space) * 3);
-    border-radius: var(--r-pill);
-    background: var(--glass-on-dark);
-    backdrop-filter: var(--blur-glass);
-    -webkit-backdrop-filter: var(--blur-glass);
-    translate: -50% 0;
-  }
-  .hs-market-feature-dots button {
-    width: calc(var(--space) * 1.75);
-    height: calc(var(--space) * 1.75);
-    padding: 0;
-    border: 0;
-    border-radius: var(--r-pill);
-    background: var(--scrim-ink);
-    opacity: 0.4;
-    cursor: pointer;
-    transition: width var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
-  }
-  .hs-market-feature-dots button[aria-current] {
-    width: calc(var(--space) * 5);
-    opacity: 1;
-  }
   @media (width < 760px) {
     .hs-market-feature-card {
       aspect-ratio: 4 / 5;
@@ -7520,28 +7551,6 @@
       height: calc(var(--space) * 65);
     }
   }
-  .hs-shell .hs-market-turn {
-    position: absolute;
-    top: 50%;
-    display: grid;
-    place-items: center;
-    width: calc(var(--space) * 10);
-    height: calc(var(--space) * 10);
-    padding: 0;
-    translate: 0 -50%;
-    opacity: 0;
-    cursor: pointer;
-    transition: opacity var(--dur) var(--ease-out);
-  }
-  .hs-market-shots-wrap:hover .hs-market-turn, .hs-market-feature:hover .hs-market-turn, .hs-market-turn:focus-visible {
-    opacity: 1;
-  }
-  .hs-market-turn[data-side='start'] {
-    left: calc(var(--space) * 4);
-  }
-  .hs-market-turn[data-side='end'] {
-    right: calc(var(--space) * 4);
-  }
   .hs-market-part {
     display: flex;
     flex-direction: column;
@@ -8250,13 +8259,6 @@
     gap: calc(var(--space) * 1.25);
     flex: none;
   }
-  .hs-model-library-actions .hs-tipwrap {
-    position: relative;
-  }
-  .hs-model-library-actions .hs-tip {
-    top: calc(100% + var(--space) * 2);
-    right: 0;
-  }
   .hs-model-library-actions .hs-model-hover-action {
     opacity: 0;
   }
@@ -8473,22 +8475,12 @@
   .hs-model-fit > svg {
     flex: none;
   }
-  .hs-model-fit > .hs-tip {
-    left: 0;
-    top: calc(100% + var(--space) * 1.75);
-    width: calc(var(--space) * 87.5);
-    max-width: 100%;
-  }
   .hs-model-fit[data-variant='icon'] {
     flex: none;
     margin: 0;
     padding: 0;
     background: none;
   }
-  .hs-model-fit:focus-visible .hs-tip {
-    opacity: 1;
-    visibility: visible;
-  }
   .hs-server-log {
     max-height: calc(var(--space) * 85);
     overflow: auto;
@@ -8670,6 +8662,14 @@
     line-height: 1.5;
     color: var(--mut);
   }
+  .hs-installer-stopped-text[data-tone='bad'] {
+    color: var(--bad);
+  }
+  .hs-installer-stopped-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--space) * 2);
+  }
   .hs-installer-folder {
     margin-top: calc(var(--space) * 4);
     min-height: calc(var(--space) * 10);
@@ -8689,6 +8689,9 @@
     flex-direction: column;
     gap: calc(var(--space) * 3.5);
   }
+  .hs-installer-offer > .hs-installer-folder {
+    margin-top: 0;
+  }
   .hs-installer-specs {
     display: flex;
     justify-content: center;
@@ -8803,19 +8806,20 @@
     cursor: default;
   }
   .hs-grant-group-bypass {
-    position: relative;
     display: grid;
     place-items: center;
     flex: none;
     color: var(--bad);
   }
-  .hs-grant-group-bypass > .hs-tip {
-    top: calc(100% + var(--space) * 1.5);
-    left: 0;
-  }
   .hs-info-row > .hs-setting-value > .hs-input {
     width: calc(var(--space) * 70);
   }
+  .hs-info-row > .hs-setting-value:has(> .hs-model-picker) {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 50%;
+  }
   .hs-info-row > .hs-setting-value > .hs-meter[data-variant='bar'] {
     width: calc(var(--space) * 40);
     height: calc(var(--space) * 1.5);
@@ -8837,7 +8841,6 @@
     gap: var(--gap-inline);
   }
   .hs-key-binding {
-    position: relative;
     display: inline-flex;
     align-items: center;
     min-height: calc(var(--space) * 5.5);
@@ -8875,7 +8878,6 @@
     color: var(--text);
   }
   .hs-key-remove {
-    position: relative;
     display: inline-flex;
   }
   .hs-key-clash {
@@ -8896,6 +8898,13 @@
     font-size: var(--fs-md);
     color: var(--text);
   }
+  .hs-provider-ask {
+    position: relative;
+  }
+  .hs-provider-ask > .hs-tip {
+    top: calc(100% + var(--space) * 1.5);
+    right: 0;
+  }
   .hs-dashboard {
     position: relative;
     min-height: 100dvh;
@@ -8929,7 +8938,8 @@
   .hs-dashboard-plate {
     position: relative;
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
+    column-gap: calc(var(--space) * 2);
     align-items: center;
     max-width: calc(var(--space) * 310);
     min-height: calc(var(--space) * 14);
@@ -9164,6 +9174,16 @@
     padding-top: 0;
     border-top: 0;
   }
+  .hs-figure > .hs-tip, .hs-bar-series-bar > .hs-tip {
+    position: absolute;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur) var(--ease-out);
+  }
+  .hs-figure:hover > .hs-tip, .hs-bar-series-bar:hover > .hs-tip {
+    opacity: 1;
+  }
   .hs-figure > .hs-tip {
     top: calc(100% + var(--space));
     left: 0;
@@ -9319,6 +9339,8 @@
       -webkit-mask-image: none;
       mask-image: none;
     }
+  }
+  @media (width < 1240px) {
     .hs-dashboard-plate {
       grid-template-columns: minmax(0, 1fr) auto;
     }
@@ -9385,6 +9407,9 @@
       padding: calc(var(--space) * 4);
     }
   }
+  .hs-brand-mark[data-brand='linux'] {
+    background: url('./brand/linux-tux.svg') center / contain no-repeat;
+  }
   .hs-sidebar-rail.hs-rail {
     flex: none;
     width: var(--w-rail);
@@ -9685,8 +9710,8 @@
     box-shadow: var(--gloss-edge);
   }
   .hs-lane :is(.hs-tab-label, .hs-lane-crumb-app, .hs-lane-crumb-title)[data-cut] {
-    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--tab-fade)), transparent);
-    mask-image: linear-gradient(90deg, #000 calc(100% - var(--tab-fade)), transparent);
+    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--cut-fade)), transparent);
+    mask-image: linear-gradient(90deg, #000 calc(100% - var(--cut-fade)), transparent);
   }
   .hs-tab-card {
     position: absolute;
@@ -9701,7 +9726,7 @@
     margin-top: var(--gap-tile);
     padding: var(--gap-stack);
     border-radius: var(--r-card);
-    background: var(--tipbg);
+    background: var(--plate-menu);
     border: var(--bw) solid var(--tipline);
     box-shadow: var(--gloss-edge), var(--shadow-pop);
     backdrop-filter: var(--blur-overlay);
@@ -9842,7 +9867,7 @@
     position: absolute;
     inset: 0;
     z-index: 1;
-    overflow: hidden;
+    overflow: clip;
     pointer-events: none;
   }
   .hs-surface {
@@ -9853,7 +9878,7 @@
     height: 800px;
     display: flex;
     border-radius: calc(var(--r-tile) - var(--bw));
-    overflow: hidden;
+    overflow: clip;
     visibility: hidden;
     content-visibility: hidden;
   }
@@ -10418,6 +10443,14 @@
   font-display: swap;
   src: url('./fonts/InterVariable.woff2') format('woff2');
 }
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./fonts/InterVariable-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 @font-face {
   font-family: 'JetBrains Mono';
   font-style: normal;
@@ -10777,7 +10810,7 @@
     --tabcard-w: calc(var(--space) * 80);
     --tabcard-dip: 0.82;
     --tab-text-min: calc(var(--space) * 12);
-    --tab-fade: calc(var(--space) * 4);
+    --cut-fade: calc(var(--space) * 4);
     --lane-arrow-w: calc(var(--space) * 5);
     --h-lane-rule: calc(var(--space) * 6);
     --lane-rule-alpha: 0.22;
@@ -11412,6 +11445,22 @@
       transform: rotate(360deg);
     }
   }
+  .hs-cut {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  @supports (animation-timeline: scroll()) {
+    .hs-cut {
+      animation: hsCut linear both;
+      animation-timeline: scroll(self inline);
+    }
+  }
+  @keyframes hsCut {
+    from, to {
+      mask-image: linear-gradient(90deg, #000 calc(100% - var(--cut-fade)), transparent);
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .hs-shell {
       --dur: 0s;
@@ -11452,17 +11501,10 @@
     }
   }
   .hs-tip {
-    opacity: 0;
     border-radius: var(--r-card);
     border: var(--bw) solid var(--tipline);
     box-shadow: var(--gloss-edge), var(--shadow-pop);
   }
-  .hs-tipwrap:hover > .hs-tip {
-    opacity: 1;
-  }
-  .hs-tipwrap[data-tip-closed='true']:hover > .hs-tip {
-    opacity: 0;
-  }
   .hs-ta {
     field-sizing: content;
     min-height: calc(var(--space) * 12);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hearthscale/app-ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "The UI kit of a Hearthscale app's view: the design system's tokens, hs-* classes and React parts, and the whole Remix Icon set.",
   "license": "MIT",
   "homepage": "https://hearthscale.com/docs/developers/views/kit",