cordisx 0.1.0-beta.1 → 0.1.0-beta.3

package/THIRD_PARTY_NOTICES.md

@@ -3,51 +3,37 @@
 The CordisX CLI depends on packages distributed separately by npm. Their
 licenses remain with their respective copyright holders:
 
-| Package | Version used by this beta | Registry license |
-| --- | --- | --- |
-| `@deepseek-ai/cordis` | `4.0.1` | MIT |
-| `@deepseek-ai/schemastery` | `3.18.1` | MIT |
-| `@material-symbols/svg-400` | `0.46.0` | Apache-2.0 |
-| `esbuild` | `^0.25.9` | MIT |
-| `intl-messageformat` | `11.2.14` | BSD-3-Clause |
-| `luna-console` | `1.3.6` | MIT |
-| `luna-data-grid` | `1.6.5` | MIT |
-| `luna-dom-viewer` | `1.8.4` | MIT |
-| `luna-object-viewer` | `0.3.2` | MIT |
-| `tar` | `7.5.22` | BlueOak-1.0.0 |
-| `ws` | `^8.18.3` | MIT |
-
-CordisX also bundles a generated, production-controlled subset of these
-packages inside the renderer rather than installing their full npm graphs:
-
-| Bundled package | Exact version | License |
-| --- | --- | --- |
-| `tdesign-web-components` | `1.2.10` | MIT |
-| `omi` | `7.7.13` | MIT |
-| `reactive-signal` | `2.0.1` | MIT |
-| `weakmap-polyfill` | `2.0.4` | MIT |
-| `clsx` | `2.1.1` | MIT |
-| `tailwind-merge` | `2.6.1` | MIT |
-| `lodash-es` | `4.18.1` | MIT |
-| `omi-transition` | `0.1.11` | MIT |
-| `@popperjs/core` | `2.11.8` | MIT |
-
-The TDesign subset is generated from npm tarball SHA-256
-`e1929f06eda5c3d2ee194da0d6bc9f81e187184fe1054627afeabad2ae71db0e`.
-Only Input, Textarea, InputNumber, Select/Option, DatePicker, TagInput,
-Checkbox, Switch, Radio, Slider, Button, Alert, and Loading are imported.
-Embedded CSS source maps and Omi's
-legacy replacement of the native `HTMLElement` constructor are removed; no
-component behavior is reimplemented or represented as a different library.
-The retained notices and MIT terms are at
-`third_party/tdesign-web-components-subset-MIT.txt`.
-
-CordisX copies selected Material Symbols SVG assets into its built output. The
-complete Apache License 2.0 text distributed by that package is included at
-`third_party/material-symbols-APACHE-2.0.txt`.
+| Package                    | Version used by this beta | Registry license |
+| -------------------------- | ------------------------- | ---------------- |
+| `@deepseek-ai/cordis`      | `4.0.1`                   | MIT              |
+| `@deepseek-ai/schemastery` | `3.18.1`                  | MIT              |
+| `@oneworks/avatar`         | `1.0.0-rc.8`              | MIT              |
+| `@oneworks/avatar-react`   | `1.0.0-rc.8`              | MIT              |
+| `@shikitor/core`           | `1.0.2`                   | MIT              |
+| `es-module-lexer`          | `1.7.0`                   | MIT              |
+| `esbuild`                  | `^0.25.9`                 | MIT              |
+| `intl-messageformat`       | `11.2.14`                 | BSD-3-Clause     |
+| `lightningcss`             | `1.33.0`                  | MPL-2.0          |
+| `luna-console`             | `1.3.6`                   | MIT              |
+| `luna-data-grid`           | `1.6.5`                   | MIT              |
+| `luna-dom-viewer`          | `1.8.4`                   | MIT              |
+| `luna-object-viewer`       | `0.3.2`                   | MIT              |
+| `reicon`                   | `1.2.1`                   | MIT              |
+| `tdesign-react`            | `1.18.2`                  | MIT              |
+| `tar`                      | `7.5.22`                  | BlueOak-1.0.0    |
+| `ws`                       | `^8.18.3`                 | MIT              |
+
+CordisX bundles only the selected Reicon glyph modules referenced by its
+Host-private semantic icon catalog. Reicon credits Solar Icons, designed by
+480 Design, under CC BY 4.0 and Zappicon under the Zappicon License as base-icon
+sources. Reicon, Zappicon, and Solar Icons remain upstream assets; CordisX does
+not represent them as CordisX-owned MIT icon assets, export their raw SVG/icon
+dataset, or provide an icon-library redistribution channel. The retained Reicon
+MIT terms and upstream credits are at `third_party/reicon-MIT.txt` and
+`third_party/reicon-icon-credits.txt`.
 
 The exact dependency graph in `package-lock.json` contains MIT, Apache-2.0,
