@scalewing/react 1.46.0 → 1.47.0

package/dist/styles.css

@@ -3582,7 +3582,8 @@ body {
 }
 
 [data-theme] .sw-section-nav-count,
-[data-theme] .sw-nav-count {
+[data-theme] .sw-nav-count,
+[data-theme] .sw-app-shell-count {
   align-items: center;
   background: var(--sw-color-danger);
   border-radius: var(--sw-radius-pill);
@@ -3601,16 +3602,28 @@ body {
 }
 
 /*
- * NavCount's `tone="accent"`: a count that is news, not work waiting (what
- * was added since the person last looked), is the accent fill with its
- * on-colour figures (4.5:1 in every palette, as a primary Button's label).
- * One class more specific than the pill, so it wins in any order.
+ * `tone="accent"` (NavCount, an AppShell item's `countTone`): a count that
+ * is news, not work waiting (what was added since the person last looked),
+ * is the accent fill with its on-colour figures (4.5:1 in every palette, as
+ * a primary Button's label). `tone="warning"`: work that needs the person
+ * but is not urgent is amber, the warning tint with the warning ink (a
+ * warning Notice's, 4.5:1 on the tint in every palette) inside the warning
+ * edge a warning Badge draws. One class more specific than the pill, so
+ * each wins in any order.
  */
-[data-theme] .sw-nav-count.sw-nav-count-accent {
+[data-theme] .sw-nav-count.sw-nav-count-accent,
+[data-theme] .sw-app-shell-count.sw-app-shell-count-accent {
   background: var(--sw-color-accent);
   color: var(--sw-color-onAccent);
 }
 
+[data-theme] .sw-nav-count.sw-nav-count-warning,
+[data-theme] .sw-app-shell-count.sw-app-shell-count-warning {
+  background: color-mix(in srgb, var(--sw-color-warning) 10%, var(--sw-color-surface));
+  border: 1px solid var(--sw-color-warning);
+  color: color-mix(in srgb, var(--sw-color-warning) 70%, var(--sw-color-text));
+}
+
 /*
  * A Nav link holding a count lays out as SectionNav's link does: the words
  * and the pill centred on one line a space-2 apart (the space text node
@@ -3628,7 +3641,8 @@ body {
 
 @media (forced-colors: active) {
   [data-theme] .sw-section-nav-count,
-  [data-theme] .sw-nav-count { border: 1px solid CanvasText; }
+  [data-theme] .sw-nav-count,
+  [data-theme] .sw-app-shell-count { border: 1px solid CanvasText; }
 }
 
 .sw-bar-chart {
@@ -4292,6 +4306,313 @@ body {
   [data-theme] .sw-section-nav-link[aria-current] { border-color: Highlight; color: CanvasText; }
 }
 
+.sw-app-shell {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+.sw-app-shell-bar {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-2);
+}
+
+.sw-app-shell-bar-title {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sw-app-shell-bar-end {
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--sw-space-2);
+}
+
+.sw-button.sw-app-shell-menu {
+  flex: none;
+  padding-inline: 0;
+}
+
+.sw-button-xs.sw-app-shell-menu { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-app-shell-menu { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-app-shell-menu { min-width: var(--sw-control-md-min-height); }
+
+@media (pointer: coarse) {
+  .sw-button.sw-app-shell-menu {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
+.sw-app-shell-main {
+  display: block;
+  min-width: 0;
+}
+
+.sw-app-shell-sidebar,
+.sw-app-shell-sidebar .sw-app-shell-rail-slot {
+  display: none;
+}
+
+.sw-app-shell-header,
+.sw-app-shell-footer {
+  flex: none;
+  padding: var(--sw-space-3);
+}
+
+.sw-app-shell-footer {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-app-shell-nav {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sw-space-4);
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--sw-space-2) var(--sw-space-3);
+}
+
+.sw-app-shell-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+}
+
+.sw-app-shell-group-label {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  margin: 0;
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-app-shell-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-app-shell-item > .sw-tooltip-anchor {
+  display: flex;
+}
+
+[data-theme] .sw-app-shell-link {
+  align-items: center;
+  border: 2px solid transparent;
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  display: flex;
+  flex: 1 1 auto;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 500;
+  gap: var(--sw-space-3);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-height: var(--sw-control-sm-min-height);
+  padding: var(--sw-space-1) var(--sw-space-2);
+  text-decoration: none;
+}
+
+[data-theme] .sw-app-shell-link:hover {
+  background: color-mix(in srgb, var(--sw-color-muted) 12%, transparent);
+}
+
+[data-theme] .sw-app-shell-link:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+[data-theme] .sw-app-shell-link[aria-current] {
+  background: color-mix(in srgb, var(--sw-color-muted) 18%, transparent);
+  font-weight: 600;
+}
+
+.sw-app-shell-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-app-shell-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-app-shell-count {
+  flex: none;
+}
+
+@media (pointer: coarse) {
+  [data-theme] .sw-app-shell-link { min-height: var(--sw-control-md-min-height); }
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-app-shell-link { color: LinkText; }
+  [data-theme] .sw-app-shell-link[aria-current] { border-color: Highlight; color: CanvasText; }
+}
+
+@media (min-width: 64rem) {
+  .sw-app-shell {
+    align-items: start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .sw-app-shell-bar {
+    display: none;
+  }
+
+  .sw-app-shell-sidebar {
+    background: var(--sw-color-surface);
+    border-inline-end: 1px solid var(--sw-color-border);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
+    position: sticky;
+    top: 0;
+    width: calc(var(--sw-control-md-min-height) + 2 * var(--sw-space-3) + 1px);
+  }
+
+  @media not all and (min-width: 75rem) {
+    .sw-app-shell-sidebar .sw-app-shell-slot {
+      display: none;
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-rail-slot {
+      display: block;
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-label,
+    .sw-app-shell-sidebar .sw-app-shell-group-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+
+    .sw-app-shell-sidebar .sw-app-shell-nav {
+      gap: var(--sw-space-2);
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-group + .sw-app-shell-group {
+      border-top: 1px solid var(--sw-color-border);
+      padding-top: var(--sw-space-2);
+    }
+
+    [data-theme] .sw-app-shell-sidebar .sw-app-shell-link {
+      justify-content: center;
+      min-height: var(--sw-control-md-min-height);
+      padding: 0;
+      position: relative;
+    }
+
+    .sw-app-shell-sidebar .sw-app-shell-count {
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      position: absolute;
+    }
+  }
+}
+
+@media (min-width: 75rem) {
+  .sw-app-shell-sidebar {
+    width: 15rem;
+  }
+}
+
+.sw-app-shell-drawer {
+  background: var(--sw-color-surface);
+  border: 0;
+  border-inline-end: 1px solid var(--sw-color-border);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  height: 100%;
+  inset-block: 0;
+  inset-inline: 0 auto;
+  margin: 0;
+  max-height: none;
+  max-width: calc(100% - var(--sw-space-8));
+  overflow: hidden;
+  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
+  padding-inline-start: env(safe-area-inset-left, 0px);
+  width: 20rem;
+}
+
+.sw-app-shell-drawer:dir(rtl) {
+  padding-inline-start: env(safe-area-inset-right, 0px);
+}
+
+.sw-app-shell-drawer[open] {
+  animation: sw-app-shell-drawer-in var(--sw-motion-default) var(--sw-motion-easing);
+  display: flex;
+  flex-direction: column;
+}
+
+.sw-app-shell-drawer[open]:dir(rtl) {
+  animation-name: sw-app-shell-drawer-in-rtl;
+}
+
+@keyframes sw-app-shell-drawer-in {
+  from { translate: -100% 0; }
+}
+
+@keyframes sw-app-shell-drawer-in-rtl {
+  from { translate: 100% 0; }
+}
+
+.sw-app-shell-drawer::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-app-shell-drawer-top {
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--sw-space-2);
+  padding: var(--sw-space-3) var(--sw-space-3) 0;
+}
+
+.sw-app-shell-drawer-top .sw-app-shell-header {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+}
+
+.sw-button.sw-app-shell-close {
+  flex: none;
+  padding-inline: 0;
+}
+
+.sw-button-xs.sw-app-shell-close { min-width: var(--sw-control-xs-min-height); }
+.sw-button-sm.sw-app-shell-close { min-width: var(--sw-control-sm-min-height); }
+.sw-button-md.sw-app-shell-close { min-width: var(--sw-control-md-min-height); }
+
+@media (pointer: coarse) {
+  .sw-button.sw-app-shell-close {
+    min-height: var(--sw-control-md-min-height);
+    min-width: var(--sw-control-md-min-height);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-app-shell-drawer[open],
+  .sw-app-shell-drawer[open]:dir(rtl) { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-app-shell-drawer { border-inline-end-color: CanvasText; }
+}
+
 .sw-dialog {
   background: var(--sw-glass-fill);
   border: 1px solid var(--sw-glass-border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",