@aquera/nile-elements 2.0.4 → 2.0.6

package/src/nile-app-shell/nile-app-shell.css.ts

@@ -0,0 +1,574 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * AppShell CSS.
+ *
+ * One grid, two columns, one flex row. The grid owns the banner row, the
+ * optional shell-wide top bar, the side-nav track and the content column. The
+ * content column is a flex row holding the content container, the optional
+ * aside and — when docked — the AI panel. Nothing else in an app sets these
+ * boxes.
+ */
+export const styles = css`
+  :host {
+    /* Geometry. Values come from design tokens wherever one exists; the bare
+       pixels are shell geometry with no matching token. */
+    --nile-app-shell-side-nav-width: 260px;
+    --nile-app-shell-side-nav-rail-width: 64px;
+    --nile-app-shell-gutter: var(--nile-spacing-md, var(--ng-spacing-md));
+    --nile-app-shell-content-padding: var(
+      --nile-spacing-3xl,
+      var(--ng-spacing-3xl)
+    );
+    --nile-app-shell-top-bar-height: 56px;
+    --nile-app-shell-tabs-height: 48px;
+    --nile-app-shell-panel-width: 480px;
+    --nile-app-shell-panel-min-width: 360px;
+    --nile-app-shell-aside-width: 320px;
+    --nile-app-shell-aside-min-width: 240px;
+    --nile-app-shell-content-min-width: 640px;
+    --nile-app-shell-min-width: 768px;
+    --nile-app-shell-centered-width: 824px;
+    --nile-app-shell-utility-size: var(
+      --nile-spacing-4xl,
+      var(--ng-spacing-4xl)
+    );
+    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));
+    --nile-app-shell-duration: var(
+      --nile-transition-duration-default,
+      var(--ng-transition-duration-default)
+    );
+    /* NxtGen ships no easing tokens, so the shell names its own. */
+    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);
+
+    --_side-nav-track: var(--nile-app-shell-side-nav-width);
+
+    position: relative;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-areas:
+      'banner banner'
+      'top-bar top-bar'
+      'side-nav content';
+    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(0, 1fr);
+    /* Below this the window scrolls rather than the shell compressing. */
+    min-width: var(--nile-app-shell-min-width);
+    height: 100%;
+    overflow: hidden;
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    transition: grid-template-columns var(--nile-app-shell-duration)
+      var(--nile-app-shell-ease);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([full-height]) {
+    height: 100dvh;
+  }
+
+  /* Effective rail state, set by the component: the user's preference, or a
+     forced rail at narrow widths. */
+  :host([rail]) {
+    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);
+  }
+
+  :host(:not([has-side-nav])) {
+    --_side-nav-track: 0px;
+  }
+
+  /* The top bar compresses before the content does. */
+  @media (max-height: 600px) {
+    :host {
+      --nile-app-shell-top-bar-height: 48px;
+    }
+  }
+
+  /* ---------------------------------------------------------------- banner */
+
+  .banner {
+    grid-area: banner;
+    min-width: 0;
+  }
+
+  :host(:not([has-banner])) .banner {
+    display: none;
+  }
+
+  /* ------------------------------------------------------------- side nav */
+
+  .side-nav {
+    grid-area: side-nav;
+    display: flex;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  :host(:not([has-side-nav])) .side-nav {
+    display: none;
+  }
+
+  /*
+   * The nav and the page share one surface, and the shell owns the track
+   * width, so a slotted sidebar fills the track and drops its own background
+   * and edge. Set --nile-app-shell-side-nav-bg to put a surface back.
+   */
+  ::slotted([slot='side-nav']) {
+    width: 100% !important;
+    height: 100%;
+    background: var(--nile-app-shell-side-nav-bg, transparent) !important;
+    border-right: var(--nile-app-shell-side-nav-border, 0) !important;
+  }
+
+  /* -------------------------------------------------------- content column */
+
+  .content-section {
+    grid-area: content;
+    position: relative;
+    display: flex;
+    min-width: 0;
+    gap: var(--nile-app-shell-gutter);
+    padding: var(--nile-app-shell-gutter);
+    box-sizing: border-box;
+  }
+
+  .container {
+    box-sizing: border-box;
+    /*
+     * The floor is the flex basis, not a min-width: a hard min-width cannot
+     * yield, so the row overflows and :host's overflow:hidden clips the
+     * regions after it. As a basis the container holds the floor while there
+     * is room and gives way when there is not. The shell keeps a docked panel
+     * off the row until it fits (see _dockRequirement), so the give-way path
+     * is the last resort, not the usual one.
+     */
+    flex: 1 1 var(--nile-app-shell-content-min-width);
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-app-shell-radius);
+    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));
+    /*
+     * The container — not the viewport — is the sizing context for page
+     * content. See the content-container note below for querying it.
+     */
+    container-type: inline-size;
+    container-name: nile-content;
+  }
+
+  /*
+   * Container queries cannot cross a shadow boundary: a rule in the page's
+   * stylesheet cannot see a container declared in here. The
+   * content-container attribute moves the context onto the slotted page root instead, so page CSS can
+   * write an @container nile-content query. It brings layout containment with
+   * it, so it is opt-in.
+   */
+  :host([content-container]) slot:not([name])::slotted(*) {
+    container-type: inline-size;
+    container-name: nile-content;
+  }
+
+  :host([flat]) .container {
+    background: transparent;
+    border-color: transparent;
+    border-radius: 0;
+  }
+
+  /* ---------------------------------------------------------------- top bar */
+
+  .top-bar {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    height: var(--nile-app-shell-top-bar-height);
+    padding-inline: var(--nile-app-shell-content-padding);
+  }
+
+  /* Inside the container the bar carries the rule that separates it from the
+     page body; spanning the shell it carries the container's edge instead. */
+  .container > .top-bar {
+    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  .shell-top-bar {
+    grid-area: top-bar;
+    min-width: 0;
+    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
+    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  /* No slotted bar content and no nav toggle means no bar at all. */
+  :host(:not([has-top-bar])) .top-bar {
+    display: none;
+  }
+
+  .top-bar-content {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .top-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-inline-start: auto;
+  }
+
+  /*
+   * An empty flex item still takes the row's gap before it, which pulls the
+   * bar's content 16px short of the padding edge and leaves a sliver of bare
+   * container at the end of the header. Nothing in the group, no box.
+   */
+  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {
+    display: none;
+  }
+
+  /*
+   * The Ask button. The one control in the bar the shell renders itself: it
+   * turns on the panel being mounted and it calls openPanel(), neither of
+   * which slotted markup can reach.
+   *
+   * It is a stock <nile-button variant="primary">: the shell sets no surface,
+   * radius, height or type of its own, so the button's appearance — and its
+   * focus ring, hover, disabled and loading states — stays the component's.
+   * The only rule here is the flex behaviour it needs as a top-bar item.
+   */
+  .ask {
+    flex: 0 0 auto;
+  }
+
+  .ask-mark {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .ask-mark nile-glyph {
+    --nile-svg-fill: currentColor;
+    --nile-svg-stroke-width: var(--ng-svg-stroke-width);
+    width: 16px;
+    height: 16px;
+  }
+
+  .nav-toggle-group {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  /*
+   * Lands the 24px glyph box, not nile-button's 38px circle, on the
+   * container's 24px origin: (38 - 24) / 2 = 7.
+   */
+  .nav-toggle {
+    margin-inline-start: -7px;
+  }
+
+  .rule {
+    flex: 0 0 auto;
+    width: var(--nile-border-width-1, var(--ng-border-width-1));
+    height: 24px;
+    background: var(
+      --nile-colors-neutral-400,
+      var(--ng-colors-border-secondary)
+    );
+  }
+
+  /* --------------------------------------------------------------- tab strip */
+
+  /*
+   * Hoisted out of the scroller so it never scrolls away. It sits flush under
+   * the top bar — the header carries no bottom rule of its own, so the two read
+   * as one block of chrome, with the single rule living at the strip's bottom.
+   */
+  .tabs {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: stretch;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    min-width: 0;
+    min-height: var(--nile-app-shell-tabs-height);
+    padding-inline: var(--nile-app-shell-content-padding);
+    /* The strip carries the rule for the whole header block. */
+    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  :host(:not([has-tabs])) .tabs {
+    display: none;
+  }
+
+  /* ------------------------------------------------------------------- main */
+
+  .main {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--nile-app-shell-content-padding);
+  }
+
+  .main:focus {
+    outline: none;
+  }
+
+  :host([no-padding]) .main {
+    padding: 0;
+  }
+
+  .main-inner {
+    width: 100%;
+    min-height: 0;
+  }
+
+  /* Centred when short, scrolls from the top when tall. */
+  :host([content-align='centered']) .main-inner {
+    /*
+     * width:100% + max-width leaves free space for the auto inline margins to
+     * split; dropping the width would let the auto margins cancel the flex
+     * stretch and shrink-wrap the column to its widest child. The block margins
+     * centre it while it is short and compute to 0 once it is taller, so a tall
+     * page scrolls from the top rather than clipping.
+     */
+    width: 100%;
+    max-width: var(--nile-app-shell-centered-width);
+    margin: auto;
+  }
+
+  /* ------------------------------------------------------------------ aside */
+
+  .aside {
+    box-sizing: border-box;
+    /* Gives before the page does, down to its own floor, for the same reason
+       the panel does: the page is the last region to be asked for room. */
+    flex: 0 1 var(--nile-app-shell-aside-width);
+    min-width: var(--nile-app-shell-aside-min-width);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--nile-app-shell-content-padding);
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-app-shell-radius);
+  }
+
+  :host(:not([has-aside])) .aside {
+    display: none;
+  }
+
+  /* -------------------------------------------------------------- AI panel */
+
+  .panel {
+    box-sizing: border-box;
+    /*
+     * The panel pushes the page, it never covers it, so it has to be able to
+     * give a little: full width while the row can afford it, then shrinking to
+     * its min. Here the floor can be a real min-width — the container's floor
+     * is a flex basis that yields all the way, so the row still cannot
+     * overflow into :host's clip once the panel stops giving.
+     */
+    flex: 0 1 var(--nile-app-shell-panel-width);
+    width: var(--nile-app-shell-panel-width);
+    min-width: var(--nile-app-shell-panel-min-width);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));
+    /* The panel is elevated, so its edge sits a rung above the container's. */
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    border-radius: var(--nile-app-shell-radius);
+    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
+  }
+
+  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */
+  :host(:not([panel-open])) .panel {
+    display: none;
+  }
+
+  /* Overlay: contained to the content column, above it, and animated in. */
+  :host([panel-mode='overlay']) .panel {
+    position: absolute;
+    z-index: 1001;
+    inset-block: var(--nile-app-shell-gutter);
+    inset-inline-end: var(--nile-app-shell-gutter);
+    flex: none;
+    display: flex;
+    width: min(var(--nile-app-shell-panel-width), 92%);
+    visibility: hidden;
+    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));
+    transition: transform var(--nile-app-shell-duration)
+        var(--nile-app-shell-ease),
+      visibility 0s linear var(--nile-app-shell-duration);
+  }
+
+  :host([panel-mode='overlay'][panel-open]) .panel {
+    visibility: visible;
+    transform: none;
+    transition: transform var(--nile-app-shell-duration)
+      var(--nile-app-shell-ease);
+  }
+
+  /* An unavailable panel is unmounted in either mode. */
+  :host(:not([has-panel])) .panel {
+    display: none;
+  }
+
+  .panel-header {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: var(--nile-app-shell-top-bar-height);
+    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  .panel-heading {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    min-width: 0;
+  }
+
+  .panel-mark {
+    display: inline-flex;
+    color: var(
+      --nile-colors-primary-600,
+      var(--ng-colors-fg-brand-primary-600)
+    );
+  }
+
+  .panel-mark nile-glyph {
+    --nile-svg-fill: currentColor;
+    --nile-svg-stroke-width: var(--ng-svg-stroke-width);
+    width: 20px;
+    height: 20px;
+  }
+
+  .panel-title {
+    margin: 0;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(
+      --nile-font-weight-semi-bold,
+      var(--ng-font-weight-semibold)
+    );
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .panel-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    margin-inline-start: auto;
+  }
+
+  .panel-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  .panel-footer {
+    flex: 0 0 auto;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  :host(:not([has-panel-footer])) .panel-footer {
+    display: none;
+  }
+
+  /* ---------------------------------------------------------- skip link */
+
+  .skip-link {
+    position: absolute;
+    z-index: 1002;
+    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
+    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));
+    display: inline-flex;
+    align-items: center;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md))
+      var(--nile-spacing-lg, var(--ng-spacing-lg));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font: inherit;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
+    cursor: pointer;
+    transform: translateY(-200%);
+    transition: transform
+      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))
+      var(--nile-app-shell-ease);
+  }
+
+  .skip-link:focus-visible {
+    outline: none;
+    transform: none;
+    box-shadow: 0 0 0 2px
+        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),
+      0 0 0 4px
+        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+  }
+
+  :host([no-skip-link]) .skip-link {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host,
+    .panel,
+    .skip-link {
+      transition: none;
+    }
+  }
+`;
+
+export default [styles];