@trebired/frontend 26.2.0 → 27.0.0

package/dist/surface/styles/layout.scss

@@ -65,106 +65,6 @@ html:not(#{ns.data("parsed")}) #{ns.class("glow")}::after {
   z-index: 1;
 }
 
-#{ns.class("card")} > #{ns.class("frame")}:first-child {
-  width: auto;
-  margin: calc(var(#{ns.css-var("surf-card-root-padding")}, 12px) * -1);
-  margin-block-end: 0;
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-  border-block-start: 0;
-  border-inline: 0;
-}
-
-#{ns.class("frame")} {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  aspect-ratio: var(#{ns.css-var("surf-frame-root-ratio")}, 16 / 10);
-  border: var(
-    #{ns.css-var("surf-frame-root-border")},
-    var(--border-width, 1px) solid var(#{ns.css-var("border")}, #000)
-  );
-  border-radius: var(
-    #{ns.css-var("surf-frame-root-radius")},
-    var(--radius-lg, var(#{ns.css-var("radius")}, 0))
-  );
-  background: var(#{ns.css-var("surf-frame-root-bg")}, var(#{ns.css-var("surface-muted")}, #eee));
-}
-
-#{ns.element-class("frame", "badge")} {
-  position: absolute;
-  inset-block-start: var(#{ns.css-var("surf-frame-badge-offset")}, 1rem);
-  inset-inline-start: var(#{ns.css-var("surf-frame-badge-offset")}, 1rem);
-  z-index: 1;
-}
-
-#{ns.element-class("frame", "cover")} {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: var(#{ns.css-var("surf-frame-cover-position")}, 50% 50%);
-  transition: transform var(#{ns.css-var("surf-frame-cover-duration")}, 700ms) ease;
-}
-
-#{ns.element-class("frame", "scrim")} {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background: var(
-    #{ns.css-var("surf-frame-scrim-bg")},
-    linear-gradient(to top, color-mix(in srgb, var(#{ns.css-var("text")}, #000) 65%, transparent), transparent 60%)
-  );
-  pointer-events: none;
-}
-
-#{ns.element-class("frame", "caption")} {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-  z-index: 2;
-  display: grid;
-  gap: var(#{ns.css-var("surf-frame-caption-gap")}, var(#{ns.css-var("gap-xs2")}, 4px));
-  padding: var(#{ns.css-var("surf-frame-caption-padding")}, var(#{ns.css-var("gap-sm")}, 12px));
-  color: var(#{ns.css-var("surf-frame-caption-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-frame-caption-bg")}, transparent);
-}
-
-#{ns.element-class("frame", "action")} {
-  position: absolute;
-  inset-block-end: var(#{ns.css-var("surf-frame-action-offset")}, 1rem);
-  inset-inline-end: var(#{ns.css-var("surf-frame-action-offset")}, 1rem);
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(#{ns.css-var("surf-frame-action-size")}, 3rem);
-  height: var(#{ns.css-var("surf-frame-action-size")}, 3rem);
-  border-radius: var(#{ns.css-var("surf-frame-action-radius")}, var(#{ns.css-var("radius")}, 0));
-  color: var(#{ns.css-var("surf-frame-action-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-frame-action-bg")}, var(#{ns.css-var("page")}, #fff));
-  transition:
-  color var(#{ns.css-var("tone-change")}), background-color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.element-class("frame", "action")} #{ns.class("icon-glyph")} {
-  font-size: var(#{ns.css-var("surf-frame-action-glyph")}, 1.5rem);
-}
-
-#{ns.class("card")}#{ns.data("interactive", "true")}:hover #{ns.element-class("frame", "action")} {
-  color: var(#{ns.css-var("surf-frame-action-state-hover-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-frame-action-state-hover-bg")}, var(#{ns.css-var("focus")}, #000));
-}
-
-#{ns.class("card")}#{ns.data("interactive", "true")}:hover #{ns.element-class("frame", "cover")} {
-  transform: scale(var(#{ns.css-var("surf-frame-cover-state-hover-scale")}, 1.05));
-}
-
 #{ns.class("logo")} {
   display: inline-flex;
   flex: 0 1 auto;

package/package.json

@@ -8,7 +8,7 @@
     }
   },
   "name": "@trebired/frontend",
-  "version": "26.2.0",
+  "version": "27.0.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,

package/dist/surface/styles/blocks.scss

@@ -1,174 +0,0 @@
-@use "@trebired/bundler/namespace" as ns;
-
-#{ns.class("band")} {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-block: var(#{ns.css-var("surf-band-root-py")}, clamp(2.5rem, 5vw, 4rem));
-  padding-inline: var(#{ns.css-var("surf-band-root-px")}, clamp(1rem, 3vw, 2rem));
-  color: var(#{ns.css-var("surf-band-root-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-band-root-bg")}, var(#{ns.css-var("page")}, #fff));
-}
-
-#{ns.class("band")} > * {
-  width: min(var(#{ns.css-var("surf-band-root-max")}, 80rem), 100%);
-  min-width: 0;
-}
-
-#{ns.class("band")}--muted {
-  color: var(#{ns.css-var("surf-band-tone-muted-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-band-tone-muted-bg")}, var(#{ns.css-var("surface-muted")}, #eee));
-}
-
-#{ns.class("band")}--inverse {
-  #{ns.css-var("text-muted")}: var(
-    #{ns.css-var("surf-band-tone-inverse-text-muted")},
-    color-mix(in srgb, currentColor 62%, transparent)
-  );
-  color: var(#{ns.css-var("surf-band-tone-inverse-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-band-tone-inverse-bg")}, var(#{ns.css-var("ink")}, #000));
-}
-
-#{ns.class("tile")} {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: var(#{ns.css-var("surf-tile-root-size")}, 3rem);
-  height: var(#{ns.css-var("surf-tile-root-size")}, 3rem);
-  border-radius: var(#{ns.css-var("surf-tile-root-radius")}, var(#{ns.css-var("radius")}, 0));
-  color: var(#{ns.css-var("surf-tile-root-color")}, currentColor);
-  background: var(#{ns.css-var("surf-tile-root-bg")}, transparent);
-  transition: background-color var(#{ns.css-var("transition-fast")}, 180ms) ease,
-  color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.class("tile")} #{ns.class("icon-glyph")} {
-  font-size: var(#{ns.css-var("surf-tile-root-glyph")}, 1.5rem);
-}
-
-#{ns.class("tile")}--sm {
-  #{ns.css-var("surf-tile-root-size")}: var(#{ns.css-var("surf-tile-sizes-sm-size")}, 2.5rem);
-  #{ns.css-var("surf-tile-root-glyph")}: var(#{ns.css-var("surf-tile-sizes-sm-glyph")}, 1rem);
-}
-
-#{ns.class("tile")}--lg {
-  #{ns.css-var("surf-tile-root-size")}: var(#{ns.css-var("surf-tile-sizes-lg-size")}, 4rem);
-  #{ns.css-var("surf-tile-root-glyph")}: var(#{ns.css-var("surf-tile-sizes-lg-glyph")}, 1.75rem);
-}
-
-#{ns.class("tile")}--muted {
-  color: var(#{ns.css-var("surf-tile-tone-muted-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-tile-tone-muted-bg")}, var(#{ns.css-var("surface-muted")}, #eee));
-}
-
-#{ns.class("tile")}--inverse {
-  color: var(#{ns.css-var("surf-tile-tone-inverse-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tile-tone-inverse-bg")}, var(#{ns.css-var("text")}, #000));
-}
-
-#{ns.class("tile")}--accent {
-  color: var(#{ns.css-var("surf-tile-tone-accent-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tile-tone-accent-bg")}, var(#{ns.css-var("focus")}, #000));
-}
-
-#{ns.class("tile")}#{ns.data("tile-glyph", "accent")} {
-  color: var(#{ns.css-var("surf-tile-slot-glyph-accent")}, var(#{ns.css-var("focus")}, #000));
-}
-
-#{ns.class("rule")} {
-  border-inline-start: var(#{ns.css-var("surf-rule-root-width")}, 4px)
-  solid var(#{ns.css-var("surf-rule-root-color")}, currentColor);
-  padding-inline-start: var(#{ns.css-var("surf-rule-root-gap")}, 0.75rem);
-}
-
-#{ns.class("action-row")} {
-  display: flex;
-  align-items: center;
-  gap: var(#{ns.css-var("surf-action-row-root-gap")}, var(#{ns.css-var("gap-sm")}, 12px));
-  min-width: 0;
-  padding: var(#{ns.css-var("surf-action-row-root-padding")}, var(#{ns.css-var("gap-sm")}, 12px));
-  color: var(#{ns.css-var("surf-action-row-root-color")}, inherit);
-  background: var(#{ns.css-var("surf-action-row-root-bg")}, transparent);
-  transition: background-color var(#{ns.css-var("transition-fast")}, 180ms) ease,
-  color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.element-class("action-row", "body")} {
-  display: grid;
-  flex: 1;
-  gap: var(#{ns.css-var("surf-action-row-body-gap")}, var(#{ns.css-var("gap-xs2")}, 4px));
-  min-width: 0;
-}
-
-#{ns.element-class("action-row", "value")} {
-  overflow-wrap: break-word;
-  color: var(#{ns.css-var("surf-action-row-value-color")}, inherit);
-  font-size: min(
-    var(#{ns.css-var("surf-action-row-value-font-size")}, 1.25rem),
-    max(0.85rem, 4.2vw)
-  );
-  font-weight: var(#{ns.css-var("surf-action-row-value-font-weight")}, 700);
-  transition: color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.element-class("action-row", "arrow")} {
-  flex: 0 0 auto;
-  color: var(#{ns.css-var("surf-action-row-arrow-color")}, var(#{ns.css-var("text-muted")}, #666));
-  transition: color var(#{ns.css-var("transition-fast")}, 180ms) ease;
-}
-
-#{ns.element-class("action-row", "arrow")} #{ns.class("icon-glyph")} {
-  font-size: var(#{ns.css-var("surf-action-row-arrow-glyph")}, 1.25rem);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  #{ns.class("action-row")}#{ns.data("interactive", "true")}:hover {
-    #{ns.css-var("text-muted")}: var(
-      #{ns.css-var("surf-action-row-state-hover-text-muted")},
-      color-mix(in srgb, currentColor 72%, transparent)
-    );
-    color: var(#{ns.css-var("surf-action-row-state-hover-color")}, inherit);
-    background: var(#{ns.css-var("surf-action-row-state-hover-bg")}, transparent);
-  }
-
-  #{ns.class("action-row")}#{ns.data("interactive", "true")}:hover
-  #{ns.element-class("action-row", "value")},
-  #{ns.class("action-row")}#{ns.data("interactive", "true")}:hover
-  #{ns.element-class("action-row", "arrow")} {
-    color: var(#{ns.css-var("surf-action-row-state-hover-color")}, inherit);
-  }
-}
-
-#{ns.class("tile")}--surface {
-  color: var(#{ns.css-var("surf-tile-tone-surface-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-tile-tone-surface-bg")}, var(#{ns.css-var("surface")}, #fff));
-}
-
-#{ns.class("tag")} {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  gap: var(#{ns.css-var("surf-tag-root-gap")}, var(#{ns.css-var("gap-xs2")}, 4px));
-  padding: var(#{ns.css-var("surf-tag-root-padding")}, 0.5rem 0.75rem);
-  border-radius: var(#{ns.css-var("surf-tag-root-radius")}, var(#{ns.css-var("radius")}, 0));
-  color: var(#{ns.css-var("surf-tag-root-color")}, var(#{ns.css-var("text")}, #000));
-  background: var(#{ns.css-var("surf-tag-root-bg")}, var(#{ns.css-var("surface-muted")}, #eee));
-  font-size: var(#{ns.css-var("surf-tag-root-font-size")}, 0.75rem);
-  font-weight: var(#{ns.css-var("surf-tag-root-font-weight")}, 700);
-  letter-spacing: var(#{ns.css-var("surf-tag-root-letter-spacing")}, normal);
-  line-height: 1;
-  text-transform: var(#{ns.css-var("surf-tag-root-text-transform")}, none);
-  white-space: nowrap;
-}
-
-#{ns.class("tag")}--inverse {
-  color: var(#{ns.css-var("surf-tag-tone-inverse-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tag-tone-inverse-bg")}, var(#{ns.css-var("text")}, #000));
-}
-
-#{ns.class("tag")}--accent {
-  color: var(#{ns.css-var("surf-tag-tone-accent-color")}, var(#{ns.css-var("page")}, #fff));
-  background: var(#{ns.css-var("surf-tag-tone-accent-bg")}, var(#{ns.css-var("focus")}, #000));
-}

package/dist/surface/styles/track.scss

@@ -1,91 +0,0 @@
-@use "@trebired/bundler/namespace" as ns;
-
-#{ns.class("pinned-split")} {
-  display: grid;
-  gap: var(#{ns.css-var("surf-pinned-root-gap")}, var(#{ns.css-var("gap-lg")}, 40px));
-  align-items: start;
-}
-
-#{ns.element-class("pinned-split", "aside")} {
-  min-width: 0;
-}
-
-#{ns.element-class("pinned-split", "body")} {
-  min-width: 0;
-}
-
-@media (min-width: 900px) {
-  #{ns.class("pinned-split")} {
-    grid-template-columns: var(#{ns.css-var("surf-pinned-aside-width")}, minmax(0, 20rem)) minmax(0, 1fr);
-  }
-
-  #{ns.element-class("pinned-split", "aside")} {
-    position: sticky;
-    top: var(#{ns.css-var("surf-pinned-aside-top")}, 7rem);
-  }
-
-  #{ns.data("pinned-aside", "end")} {
-    grid-template-columns: minmax(0, 1fr) var(#{ns.css-var("surf-pinned-aside-width")}, minmax(0, 20rem));
-  }
-
-  #{ns.data("pinned-aside", "end")} #{ns.element-class("pinned-split", "aside")} {
-    order: 2;
-  }
-}
-
-#{ns.class("track")} {
-  display: grid;
-  gap: var(#{ns.css-var("surf-track-root-gap")}, var(#{ns.css-var("gap-lg")}, 40px));
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-#{ns.element-class("track", "item")} {
-  position: relative;
-  display: grid;
-  grid-template-columns: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem) minmax(0, 1fr);
-  gap: var(#{ns.css-var("surf-track-item-gap")}, var(#{ns.css-var("gap-md")}, 24px));
-  align-items: start;
-}
-
-#{ns.element-class("track", "item")}::before {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: calc(var(#{ns.css-var("surf-track-mark-size")}, 2.5rem) / 2);
-  width: var(#{ns.css-var("border-width")}, 1px);
-  background: var(#{ns.css-var("border")}, currentColor);
-  content: "";
-  translate: -50% 0;
-}
-
-#{ns.element-class("track", "item")}:last-child::before {
-  inset-block-end: auto;
-  height: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem);
-}
-
-#{ns.element-class("track", "mark")} {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  width: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem);
-  height: var(#{ns.css-var("surf-track-mark-size")}, 2.5rem);
-  place-items: center;
-  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, currentColor);
-  border-radius: 50%;
-  color: var(#{ns.css-var("text")}, currentColor);
-  background: var(#{ns.css-var("page")}, canvas);
-  font-size: var(#{ns.css-var("surf-track-mark-font-size")}, 0.8rem);
-}
-
-#{ns.element-class("track", "body")} {
-  display: grid;
-  gap: var(#{ns.css-var("surf-track-body-gap")}, var(#{ns.css-var("gap-xs")}, 8px));
-  min-width: 0;
-  padding-block-end: var(#{ns.css-var("surf-track-body-pb")}, var(#{ns.css-var("gap-sm")}, 12px));
-}
-
-#{ns.element-class("track", "body")} > * {
-  min-width: 0;
-  overflow-wrap: break-word;
-}