@aquera/nile-elements 2.0.10 → 2.0.12

package/dist/src/nile-app-shell/nile-app-shell.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-app-shell.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyiBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * AppShell CSS.\n *\n * One grid, two columns, one flex row. The grid owns the banner row, the\n * optional shell-wide top bar, the side-nav track and the content column. The\n * content column is a flex row holding the content container, the optional\n * aside and — when docked — the AI panel. Nothing else in an app sets these\n * boxes.\n */\nexport const styles = css`\n  :host {\n    /* Geometry. Values come from design tokens wherever one exists; the bare\n       pixels are shell geometry with no matching token. */\n    --nile-app-shell-side-nav-width: 260px;\n    --nile-app-shell-side-nav-rail-width: 64px;\n    --nile-app-shell-gutter: var(--nile-spacing-md, var(--ng-spacing-md));\n    --nile-app-shell-content-padding: var(\n      --nile-spacing-3xl,\n      var(--ng-spacing-3xl)\n    );\n    --nile-app-shell-top-bar-height: 56px;\n    --nile-app-shell-tabs-height: 48px;\n    --nile-app-shell-panel-width: 480px;\n    --nile-app-shell-panel-min-width: 360px;\n    --nile-app-shell-aside-width: 320px;\n    --nile-app-shell-aside-min-width: 240px;\n    --nile-app-shell-content-min-width: 640px;\n    --nile-app-shell-min-width: 768px;\n    --nile-app-shell-centered-width: 824px;\n    --nile-app-shell-utility-size: var(\n      --nile-spacing-4xl,\n      var(--ng-spacing-4xl)\n    );\n    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));\n    --nile-app-shell-duration: var(\n      --nile-transition-duration-default,\n      var(--ng-transition-duration-default)\n    );\n    /* NxtGen ships no easing tokens, so the shell names its own. */\n    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);\n\n    --_side-nav-track: var(--nile-app-shell-side-nav-width);\n\n    position: relative;\n    box-sizing: border-box;\n    display: grid;\n    grid-template-areas:\n      'banner banner'\n      'top-bar top-bar'\n      'side-nav content';\n    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);\n    grid-template-rows: auto auto minmax(0, 1fr);\n    /* Below this the window scrolls rather than the shell compressing. */\n    min-width: var(--nile-app-shell-min-width);\n    height: 100%;\n    overflow: hidden;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    transition: grid-template-columns var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([full-height]) {\n    height: 100dvh;\n  }\n\n  /* Effective rail state, set by the component: the user's preference, or a\n     forced rail at narrow widths. */\n  :host([rail]) {\n    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);\n  }\n\n  :host(:not([has-side-nav])) {\n    --_side-nav-track: 0px;\n  }\n\n  /* The top bar compresses before the content does. */\n  @media (max-height: 600px) {\n    :host {\n      --nile-app-shell-top-bar-height: 48px;\n    }\n  }\n\n  /* ---------------------------------------------------------------- banner */\n\n  .banner {\n    grid-area: banner;\n    min-width: 0;\n  }\n\n  :host(:not([has-banner])) .banner {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------- side nav */\n\n  .side-nav {\n    grid-area: side-nav;\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host(:not([has-side-nav])) .side-nav {\n    display: none;\n  }\n\n  /*\n   * The nav and the page share one surface, and the shell owns the track\n   * width, so a slotted sidebar fills the track and drops its own background\n   * and edge. Set --nile-app-shell-side-nav-bg to put a surface back.\n   */\n  ::slotted([slot='side-nav']) {\n    width: 100% !important;\n    height: 100%;\n    background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n    border-right: var(--nile-app-shell-side-nav-border, 0) !important;\n  }\n\n  /* -------------------------------------------------------- content column */\n\n  .content-section {\n    grid-area: content;\n    position: relative;\n    display: flex;\n    min-width: 0;\n    gap: var(--nile-app-shell-gutter);\n    padding: var(--nile-app-shell-gutter);\n    box-sizing: border-box;\n  }\n\n  .container {\n    box-sizing: border-box;\n    /*\n     * The floor is the flex basis, not a min-width: a hard min-width cannot\n     * yield, so the row overflows and :host's overflow:hidden clips the\n     * regions after it. As a basis the container holds the floor while there\n     * is room and gives way when there is not. The shell keeps a docked panel\n     * off the row until it fits (see _dockRequirement), so the give-way path\n     * is the last resort, not the usual one.\n     */\n    flex: 1 1 var(--nile-app-shell-content-min-width);\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    /*\n     * The container — not the viewport — is the sizing context for page\n     * content. See the content-container note below for querying it.\n     */\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  /*\n   * Container queries cannot cross a shadow boundary: a rule in the page's\n   * stylesheet cannot see a container declared in here. The\n   * content-container attribute moves the context onto the slotted page root instead, so page CSS can\n   * write an @container nile-content query. It brings layout containment with\n   * it, so it is opt-in.\n   */\n  :host([content-container]) slot:not([name])::slotted(*) {\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  :host([flat]) .container {\n    background: transparent;\n    border-color: transparent;\n    border-radius: 0;\n  }\n\n  /* ---------------------------------------------------------------- top bar */\n\n  .top-bar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n  }\n\n  /* Inside the container the bar carries the rule that separates it from the\n     page body; spanning the shell it carries the container's edge instead. */\n  .container > .top-bar {\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .shell-top-bar {\n    grid-area: top-bar;\n    min-width: 0;\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  /* No slotted bar content and no nav toggle means no bar at all. */\n  :host(:not([has-top-bar])) .top-bar {\n    display: none;\n  }\n\n  .top-bar-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: 0;\n    flex: 1 1 auto;\n  }\n\n  .top-bar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    margin-inline-start: auto;\n  }\n\n  /*\n   * An empty flex item still takes the row's gap before it, which pulls the\n   * bar's content 16px short of the padding edge and leaves a sliver of bare\n   * container at the end of the header. Nothing in the group, no box.\n   */\n  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {\n    display: none;\n  }\n\n  /*\n   * The Ask button. The one control in the bar the shell renders itself: it\n   * turns on the panel being mounted and it calls openPanel(), neither of\n   * which slotted markup can reach.\n   *\n   * It is a stock <nile-button variant=\"primary\">: the shell sets no surface,\n   * radius, height or type of its own, so the button's appearance — and its\n   * focus ring, hover, disabled and loading states — stays the component's.\n   * The only rule here is the flex behaviour it needs as a top-bar item.\n   */\n  .ask {\n    flex: 0 0 auto;\n  }\n\n  .ask-mark {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .ask-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 16px;\n    height: 16px;\n  }\n\n  .nav-toggle-group {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  /*\n   * Lands the 24px glyph box, not nile-button's 38px circle, on the\n   * container's 24px origin: (38 - 24) / 2 = 7.\n   */\n  .nav-toggle {\n    margin-inline-start: -7px;\n  }\n\n  .rule {\n    flex: 0 0 auto;\n    width: var(--nile-border-width-1, var(--ng-border-width-1));\n    height: 24px;\n    background: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-border-secondary)\n    );\n  }\n\n  /* --------------------------------------------------------------- tab strip */\n\n  /*\n   * Hoisted out of the scroller so it never scrolls away. It sits flush under\n   * the top bar — the header carries no bottom rule of its own, so the two read\n   * as one block of chrome, with the single rule living at the strip's bottom.\n   */\n  .tabs {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: stretch;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    min-width: 0;\n    min-height: var(--nile-app-shell-tabs-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n    /* The strip carries the rule for the whole header block. */\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  :host(:not([has-tabs])) .tabs {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------------- main */\n\n  .main {\n    box-sizing: border-box;\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n  }\n\n  .main:focus {\n    outline: none;\n  }\n\n  :host([no-padding]) .main {\n    padding: 0;\n  }\n\n  .main-inner {\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* Centred when short, scrolls from the top when tall. */\n  :host([content-align='centered']) .main-inner {\n    /*\n     * width:100% + max-width leaves free space for the auto inline margins to\n     * split; dropping the width would let the auto margins cancel the flex\n     * stretch and shrink-wrap the column to its widest child. The block margins\n     * centre it while it is short and compute to 0 once it is taller, so a tall\n     * page scrolls from the top rather than clipping.\n     */\n    width: 100%;\n    max-width: var(--nile-app-shell-centered-width);\n    margin: auto;\n  }\n\n  /* ------------------------------------------------------------------ aside */\n\n  .aside {\n    box-sizing: border-box;\n    /* Gives before the page does, down to its own floor, for the same reason\n       the panel does: the page is the last region to be asked for room. */\n    flex: 0 1 var(--nile-app-shell-aside-width);\n    min-width: var(--nile-app-shell-aside-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n  }\n\n  :host(:not([has-aside])) .aside {\n    display: none;\n  }\n\n  /* -------------------------------------------------------------- AI panel */\n\n  .panel {\n    box-sizing: border-box;\n    /*\n     * The panel pushes the page, it never covers it, so it has to be able to\n     * give a little: full width while the row can afford it, then shrinking to\n     * its min. Here the floor can be a real min-width — the container's floor\n     * is a flex basis that yields all the way, so the row still cannot\n     * overflow into :host's clip once the panel stops giving.\n     */\n    flex: 0 1 var(--nile-app-shell-panel-width);\n    width: var(--nile-app-shell-panel-width);\n    min-width: var(--nile-app-shell-panel-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    /* The panel is elevated, so its edge sits a rung above the container's. */\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n  }\n\n  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */\n  :host(:not([panel-open])) .panel {\n    display: none;\n  }\n\n  /* Overlay: contained to the content column, above it, and animated in. */\n  :host([panel-mode='overlay']) .panel {\n    position: absolute;\n    z-index: 1001;\n    inset-block: var(--nile-app-shell-gutter);\n    inset-inline-end: var(--nile-app-shell-gutter);\n    flex: none;\n    display: flex;\n    width: min(var(--nile-app-shell-panel-width), 92%);\n    visibility: hidden;\n    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));\n    transition: transform var(--nile-app-shell-duration)\n        var(--nile-app-shell-ease),\n      visibility 0s linear var(--nile-app-shell-duration);\n  }\n\n  :host([panel-mode='overlay'][panel-open]) .panel {\n    visibility: visible;\n    transform: none;\n    transition: transform var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  /* An unavailable panel is unmounted in either mode. */\n  :host(:not([has-panel])) .panel {\n    display: none;\n  }\n\n  .panel-header {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  .panel-heading {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  .panel-mark {\n    display: inline-flex;\n    color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-fg-brand-primary-600)\n    );\n  }\n\n  .panel-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 20px;\n    height: 20px;\n  }\n\n  .panel-title {\n    margin: 0;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .panel-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin-inline-start: auto;\n  }\n\n  .panel-body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .panel-footer {\n    flex: 0 0 auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  :host(:not([has-panel-footer])) .panel-footer {\n    display: none;\n  }\n\n  /* ---------------------------------------------------------- skip link */\n\n  .skip-link {\n    position: absolute;\n    z-index: 1002;\n    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: inline-flex;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    cursor: pointer;\n    transform: translateY(-200%);\n    transition: transform\n      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))\n      var(--nile-app-shell-ease);\n  }\n\n  .skip-link:focus-visible {\n    outline: none;\n    transform: none;\n    box-shadow: 0 0 0 2px\n        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),\n      0 0 0 4px\n        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  :host([no-skip-link]) .skip-link {\n    display: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host,\n    .panel,\n    .skip-link {\n      transition: none;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-app-shell.css.js","sourceRoot":"","sources":["../../../src/nile-app-shell/nile-app-shell.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AAEpF,iJAAiJ;AACjJ,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0arB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoTvB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\nimport { utilityControlStyles } from '../internal/app-shell-utility-control-styles';\n\n/** AppShell CSS: a grid of banner, top bar, side-nav track and content column, whose flex row holds the container, aside and docked AI panel. */\nexport const styles = css`\n  :host {\n    /* Geometry: design tokens where one exists, bare pixels where none does. */\n    /* The nav track mirrors nile-side-bar's own width expressions (enterprise 240/70, NxtGen 296/68); keep in step with nile-side-bar.css.ts. */\n    --nile-app-shell-side-nav-width: var(\n      --nile-width-240px,\n      var(--ng-spacing-296, 240px)\n    );\n    --nile-app-shell-side-nav-rail-width: var(\n      --nile-width-70px,\n      var(--ng-spacing-68, 70px)\n    );\n    --nile-app-shell-gutter: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    --nile-app-shell-content-padding: var(\n      --nile-spacing-3xl,\n      var(--ng-spacing-3xl)\n    );\n    --nile-app-shell-top-bar-height: 68px;\n    /* The panel header keeps its own height, distinct from the page header. */\n    --nile-app-shell-panel-header-height: 56px;\n    --nile-app-shell-tabs-height: 33px;\n    /* The leading app icon is its own 20px size, not the 32px utility box. */\n    --nile-app-shell-app-icon-size: 20px;\n    --nile-app-shell-panel-width: 480px;\n    --nile-app-shell-panel-min-width: 360px;\n    --nile-app-shell-aside-width: 320px;\n    --nile-app-shell-aside-min-width: 240px;\n    --nile-app-shell-content-min-width: 640px;\n    --nile-app-shell-min-width: 768px;\n    --nile-app-shell-centered-width: 824px;\n    /* Both tokens are 32px; the literal is the floor with no theme sheet loaded. */\n    --nile-app-shell-utility-size: var(\n      --nile-spacing-4xl,\n      var(--ng-spacing-4xl, 32px)\n    );\n    --nile-app-shell-radius: var(--nile-radius-xl, var(--ng-radius-2xl));\n    --nile-app-shell-duration: var(\n      --nile-transition-duration-default,\n      var(--ng-transition-duration-default)\n    );\n    /* NxtGen ships no easing tokens, so the shell names its own. */\n    --nile-app-shell-ease: cubic-bezier(0.2, 0, 0, 1);\n\n    --_side-nav-track: var(--nile-app-shell-side-nav-width);\n\n    position: relative;\n    box-sizing: border-box;\n    display: grid;\n    grid-template-areas:\n      'banner banner'\n      'top-bar top-bar'\n      'side-nav content';\n    grid-template-columns: var(--_side-nav-track) minmax(0, 1fr);\n    grid-template-rows: auto auto minmax(0, 1fr);\n    /* Below this the window scrolls rather than the shell compressing. */\n    min-width: var(--nile-app-shell-min-width);\n    height: 100%;\n    overflow: hidden;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n    transition: grid-template-columns var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([full-height]) {\n    height: 100dvh;\n  }\n\n  /* Effective rail state: the user's preference, or a forced rail when narrow. */\n  :host([rail]) {\n    --_side-nav-track: var(--nile-app-shell-side-nav-rail-width);\n  }\n\n  :host(:not([has-side-nav])) {\n    --_side-nav-track: 0px;\n  }\n\n  /* The Description axis: a present description adds the 8px its second line occupies. */\n  :host([has-description]) {\n    --nile-app-shell-top-bar-height: 76px;\n  }\n\n  /* The top bar compresses before the content does. */\n  @media (max-height: 600px) {\n    :host {\n      --nile-app-shell-top-bar-height: 56px;\n    }\n\n    :host([has-description]) {\n      --nile-app-shell-top-bar-height: 64px;\n    }\n  }\n\n  /* ---------------------------------------------------------------- banner */\n\n  .banner {\n    grid-area: banner;\n    min-width: 0;\n  }\n\n  :host(:not([has-banner])) .banner {\n    display: none;\n  }\n\n  /* ------------------------------------------------------------- side nav */\n\n  .side-nav {\n    grid-area: side-nav;\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  :host(:not([has-side-nav])) .side-nav {\n    display: none;\n  }\n\n  /* A slotted sidebar fills the shell-owned track and drops its own surface and edge; set --nile-app-shell-side-nav-bg to restore one. */\n  /* width is deliberately not !important: the 100% lets a raw <nav> or nile-app-shell-side-nav fill the track, while a slotted\n     nile-side-bar sizes itself from the same tokens the track reads (see the :host geometry block). Tests 21/22 in\n     nile-app-shell-regions.test.ts lock the two together; change both or neither. */\n  ::slotted([slot='side-nav']) {\n    width: 100%;\n    height: 100%;\n    background: var(--nile-app-shell-side-nav-bg, transparent) !important;\n    border-right: var(--nile-app-shell-side-nav-border, 0) !important;\n  }\n\n  /* -------------------------------------------------------- content column */\n\n  .content-section {\n    grid-area: content;\n    position: relative;\n    display: flex;\n    min-width: 0;\n    gap: var(--nile-app-shell-gutter);\n    padding: var(--nile-app-shell-gutter);\n    /* Flush against the nav track; the gutter insets the other three sides. */\n    padding-inline-start: 0;\n    box-sizing: border-box;\n  }\n\n  /* With no nav track there is nothing to sit flush against, so the start edge takes the gutter too. */\n  :host(:not([has-side-nav])) .content-section {\n    padding-inline-start: var(--nile-app-shell-gutter);\n  }\n\n  .container {\n    box-sizing: border-box;\n    /* The floor is the flex basis, not a min-width, so the container yields instead of overflowing the clipped row. */\n    flex: 1 1 var(--nile-app-shell-content-min-width);\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-none));\n    /* The container, not the viewport, is the sizing context for page content. */\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  /* content-container moves the size query context onto the slotted page root so page CSS can query nile-content; opt-in as it brings containment. */\n  :host([content-container]) slot:not([name])::slotted(*) {\n    container-type: inline-size;\n    container-name: nile-content;\n  }\n\n  :host([flat]) .container {\n    background: transparent;\n    border-color: transparent;\n    border-radius: 0;\n  }\n\n  /* ---------------------------------------------------------------- top bar */\n\n  .top-bar {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    height: var(--nile-app-shell-top-bar-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n  }\n\n  /* The header bar draws no bottom rule in any variant; the only divider comes from the tab rail (see .tabs). */\n\n  .shell-top-bar {\n    grid-area: top-bar;\n    min-width: 0;\n    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  /* No slotted bar content and no nav toggle means no bar at all. */\n  :host(:not([has-top-bar])) .top-bar {\n    display: none;\n  }\n\n  .top-bar-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: 0;\n    flex: 1 1 auto;\n  }\n\n  /* The title block: the back arrow, then the stack (app icon, heading and badge, with the description under them); renders before the top-bar slot. */\n  .title-area {\n    display: flex;\n    /* Top-aligned, not centred: the back arrow belongs to the title's row, not the title-plus-description stack. */\n    align-items: flex-start;\n    /* Figma's Title Area gap: 16px from the arrow to the stack. */\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    min-width: 0;\n  }\n\n  /* The back arrow's line box: exactly the page title's line height, centring the arrow on the title row. */\n  .back-line {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n  }\n\n  .title-stack {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    min-width: 0;\n  }\n\n  .title-row {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  .page-title {\n    margin: 0;\n    min-width: 0;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    line-height: var(--nile-line-height-medium, var(--ng-line-height-text-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .description {\n    margin: 0;\n    min-width: 0;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* The badge sits on the title row and never shrinks the title away; each surface token pairs a Nile name with its NxtGen equivalent. */\n  .badge {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    padding-inline: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-block: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(\n        --nile-colors-neutral-400,\n        var(--ng-componentcolors-utility-gray-200)\n      );\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n    background: var(\n      --nile-colors-neutral-100,\n      var(--ng-componentcolors-utility-gray-50)\n    );\n    color: var(\n      --nile-colors-dark-500,\n      var(--ng-componentcolors-utility-gray-700)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    white-space: nowrap;\n  }\n\n  /* headerBack: an icon-only native button, so the aria-label names it directly; the shell owns no history, so pressing it only emits nile-click { value: 'back' }. */\n  .back {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: none;\n    cursor: pointer;\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n  }\n\n  .back:hover {\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  /* App icon: a 20px block at the start of the title row, so the description lines up under it; shown whenever the app-icon slot has content. */\n  .app-icon {\n    position: relative;\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-app-shell-app-icon-size);\n    height: var(--nile-app-shell-app-icon-size);\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    overflow: hidden;\n  }\n\n  /* The slotted mark fills the wrapper edge to edge, clipped to the box. */\n  .app-icon slot::slotted(*) {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n  }\n\n  /* The wrapper takes no fill; the rim is a white-12% gradient drawn as a masked ::before, with literal mask fallbacks for the nxtgen-only tokens. */\n  .app-icon::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n    z-index: 1;\n    background: linear-gradient(\n      180deg,\n      rgb(255 255 255 / 12%) 0%,\n      rgb(255 255 255 / 0%) 100%\n    );\n    mask: var(\n      --ng-mask-rim,\n      linear-gradient(#000 0 0) content-box,\n      linear-gradient(#000 0 0)\n    );\n    mask-composite: var(--ng-mask-composite-exclude, exclude);\n    padding: 1.4px;\n  }\n\n  :host(:not([has-app-icon])) .app-icon {\n    display: none;\n  }\n\n  /* Figma's Header Bar gap: 16px between every header action, the divider and Ask. */\n  .top-bar-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    margin-inline-start: auto;\n  }\n\n  /* Hidden when empty, so an empty group's gap does not pull the bar's content short of the padding edge. */\n  :host(:not([has-top-bar-actions]):not([has-ask])) .top-bar-actions {\n    display: none;\n  }\n\n  /* The Ask button: a stock <nile-button variant=\"secondary\"> the shell renders itself; the only rule here is its flex behaviour as a top-bar item. */\n  .ask {\n    flex: 0 0 auto;\n  }\n\n  .ask-mark {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .ask-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 16px;\n    height: 16px;\n  }\n\n  /* 10px after the 32px circle is 16px after the 20px glyph (6px overhang + 10), Figma's toggle-to-divider gap. */\n  .nav-toggle-group {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md-alt, var(--ng-spacing-md-alt));\n  }\n\n  /* Lands the 20px glyph box, not the 32px utility circle, on the 24px origin: (32 - 20) / 2 = 6. */\n  .nav-toggle {\n    margin-inline-start: -6px;\n  }\n\n  /* Figma's Divider Line: a 16px 1px stroke that takes no layout width, so the items on both sides sit a clean 16px from it. Used after the nav toggle and, as ask-rule, before Ask. */\n  .rule {\n    flex: 0 0 auto;\n    width: var(--nile-border-width-1, var(--ng-border-width-1));\n    margin-inline-end: calc(-1 * var(--nile-border-width-1, var(--ng-border-width-1)));\n    height: 16px;\n    background: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-border-secondary)\n    );\n  }\n\n  /* ------------------------------------------------------- utility controls */\n\n  /* The shell's own icon controls (nav toggle, panel back and close): the shared utility-control recipe. */\n  ${utilityControlStyles}\n\n  /* --------------------------------------------------------------- tab strip */\n\n  /* Hoisted out of the scroller so it never scrolls away; sits flush under the top bar and carries the header block's single bottom rule. */\n  .tabs {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: stretch;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    min-width: 0;\n    /* A floor, not a fixed box: the strip is as tall as the row it holds plus its rule. */\n    min-height: var(--nile-app-shell-tabs-height);\n    padding-inline: var(--nile-app-shell-content-padding);\n    /* The strip carries the rule for the whole header block. */\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  /* The header tab's 0/4/12/4 padding composes the 32px row; the 12px bottom gives the active indicator its band, set via the group's public padding hook. */\n  ::slotted([slot='tabs']) {\n    --nile-nav-tab-padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xs, var(--ng-spacing-xs))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .tabs::-webkit-scrollbar {\n    display: none;\n  }\n\n  :host(:not([has-tabs])) .tabs,\n  :host([notabs]) .tabs {\n    display: none;\n  }\n\n  /* A slotted nile-nav-tab-group drops its own track (--track-width:0 on the host) and is bottom-aligned so its indicator sits on the region's single rule. */\n  /* Scoped to the group, not the slot, so bare tab controls are not stretched to an equal share of the strip. */\n  ::slotted(nile-nav-tab-group[slot='tabs']) {\n    --track-width: 0px;\n    /*\n     * The active indicator (Figma: fg-brand-primary-alt) is NOT set here: the top placement hard-codes\n     * var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700)) inside nile-nav-tab-group's shadow tree, and\n     * remapping either token from here would also recolour nile-nav-tab's focus ring and focus label. Known limitation (spec A-7).\n     */\n    /*\n     * The inactive label: nile-nav-tab paints it var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700)), so the strip\n     * points the NxtGen fallback at text-quaternary-500. Enterprise defines --nile-colors-dark-500 and is untouched. Inside an\n     * underline group nothing else reads text-secondary-700 (only the group's other variants and side placements do).\n     */\n    --ng-colors-text-secondary-700: var(--ng-colors-text-quaternary-500);\n    flex: 1 1 auto;\n    min-width: 0;\n    align-self: flex-end;\n  }\n\n  /* ------------------------------------------------------------------- main */\n\n  .main {\n    box-sizing: border-box;\n    flex: 1 1 auto;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    /* Top and sides only: the page runs to the container's bottom edge. */\n    padding: var(--nile-app-shell-content-padding);\n    padding-block-end: 0;\n  }\n\n  .main:focus {\n    outline: none;\n  }\n\n  :host([no-padding]) .main {\n    padding: 0;\n  }\n\n  .main-inner {\n    width: 100%;\n    min-height: 0;\n  }\n\n  /* Centred when short, scrolls from the top when tall. */\n  :host([content-align='centered']) .main-inner {\n    /* width:100% + max-width leaves space for the auto margins to centre it while short, and scroll from the top when tall. */\n    width: 100%;\n    max-width: var(--nile-app-shell-centered-width);\n    margin: auto;\n  }\n\n  /* ------------------------------------------------------------------ aside */\n\n  .aside {\n    box-sizing: border-box;\n    /* Gives before the page does, down to its own floor. */\n    flex: 0 1 var(--nile-app-shell-aside-width);\n    min-width: var(--nile-app-shell-aside-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: auto;\n    padding: var(--nile-app-shell-content-padding);\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border-radius: var(--nile-app-shell-radius);\n  }\n\n  :host(:not([has-aside])) .aside {\n    display: none;\n  }\n\n  /* -------------------------------------------------------------- AI panel */\n\n  .panel {\n    box-sizing: border-box;\n    /* The panel pushes the page rather than covering it: full width while the row affords it, shrinking to a real min-width floor. */\n    flex: 0 1 var(--nile-app-shell-panel-width);\n    width: var(--nile-app-shell-panel-width);\n    min-width: var(--nile-app-shell-panel-min-width);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-secondary));\n    /* The panel is elevated, so its edge sits a rung above the container's. */\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-app-shell-radius);\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n  }\n\n  /* Docked: a flex sibling. It squeezes the content, it does not cover it. */\n  :host(:not([panel-open])) .panel {\n    display: none;\n  }\n\n  /* Overlay: contained to the content column, above it, and animated in. */\n  :host([panel-mode='overlay']) .panel {\n    position: absolute;\n    z-index: 1001;\n    inset-block: var(--nile-app-shell-gutter);\n    inset-inline-end: var(--nile-app-shell-gutter);\n    flex: none;\n    display: flex;\n    width: min(var(--nile-app-shell-panel-width), 92%);\n    visibility: hidden;\n    transform: translateX(calc(100% + var(--nile-app-shell-gutter)));\n    transition: transform var(--nile-app-shell-duration)\n        var(--nile-app-shell-ease),\n      visibility 0s linear var(--nile-app-shell-duration);\n  }\n\n  :host([panel-mode='overlay'][panel-open]) .panel {\n    visibility: visible;\n    transform: none;\n    transition: transform var(--nile-app-shell-duration)\n      var(--nile-app-shell-ease);\n  }\n\n  /* An unavailable panel is unmounted in either mode. */\n  :host(:not([has-panel])) .panel {\n    display: none;\n  }\n\n  .panel-header {\n    box-sizing: border-box;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    height: var(--nile-app-shell-panel-header-height);\n    padding-inline: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-bottom: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  /* The back control for a panel sub-view; stands where the brand mark does in the root view. */\n  .panel-back {\n    flex: 0 0 auto;\n    margin-inline-start: -6px;\n  }\n\n  /* Mirrors the back control's offset on the end edge: the 20px glyph, not the 32px circle, lands on the padding line. */\n  .panel-close {\n    margin-inline-end: -6px;\n  }\n\n  :host([panelback]) .panel-mark {\n    display: none;\n  }\n\n  .panel-heading {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    min-width: 0;\n  }\n\n  .panel-mark {\n    display: inline-flex;\n    color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-fg-brand-primary-600)\n    );\n  }\n\n  .panel-mark nile-glyph {\n    --nile-svg-fill: currentColor;\n    --nile-svg-stroke-width: var(--ng-svg-stroke-width);\n    width: 20px;\n    height: 20px;\n  }\n\n  .panel-title {\n    margin: 0;\n    /* Figma's Assistant Title: Text lg/Semibold, 18/28 on NxtGen. Enterprise keeps --nile-type-scale-3, and it defines no --ng-* tokens, so the line-height declaration is invalid there and the title inherits its line height exactly as before. */\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n    line-height: var(--ng-line-height-text-lg);\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .panel-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    margin-inline-start: auto;\n  }\n\n  .panel-body {\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n    /* 16 under the header, 24 on the sides and bottom. */\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .panel-footer {\n    flex: 0 0 auto;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    border-top: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n\n  :host(:not([has-panel-footer])) .panel-footer {\n    display: none;\n  }\n\n  /* ---------------------------------------------------------- skip link */\n\n  .skip-link {\n    position: absolute;\n    z-index: 1002;\n    inset-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    inset-block-start: var(--nile-spacing-md, var(--ng-spacing-md));\n    display: inline-flex;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-md, var(--ng-radius-md));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));\n    cursor: pointer;\n    transform: translateY(-200%);\n    transition: transform\n      var(--nile-transition-duration-short, var(--ng-transition-duration-fast))\n      var(--nile-app-shell-ease);\n  }\n\n  .skip-link:focus-visible {\n    outline: none;\n    transform: none;\n    box-shadow: 0 0 0 2px\n        var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary)),\n      0 0 0 4px\n        var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n  }\n\n  :host([no-skip-link]) .skip-link {\n    display: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host,\n    .panel,\n    .skip-link {\n      transition: none;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-app-shell/nile-app-shell.d.ts

@@ -13,10 +13,12 @@ export type NileAppShellPanelMode = 'docked' | 'overlay';
 export type NileAppShellTopBarPlacement = 'content' | 'shell';
 /** How the main region lays its content out. */
 export type NileAppShellContentAlign = 'fluid' | 'centered';
+/** The `detail` of the `nile-click` the header back control emits. */
+export interface NileAppShellClickDetail {
+    value: 'back';
+}
 /**
- * @summary The application frame every route inherits: a side nav, a content
- * container, an optional aside and an AI assistant panel. It holds anything —
- * the shell owns the boxes, the page owns what goes in them.
+ * @summary The application frame every route inherits: a side nav, a content container, an optional aside and an AI assistant panel.
  *
  * @status stable
  * @since 2.0
@@ -28,29 +30,22 @@ export type NileAppShellContentAlign = 'fluid' | 'centered';
  *
  * @slot - The page body, inside the content container.
  * @slot banner - A full-width strip above every other region.
- * @slot top-bar - The page-title bar. Mounted inside the container by default,
- *   or spanning the shell when `top-bar-placement="shell"`. The nav toggle is
- *   rendered before whatever is slotted here.
+ * @slot top-bar - The page-title bar, mounted inside the container by default or spanning the shell when `top-bar-placement="shell"`.
  * @slot top-bar-actions - Controls pinned to the end of the top bar.
- * @slot tabs - A hoisted second-level tab strip, flush under the top bar and
- *   outside `<main>`'s scroller, so it never scrolls away. The region carries
- *   the strip's height, padding and rule, so slot a `<nile-tab-group>` or the
- *   tab controls themselves.
+ * @slot tabs - A hoisted second-level tab strip, flush under the top bar and outside `<main>`'s scroller.
+ * @slot app-icon - The mark shown before the page title whenever this slot has content, clipped to the shell's box.
  * @slot side-nav - The navigation track. Works best with `<nile-side-bar>`.
  * @slot aside - A secondary column between the content container and the panel.
- * @slot panel - The AI panel's body. When nothing is slotted here the panel is
- *   unmounted and `openPanel()` is a no-op.
+ * @slot panel - The AI panel's body. When empty the panel is unmounted and `openPanel()` is a no-op.
  * @slot panel-header - Replaces the default panel heading (mark plus title).
  * @slot panel-actions - Controls added before the panel's close button.
- * @slot panel-footer - A bar docked below the panel's scroll region, for a
- *   composer.
+ * @slot panel-footer - A bar docked below the panel's scroll region, for a composer.
  *
- * @event nile-nav-toggle - Emitted after the nav's collapsed state or its
- *   forced-rail lock changes. `detail: { collapsed, locked }`.
- * @event nile-panel-toggle - Emitted after the panel opens or closes.
- *   `detail: { open, mode }`.
- * @event nile-panel-mode-change - Emitted when the panel flips between docked
- *   and overlay. `detail: { mode }`.
+ * @event nile-nav-toggle - Emitted after the nav's collapsed state or forced-rail lock changes. `detail: { collapsed, locked }`.
+ * @event nile-panel-toggle - Emitted after the panel opens or closes. `detail: { open, mode }`.
+ * @event nile-panel-mode-change - Emitted when the panel flips between docked and overlay. `detail: { mode }`.
+ * @event nile-click - Emitted when the header's back control is pressed, or `goBackHeader()` is called. `detail: { value: 'back' }`. Emitted on the shell itself, so check `event.target === shell` as well as the value: a `nile-click` from page content bubbles through the shell too.
+ * @event nile-panel-back - Emitted when the panel's back control is pressed, whether the shell's built-in panel chrome or a slotted `nile-app-shell-panel` draws it.
  *
  * @csspart skip-link - The skip-to-content link.
  * @csspart banner - The banner region.
@@ -58,12 +53,15 @@ export type NileAppShellContentAlign = 'fluid' | 'centered';
  * @csspart top-bar - The top bar, in either placement.
  * @csspart nav-toggle - The built-in nav toggle button.
  * @csspart rule - The vertical rule after the nav toggle.
- * @csspart top-bar-actions - The end-aligned top bar action group. Unmounted
- *   when it holds neither slotted actions nor the Ask button, so it reserves
- *   no gap.
+ * @csspart ask-rule - The vertical rule before the Ask button, drawn when `top-bar-actions` has content.
+ * @csspart top-bar-actions - The end-aligned top bar action group.
  * @csspart ask - The built-in Ask button, the shell's single door to the panel.
- *   A `<nile-button>`; its inner surface and label are exported as
- *   `ask__base` and `ask__label`.
+ * @csspart title-area - The header's own title block: back control, app icon, title, badge and description.
+ * @csspart page-title - The title text, exposed as a heading whose level `headingLevel` sets.
+ * @csspart description - The second line under the title.
+ * @csspart badge - The pill after the title.
+ * @csspart back - The header back control, shown by `headerBack`.
+ * @csspart app-icon - The block holding the `app-icon` slot, shown when the slot has content and sized by `--nile-app-shell-app-icon-size`.
  * @csspart tabs - The hoisted tab-strip region, under the top bar.
  * @csspart side-nav - The navigation track.
  * @csspart content-section - The flex row holding container, aside and panel.
@@ -72,42 +70,32 @@ export type NileAppShellContentAlign = 'fluid' | 'centered';
  * @csspart aside - The aside region.
  * @csspart panel - The AI panel.
  * @csspart panel-header - The panel's header bar.
+ * @csspart panel-back - The panel's back control, shown by `panelBack`.
  * @csspart panel-title - The panel's title text.
  * @csspart panel-actions - The panel's header action group.
  * @csspart panel-close - The panel's close button.
  * @csspart panel-body - The panel's scroll region.
  * @csspart panel-footer - The panel's footer.
  *
- * @cssproperty [--nile-app-shell-side-nav-width=260px] - Expanded nav track.
- * @cssproperty [--nile-app-shell-side-nav-rail-width=64px] - Collapsed track.
- * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind a
- *   slotted side nav. Transparent by default: the nav and the page share one
- *   surface.
- * @cssproperty [--nile-app-shell-side-nav-border=0] - Edge on a slotted side
- *   nav.
- * @cssproperty [--nile-app-shell-gutter=8px] - Content-section padding, and the
- *   gap between container, aside and panel.
- * @cssproperty [--nile-app-shell-content-padding=24px] - Container inner
- *   padding. The origin every top bar starts at.
- * @cssproperty [--nile-app-shell-top-bar-height=56px] - Top bar and panel
- *   header height. Drops to 48px under 600px of viewport height.
- * @cssproperty [--nile-app-shell-tabs-height=48px] - Tab strip height.
- * @cssproperty [--nile-app-shell-panel-width=480px] - Docked panel width, and
- *   the `min()` ceiling for the overlay drawer.
- * @cssproperty [--nile-app-shell-panel-min-width=360px] - How far a docked
- *   panel shrinks to keep pushing rather than covering the page.
+ * @cssproperty [--nile-app-shell-side-nav-width=240px] - Expanded nav track.
+ * @cssproperty [--nile-app-shell-side-nav-rail-width=70px] - Collapsed track.
+ * @cssproperty [--nile-app-shell-side-nav-bg=transparent] - Surface behind a slotted side nav.
+ * @cssproperty [--nile-app-shell-side-nav-border=0] - Edge on a slotted side nav.
+ * @cssproperty [--nile-app-shell-gutter=4px] - Content-section padding, and the gap between container, aside and panel.
+ * @cssproperty [--nile-app-shell-content-padding=24px] - Container inner padding.
+ * @cssproperty [--nile-app-shell-top-bar-height=68px] - Top bar height.
+ * @cssproperty [--nile-app-shell-panel-header-height=56px] - The panel header's own height.
+ * @cssproperty [--nile-app-shell-tabs-height=33px] - Tab strip height.
+ * @cssproperty [--nile-app-shell-panel-width=480px] - Docked panel width, and the `min()` ceiling for the overlay drawer.
+ * @cssproperty [--nile-app-shell-panel-min-width=360px] - How far a docked panel shrinks to keep pushing rather than covering the page.
  * @cssproperty [--nile-app-shell-aside-width=320px] - Aside width.
- * @cssproperty [--nile-app-shell-aside-min-width=240px] - How far the aside
- *   shrinks before the page is asked for room.
+ * @cssproperty [--nile-app-shell-aside-min-width=240px] - How far the aside shrinks before the page is asked for room.
  * @cssproperty [--nile-app-shell-content-min-width=640px] - Container floor.
- * @cssproperty [--nile-app-shell-min-width=768px] - Below this the window
- *   scrolls rather than the shell compressing.
- * @cssproperty [--nile-app-shell-centered-width=824px] - Column width under
- *   `content-align="centered"`.
- * @cssproperty [--nile-app-shell-utility-size=32px] - Height of the Ask
- *   button. The toggle and close controls are nile-buttons and size themselves.
- * @cssproperty [--nile-app-shell-radius=16px] - Container, aside and panel
- *   radius.
+ * @cssproperty [--nile-app-shell-min-width=768px] - Below this the window scrolls rather than the shell compressing.
+ * @cssproperty [--nile-app-shell-centered-width=824px] - Column width under `content-align="centered"`.
+ * @cssproperty [--nile-app-shell-app-icon-size=20px] - The app icon's box.
+ * @cssproperty [--nile-app-shell-utility-size=32px] - Box the shell's own icon controls sit in.
+ * @cssproperty [--nile-app-shell-radius=16px] - Container, aside and panel radius.
  * @cssproperty [--nile-app-shell-duration=250ms] - Track and panel motion.
  * @cssproperty [--nile-app-shell-ease] - Easing for moves and resizes.
  *
@@ -117,23 +105,32 @@ export type NileAppShellContentAlign = 'fluid' | 'centered';
  * @method expandNav() - Expand the side nav.
  * @method collapseNav() - Collapse the side nav to a rail.
  * @method toggleNav(force?) - Toggle, or force a specific collapsed state.
+ * @method goBackHeader() - Emit `nile-click` with `{ value: 'back' }`, as the header's back control does.
+ * @method goBackPanel() - Emit `nile-panel-back`, as the panel's back control does.
+ * @method goBack() - Deprecated alias of `goBackPanel()`.
  */
 export declare class NileAppShell extends NileElement {
     static get styles(): CSSResultArray;
-    /**
-     * The user's nav preference. The nav can still render as a rail while this is
-     * false — see `navLocked`.
-     */
+    /** The user's nav preference. The nav can still render as a rail while this is false — see `navLocked`. */
     navCollapsed: boolean;
     /** Whether the AI panel is open. */
     panelOpen: boolean;
-    /**
-     * Unmounts the AI panel for this route even when the `panel` slot is filled.
-     * `openPanel()` becomes a no-op.
-     */
+    /** Unmounts the AI panel for this route even when the `panel` slot is filled; `openPanel()` becomes a no-op. */
     noPanel: boolean;
     /** The default panel heading. Ignored when `panel-header` is slotted. */
     panelLabel: string;
+    /** The page title, rendered as the top bar's own heading (`role="heading"`, level from `headingLevel`) before anything slotted into `top-bar`; leave unset and no title block renders. */
+    pageTitle?: string;
+    /** The `aria-level` of the `pageTitle` heading, 1–6, so the title can fit the page's own heading outline; e.g. 2 when the page body or banner already has its h1. Out-of-range values clamp to 1–6 and non-numbers fall back to 1. */
+    headingLevel: number;
+    /** A second line under the page title; a modifier on `pageTitle` that renders nothing with no title, and takes the bar to 76px. */
+    description?: string;
+    /** A pill after the page title; a modifier on `pageTitle` like `description`, so with no title there is no badge. */
+    badge?: string;
+    /** Shows the back arrow before the page title; pressing it emits `nile-click` with `{ value: 'back' }`. Independent of the `app-icon` slot. */
+    headerBack: boolean;
+    /** Accessible name of the header back control. Never rendered as visible text. */
+    headerBackLabel: string;
     /** Hides the built-in nav toggle. Mount `nile-app-shell-nav-toggle` yourself. */
     noNavToggle: boolean;
     /** Drops the Cmd/Ctrl+J and Escape panel shortcuts. */
@@ -146,53 +143,29 @@ export declare class NileAppShell extends NileElement {
     topBarPlacement: NileAppShellTopBarPlacement;
     /** `centered` caps the page body at `--nile-app-shell-centered-width`. */
     contentAlign: NileAppShellContentAlign;
-    /**
-     * Makes the slotted page root a size query container, so page CSS can size
-     * against the content container instead of the viewport. Query it unnamed —
-     * `@container (min-width: 720px)` — because a container name declared inside
-     * the shell's shadow tree is not visible to page CSS. Opt-in, because it
-     * also applies layout containment to that element.
-     */
+    /** Makes the slotted page root a size query container, so page CSS can size against the content container instead of the viewport. */
     contentContainer: boolean;
     /** Drops the container's card chrome for a full-bleed page. */
     flat: boolean;
     /** Removes the container's inner padding. */
     noPadding: boolean;
-    /**
-     * The label on the built-in Ask button.
-     *
-     * The button is the shell's, not the app's: it is the one control that has
-     * to know whether a panel is mounted for this route and how to open it, and
-     * slotted content can see neither. Everything else in the bar — the
-     * breadcrumb, the page actions, the tab strip — is slotted markup.
-     */
+    /** The label on the built-in Ask button. */
     askLabel: string;
     /** Drops the built-in Ask button, for a bar that renders its own. */
     noAsk: boolean;
+    /** Shows a back control at the start of the panel header for a panel sub-view; emits `nile-panel-back`. */
+    panelBack: boolean;
+    /** Accessible name of the panel's back control. */
+    panelBackLabel: string;
+    /** Hides the tab strip for this route even when the `tabs` slot is filled. */
+    noTabs: boolean;
     /** Sizes the shell to the viewport instead of its parent. */
     fullHeight: boolean;
-    /**
-     * Below this shell width the panel overlays the content instead of pushing
-     * it, and the nav is forced to a rail.
-     *
-     * Zero — the default — means never: the panel is furniture that squeezes the
-     * page, at every width. It earns its room from the nav rail first and from
-     * its own width next (see `--nile-app-shell-panel-min-width`), so it does
-     * not have to cover the page to fit. Set a width here to opt back into an
-     * overlay drawer below it.
-     */
+    /** Below this shell width the panel overlays the content instead of pushing it, and the nav is forced to a rail; zero (default) means never. */
     overlayBreakpoint: number;
-    /**
-     * Below this shell width an open docked panel forces the nav to a rail.
-     * A floor, not the whole rule: the nav also rails as soon as the expanded
-     * track is what stops the row from fitting. This is the first thing the
-     * panel takes room from, so it can push rather than cover.
-     */
+    /** Below this shell width an open docked panel forces the nav to a rail. */
     dockedRailBreakpoint: number;
-    /**
-     * Persists the nav preference and the docked panel state under this key.
-     * Overlay panel state is never persisted — a reload opens closed.
-     */
+    /** Persists the nav preference and docked panel state under this key. Overlay panel state is never persisted. */
     persistKey?: string;
     /** The panel's current mode. Derived from the shell's width. */
     private _panelMode;
@@ -203,14 +176,10 @@ export declare class NileAppShell extends NileElement {
     private _hasTopBar;
     private _hasTopBarActions;
     private _hasTabs;
+    private _hasAppIcon;
     private _hasPanel;
     private _hasPanelFooter;
-    /**
-     * True when a `nile-app-shell-panel` is slotted. That component owns the
-     * panel's heading, actions, close button and footer, so the shell renders a
-     * bare region and keeps only the geometry and the open state — the same
-     * hand-off as `no-nav-toggle` plus `nile-app-shell-nav-toggle`.
-     */
+    /** True when a `nile-app-shell-panel` is slotted, owning the panel's own chrome so the shell renders a bare region. */
     private _panelOwnsChrome;
     private _hasAside;
     private _main?;
@@ -223,6 +192,8 @@ export declare class NileAppShell extends NileElement {
     get navLocked(): boolean;
     /** Whether a panel is mounted for this route. */
     get panelAvailable(): boolean;
+    /** Whether the tab strip is rendered: something slotted, and not switched off. */
+    get tabsVisible(): boolean;
     /** Whether the built-in Ask button is rendered. */
     get askVisible(): boolean;
     /** Whether the nav renders as a rail right now, preference or lock. */
@@ -235,12 +206,14 @@ export declare class NileAppShell extends NileElement {
     openPanel(): void;
     /** Close the AI panel. */
     closePanel(): void;
-    /**
-     * Toggle the panel, or force a state. Call `openPanel()` from a page action —
-     * a page action that toggles closes the panel for a user who already had it
-     * open.
-     */
+    /** Toggle the panel, or force a state. */
     togglePanel(force?: boolean): void;
+    /** Emit `nile-click` with `{ value: 'back' }`, as the header's back control does; the page owns the history. */
+    goBackHeader(): void;
+    /** Emit `nile-panel-back`, as the panel's back control does; the page owns the view stack. */
+    goBackPanel(): void;
+    /** @deprecated Use `goBackPanel()`; kept as an alias that emits `nile-panel-back`. */
+    goBack(): void;
     /** Expand the side nav. */
     expandNav(): void;
     /** Collapse the side nav to a rail. */
@@ -253,22 +226,9 @@ export declare class NileAppShell extends NileElement {
     private _setNavCollapsed;
     /** Records the shell's width and re-derives everything that depends on it. */
     private _measure;
-    /**
-     * The shell's geometry, read off its own custom properties so a consumer's
-     * overrides are part of the sum. Falls back to the stylesheet's defaults
-     * before the element has a computed style.
-     */
+    /** The shell's geometry, read off its own custom properties, falling back to defaults before a computed style exists. */
     private _geometry;
-    /**
-     * The shell width a docked panel needs to sit beside the content floor, over
-     * a side-nav `track` wide.
-     *
-     * A fixed breakpoint cannot answer this: what shares the row changes per
-     * route. An aside alone adds 328px, so a shell wide enough to hold the
-     * expanded nav beside a docked panel on one route is 328px short on the
-     * next. Summing what is actually mounted rails the nav exactly when the
-     * track is what the row cannot afford.
-     */
+    /** The shell width a docked panel needs to sit beside the content floor, over a side-nav `track` wide. */
     private _dockRequirement;
     private _recompute;
     /** Mirrors the effective rail state onto a slotted `nile-side-bar`. */
@@ -281,6 +241,14 @@ export declare class NileAppShell extends NileElement {
     private _persist;
     private _onSlotChange;
     private _renderNavToggle;
+    /** Whether the header has a title block of its own to draw: a title, the back arrow or a slotted app icon mounts it. */
+    private get _hasTitleBlock();
+    /** `headingLevel` as a safe `aria-level`: a whole number clamped to 1–6, and 1 for anything non-numeric. */
+    private get _headingLevel();
+    private _renderBack;
+    private _renderAppIconSlot;
+    private _renderAppIconProbe;
+    private _renderTitleBlock;
     private _renderTopBar;
     render(): TemplateResult;
 }