-BSD-3-Clause, BlueOak-1.0.0, and ISC license identifiers for production
+BSD-3-Clause, BlueOak-1.0.0, ISC, and MPL-2.0 license identifiers for production
 dependencies in this beta. This inventory is evidence for release review, not
 legal advice.
 
@@ -57,7 +43,3 @@ project is liriliri/luna; all four packages are MIT licensed (copyright
 liriliri contributors). CordisX inserts each safe structured `method + args[]`
 record independently into Luna Console. The separate Host Inspector contains
 metadata only. There is no runtime CDN dependency.
-
-The package-size, dependency, component-coverage, style-isolation, and
-reproducible-generation evidence for the TDesign subset is recorded in
-`.agents/docs/host-form-system.md`.

package/dist/assets/host-sidebar.css

@@ -0,0 +1,495 @@
+/* Visual mappings are adapter-owned; the row rules below own shared structure. */
+.cordisx-sidebar-navigation[data-cordisx-sidebar-appearance="codex"] {
+  --cordisx-nav-radius: 8px;
+  --cordisx-nav-single-height: var(--height-token-row, 30px);
+  --cordisx-nav-two-line-height: max(46px, var(--cordisx-nav-single-height));
+  --cordisx-nav-font-family: inherit;
+  --cordisx-nav-font-size: inherit;
+  --cordisx-nav-font-weight: inherit;
+  --cordisx-nav-line-height: inherit;
+  --cordisx-nav-hover-background: var(
+    --color-background-primary-ghost-hover,
+    transparent
+  );
+  --cordisx-nav-selected-background: var(
+    --color-background-primary-ghost-hover,
+    transparent
+  );
+  --cordisx-nav-selected-hover-background: var(
+    --cordisx-nav-selected-background
+  );
+  --cordisx-nav-focus-background: transparent;
+  --cordisx-nav-focus-ring: var(--color-ring, currentColor);
+}
+
+/* Playground maps the shared SidebarItem structure to its own visual tokens. */
+.pg-sidebar {
+  --cordisx-nav-radius: 7px;
+  --cordisx-nav-single-height: 30px;
+  --cordisx-nav-two-line-height: 46px;
+  --cordisx-nav-font-family: ui-sans-serif, system-ui, sans-serif;
+  --cordisx-nav-font-size: 13px;
+  --cordisx-nav-font-weight: 445;
+  --cordisx-nav-line-height: 18px;
+  --cordisx-nav-hover-background: var(--pg-hover);
+  --cordisx-nav-selected-background: var(--pg-active);
+  --cordisx-nav-selected-hover-background: var(--pg-active);
+  --cordisx-nav-focus-background: var(--pg-hover);
+  --cordisx-nav-focus-ring: var(--pg-accent);
+}
+
+.cordisx-navigation, .cordisx-navigation-group-items {
+  display: grid;
+  gap: 1px;
+}
+.cordisx-navigation-group-items {
+  gap: var(--cordisx-nav-group-item-gap, 1px);
+}
+.cordisx-navigation-collections {
+  display: grid;
+  gap: var(--cordisx-nav-group-gap, 12px);
+}
+.cordisx-sidebar-collections[data-cordisx-sidebar-appearance] {
+  --cordisx-nav-two-line-height: 46px;
+}
+.cordisx-navigation-group {
+  min-width: 0;
+  margin-block-start: var(--cordisx-nav-group-margin-block, 12px);
+  margin-block-end: var(--cordisx-nav-group-margin-block-end, 0px);
+  padding-block-start: var(
+    --cordisx-nav-group-section-padding-block-start,
+    0px
+  );
+  padding-block-end: var(--cordisx-nav-group-section-padding-block-end, 0px);
+}
+.cordisx-navigation-group-heading {
+  margin: 0;
+  min-width: 0;
+}
+.cordisx-sidebar-collections[data-cordisx-sidebar-appearance="codex"]
+  .cordisx-navigation-group-heading {
+  box-sizing: border-box;
+  padding-inline-start: var(
+    --cordisx-nav-group-heading-inset-start,
+    var(--space-2, 8px)
+  );
+  padding-inline-end: var(
+    --cordisx-nav-group-heading-inset-end,
+    var(--space-2, 8px)
+  );
+}
+.cordisx-sidebar-collections[data-cordisx-sidebar-appearance="codex"]
+  .cordisx-navigation-group-items {
+  box-sizing: border-box;
+  padding-inline-start: var(
+    --cordisx-nav-group-row-inset-start,
+    var(--space-2, 8px)
+  );
+  padding-inline-end: var(
+    --cordisx-nav-group-row-inset-end,
+    var(--space-2, 8px)
+  );
+}
+.cordisx-navigation-group-toggle {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding-block: var(--cordisx-nav-group-padding-block, 4px);
+  padding-inline: var(--cordisx-nav-group-padding-inline, 8px);
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(
+    --cordisx-nav-group-color,
+    var(--color-text-secondary, currentColor)
+  );
+  font-family: var(--cordisx-nav-group-font-family, inherit);
+  font-size: var(--cordisx-nav-group-font-size, 12px);
+  font-weight: var(--cordisx-nav-group-font-weight, 500);
+  line-height: var(--cordisx-nav-group-line-height, 20px);
+  text-align: start;
+  cursor: default;
+}
+.cordisx-navigation-group-toggle > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cordisx-navigation-group-toggle:focus-visible {
+  outline: 2px solid var(--cordisx-nav-focus-ring, currentColor);
+  outline-offset: -2px;
+}
+.cordisx-navigation-group-chevron {
+  flex: 0 0 var(--cordisx-nav-disclosure-size, 14px);
+  width: var(--cordisx-nav-disclosure-size, 14px);
+  height: var(--cordisx-nav-disclosure-size, 14px);
+  align-self: center;
+  transform: rotate(0deg);
+  transform-origin: center;
+  transition: transform var(--default-transition-duration, 150ms)
+    var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.cordisx-sidebar-collections[data-cordisx-sidebar-appearance="codex"] {
+  --cordisx-nav-disclosure-size: var(--icon-disclosure-size, 14px);
+}
+.cordisx-navigation-group-toggle[aria-expanded="false"]
+  > .cordisx-navigation-group-chevron {
+  transform: rotate(-90deg);
+}
+.cordisx-navigation-group-items[hidden] {
+  display: none;
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item] {
+  display: flex;
+  inline-size: auto;
+  max-inline-size: 100%;
+  min-width: 0;
+  height: auto;
+  box-sizing: border-box;
+  align-items: stretch;
+  gap: var(--cordisx-nav-content-gap, 8px);
+  min-height: var(
+    --cordisx-nav-row-height,
+    var(--cordisx-nav-single-height, 30px)
+  );
+  padding-block: 0;
+  padding-inline: var(--cordisx-nav-content-gutter, 8px);
+  overflow: visible;
+  border-radius: var(--cordisx-nav-radius, 8px);
+  background: transparent;
+  -webkit-app-region: no-drag;
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-variant="two-line"] {
+  --cordisx-nav-row-height: var(--cordisx-nav-two-line-height, 46px);
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item]:focus-within {
+  background: var(--cordisx-nav-focus-background, transparent);
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item]:hover {
+  background: var(--cordisx-nav-hover-background, transparent);
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-selected="true"],
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="active"],
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="presented"] {
+  background: var(--cordisx-nav-selected-background, transparent);
+  color: var(--cordisx-nav-selected-foreground, inherit);
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-selected="true"]:hover,
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-selected="true"]:focus-within,
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="active"]:hover,
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="active"]:focus-within,
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="presented"]:hover,
+.cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="presented"]:focus-within {
+  background: var(
+    --cordisx-nav-selected-hover-background,
+    var(--cordisx-nav-selected-background, transparent)
+  );
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item]
+  > .cxsi-primary.cordisx-nav-primary {
+  appearance: none;
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: 16px minmax(0, 1fr);
+  align-items: center;
+  gap: var(--cordisx-nav-content-gap, 8px);
+  align-self: stretch;
+  min-height: var(
+    --cordisx-nav-row-height,
+    var(--cordisx-nav-single-height, 30px)
+  );
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-family: var(--cordisx-nav-font-family, inherit);
+  font-size: var(--cordisx-nav-font-size, 13px);
+  font-weight: var(--cordisx-nav-font-weight, 400);
+  line-height: var(--cordisx-nav-line-height, 18px);
+  text-align: left;
+  cursor: default;
+}
+.cxsi-row.cordisx-nav-row[data-sidebar-item]
+  > .cxsi-primary.cordisx-nav-primary,
+.cxsi-row.cordisx-nav-row[data-sidebar-item]
+  > .cxsi-primary.cordisx-nav-primary:hover,
+.cxsi-row.cordisx-nav-row[data-sidebar-item]
+  > .cxsi-primary.cordisx-nav-primary[aria-pressed="true"],
+.cxsi-row.cordisx-nav-row[data-sidebar-item]
+  > .cxsi-primary.cordisx-nav-primary[aria-current="page"] {
+  background: transparent;
+}
+.cordisx-nav-primary:focus-visible {
+  outline: 2px solid var(--cordisx-nav-focus-ring, currentColor);
+  outline-offset: -2px;
+  border-radius: var(--cordisx-nav-radius, 8px);
+}
+.cordisx-nav-copy {
+  display: grid;
+  min-width: 0;
+  overflow: hidden;
+}
+.cordisx-nav-copy > .cxsi-title, .cordisx-nav-copy > .cxsi-secondary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cordisx-nav-copy > .cxsi-secondary {
+  color: var(--color-text-tertiary, rgba(127, 127, 127, 0.72));
+  font: 400 11px/15px system-ui, sans-serif;
+}
+.cordisx-nav-actions {
+  display: flex;
+  min-width: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--cordisx-nav-action-gap, 4px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+.cordisx-nav-actions:empty, .cordisx-nav-actions[hidden] {
+  display: none;
+}
+.cordisx-nav-row:hover > .cordisx-nav-actions,
+.cordisx-nav-row:focus-within > .cordisx-nav-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+.cordisx-navigation-direct-action, .cordisx-navigation-more-action {
+  display: inline-flex;
+  width: var(--cordisx-nav-action-target, 24px);
+  min-width: var(--cordisx-nav-action-target, 24px);
+  height: var(--cordisx-nav-action-target, 24px);
+  min-height: var(--cordisx-nav-action-target, 24px);
+  flex: 0 0 var(--cordisx-nav-action-target, 24px);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md, 7px);
+  background: transparent;
+  color: var(--color-text-tertiary, currentColor);
+}
+.cordisx-navigation-direct-action:hover:not(:disabled),
+.cordisx-navigation-more-action:hover:not(:disabled),
+.cordisx-navigation-direct-action[aria-pressed="true"] {
+  background: var(
+    --color-background-primary-ghost-hover,
+    rgba(127, 127, 127, 0.12)
+  );
+  color: var(--color-text, currentColor);
+}
+.cordisx-navigation-direct-action:focus-visible,
+.cordisx-navigation-more-action:focus-visible {
+  outline: 2px solid var(--color-ring, rgba(131, 195, 255, 0.76));
+  outline-offset: -1px;
+}
+.cordisx-navigation-direct-action:disabled,
+.cordisx-navigation-more-action:disabled {
+  opacity: 0.4;
+}
+.cordisx-navigation-action-icon-slot {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  pointer-events: none;
+}
+.cordisx-navigation-direct-action .cordisx-host-icon,
+.cordisx-navigation-more-action .cordisx-host-icon,
+.cordisx-navigation-direct-action .cordisx-host-icon svg,
+.cordisx-navigation-more-action .cordisx-host-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.cordisx-navigation-menu {
+  position: fixed;
+  z-index: 2147483200;
+  display: grid;
+  min-width: 180px;
+  padding: 5px;
+  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.24));
+  border-radius: 10px;
+  background: var(
+    --color-surface-elevated,
+    var(--color-background-elevated, #272727)
+  );
+  color: var(--color-text, currentColor);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+  -webkit-app-region: no-drag;
+}
+.cordisx-navigation-menu-item {
+  display: grid;
+  width: 100%;
+  min-height: 30px;
+  box-sizing: border-box;
+  grid-template-columns: 16px minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--space-2, 8px);
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  font: 400 13px/18px system-ui, sans-serif;
+  text-align: left;
+}
+.cordisx-navigation-menu-icon-slot {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  pointer-events: none;
+}
+.cordisx-navigation-menu-icon-slot .cordisx-host-icon,
+.cordisx-navigation-menu-icon-slot .cordisx-host-icon svg {
+  width: 16px;
+  height: 16px;
+}
+.cordisx-navigation-menu-item > span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cordisx-navigation-menu-item:hover:not(:disabled),
+.cordisx-navigation-menu-item:focus-visible {
+  outline: none;
+  background: var(
+    --color-background-primary-ghost-hover,
+    rgba(127, 127, 127, 0.12)
+  );
+}
+.cordisx-navigation-menu-item[data-tone="danger"] {
+  color: var(--color-text-danger, #ef6b73);
+}
+.cordisx-navigation-menu-item:disabled {
+  opacity: 0.42;
+}
+.cordisx-navigation-confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483400;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.38);
+  -webkit-app-region: no-drag;
+}
+.cordisx-navigation-confirm {
+  width: min(380px, calc(100vw - 48px));
+  padding: 18px;
+  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.24));
+  border-radius: 14px;
+  background: var(
+    --color-surface-elevated,
+    var(--color-background-elevated, #272727)
+  );
+  color: var(--color-text, currentColor);
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
+}
+.cordisx-navigation-confirm-title {
+  font: 600 16px/22px system-ui, sans-serif;
+}
+.cordisx-navigation-confirm-description {
+  margin-top: 8px;
+  color: var(--color-text-secondary, currentColor);
+  font: 400 13px/19px system-ui, sans-serif;
+}
+.cordisx-navigation-confirm-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 18px;
+}
+.cordisx-navigation-confirm-button {
+  min-height: 30px;
+  padding: 5px 12px;
+  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.24));
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+}
+.cordisx-navigation-confirm-danger {
+  border-color: transparent;
+  background: var(--color-background-danger, #c33c48);
+  color: #fff;
+}
+.cordisx-navigation-confirm-button:focus-visible {
+  outline: 2px solid var(--color-ring, rgba(131, 195, 255, 0.76));
+  outline-offset: 2px;
+}
+.cordisx-navigation-feedback {
+  position: fixed;
+  left: 50%;
+  bottom: 28px;
+  z-index: 2147483500;
+  max-width: min(420px, calc(100vw - 32px));
+  transform: translateX(-50%);
+  padding: 8px 12px;
+  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.24));
+  border-radius: 9px;
+  background: var(
+    --color-surface-elevated,
+    var(--color-background-elevated, #272727)
+  );
+  color: var(--color-text, currentColor);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
+  font: 500 12px/17px system-ui, sans-serif;
+}
+.cordisx-navigation-feedback[data-tone="danger"] {
+  color: var(--color-text-danger, #ef6b73);
+}
+@media (forced-colors: active) {
+  .cxsi-row.cordisx-nav-row[data-sidebar-item]:hover,
+  .cxsi-row.cordisx-nav-row[data-sidebar-item]:focus-within {
+    background: Highlight;
+    color: HighlightText;
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-selected="true"],
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="active"],
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="presented"] {
+    background: Canvas;
+    color: CanvasText;
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-selected="true"]:hover,
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-selected="true"]:focus-within,
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="active"]:hover,
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="active"]:focus-within,
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="presented"]:hover,
+  .cxsi-row.cordisx-nav-row[data-sidebar-item][data-cordisx-route-state="presented"]:focus-within {
+    background: Highlight;
+    color: HighlightText;
+  }
+  .cordisx-navigation-direct-action:hover:not(:disabled),
+  .cordisx-navigation-more-action:hover:not(:disabled),
+  .cordisx-navigation-direct-action[aria-pressed="true"] {
+    background: Canvas;
+    color: CanvasText;
+    outline: 1px solid Highlight;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cordisx-navigation-group-chevron {
+    transition: none;
+  }
+  .cordisx-nav-actions {
+    transition: none;
+  }
+}