@qeetrix/react 0.0.2 → 0.0.4

package/dist/css/experimental/sidebar.css

@@ -0,0 +1,234 @@
+@import "../base.css";
+@import "../button.css";
+@import "./app-shell.css";
+@import "../input.css";
+@import "../tooltip.css";
+
+@layer qx.components {
+  .qx-sidebar {
+    block-size: 100%;
+    min-block-size: 0;
+    color: var(--qx-color-text-default);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-sidebar-header {
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-md) var(--qx-space-inset-lg) var(--qx-space-gap-xs);
+    flex-direction: column;
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-sidebar-title {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    color: var(--qx-color-text-default);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar-empty {
+    padding: var(--qx-space-gap-sm) var(--qx-space-inset-lg);
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-sidebar-empty:empty {
+    display: none;
+  }
+  
+  .qx-sidebar-group:not(:has(.qx-sidebar-entry)) {
+    display: none;
+  }
+  
+  .qx-sidebar-nav {
+    min-block-size: 0;
+    padding-block: var(--qx-space-gap-sm) var(--qx-space-inset-md);
+    flex: 1;
+    overflow: hidden auto;
+  }
+  
+  .qx-sidebar-footer {
+    padding-block: var(--qx-space-gap-xs);
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    flex: none;
+  }
+  
+  .qx-sidebar-group + .qx-sidebar-group {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    margin-block-start: var(--qx-space-gap-sm);
+    padding-block-start: var(--qx-space-inset-md);
+  }
+  
+  .qx-sidebar-group-label {
+    padding: 0 var(--qx-space-inset-lg) 6px;
+    font: var(--qx-typography-label-caps);
+    letter-spacing: var(--qx-typography-label-caps-letter-spacing);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtlest);
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  
+  .qx-sidebar-group-label:is(:lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(or), :lang(ta), :lang(te), :lang(kn), :lang(ml)) {
+    letter-spacing: 0;
+  }
+  
+  .qx-sidebar-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  
+  .qx-sidebar-item {
+    inline-size: 100%;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-lg) var(--qx-space-inset-md);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-sidebar-item:hover {
+    background: var(--qx-color-overlay-hover);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-sidebar-item[data-current] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+    color: var(--qx-color-text-default);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+  }
+  
+  .qx-sidebar-item[data-current]:before {
+    content: "";
+    inline-size: var(--qx-border-width-accent);
+    background: var(--qx-color-border-brand);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  
+  .qx-sidebar-item:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-sidebar-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [data-current] > .qx-sidebar-icon {
+    color: var(--qx-color-icon-brand);
+  }
+  
+  .qx-sidebar-icon-filled, .qx-sidebar-item[data-current]:has( > .qx-sidebar-icon-filled) > .qx-sidebar-icon-outline {
+    display: none;
+  }
+  
+  .qx-sidebar-item[data-current] > .qx-sidebar-icon-filled {
+    display: block;
+  }
+  
+  .qx-sidebar-label {
+    text-overflow: ellipsis;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar-badge {
+    font: var(--qx-typography-label-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--qx-color-text-subtlest);
+    flex: none;
+    display: inline-flex;
+  }
+  
+  .qx-sidebar-chevron {
+    color: var(--qx-color-icon-subtle);
+    transition-property: rotate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+  }
+  
+  [data-open] > .qx-sidebar-chevron {
+    rotate: 180deg;
+  }
+  
+  .qx-sidebar-sublist .qx-sidebar-item {
+    font-weight: var(--qx-typography-body-md-font-weight);
+    padding-inline-start: calc(var(--qx-space-inset-lg) + 16px + 10px);
+  }
+  
+  .qx-sidebar-sublist .qx-sidebar-item[data-current] {
+    font-weight: var(--qx-typography-title-sm-font-weight);
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-header {
+    visibility: hidden;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-rail-search {
+    visibility: visible;
+    position: absolute;
+    inset-block-end: var(--qx-space-gap-xs);
+    inset-inline-start: 50%;
+    translate: -50%;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-group-label {
+    visibility: hidden;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-label {
+    clip-path: inset(50%);
+    block-size: 1px;
+    inline-size: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-badge, .qx-sidebar[data-rail] .qx-sidebar-chevron {
+    display: none;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-sidebar-footer, .qx-sidebar-group + .qx-sidebar-group {
+      border-color: canvastext;
+    }
+  
+    .qx-sidebar-item[data-current] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+    }
+  
+    .qx-sidebar-item[data-current] .qx-sidebar-icon {
+      color: highlighttext;
+    }
+  }
+}

package/dist/css/experimental/stat.css

@@ -0,0 +1,115 @@
+@import "../base.css";
+
+@layer qx.components {
+  .qx-stat-group {
+    color: var(--qx-color-text-default);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
+    margin: 0;
+    display: grid;
+  }
+  
+  .qx-stat {
+    align-content: start;
+    column-gap: var(--qx-space-gap-md);
+    min-inline-size: 0;
+    padding: var(--qx-space-inset-md) var(--qx-space-inset-lg);
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+  
+  .qx-stat:first-child {
+    padding-inline-start: var(--qx-stat-group-inset, var(--qx-space-inset-lg));
+  }
+  
+  .qx-stat:last-child {
+    padding-inline-end: var(--qx-stat-group-inset, var(--qx-space-inset-lg));
+  }
+  
+  .qx-stat + .qx-stat {
+    border-inline-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+  }
+  
+  .qx-stat-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    grid-column: 1 / -1;
+  }
+  
+  .qx-stat-value {
+    margin: var(--qx-space-gap-xs) 0 0;
+    font: var(--qx-typography-heading-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    font-variant-numeric: tabular-nums;
+    grid-column: 1;
+  }
+  
+  .qx-stat-trend-cell {
+    grid-area: 2 / 2;
+    align-items: flex-end;
+    margin: 0;
+    padding-block-end: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-stat-trend {
+    block-size: 28px;
+    inline-size: 88px;
+    overflow: visible;
+  }
+  
+  .qx-stat-trend-line {
+    fill: none;
+    stroke: var(--qx-color-icon-subtle);
+    stroke-width: var(--qx-icon-stroke-thin);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  
+  .qx-stat-trend-area {
+    fill: var(--qx-color-icon-subtle);
+    opacity: .1;
+  }
+  
+  .qx-stat-trend-end {
+    fill: var(--qx-color-border-brand);
+  }
+  
+  .qx-stat-note {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtlest);
+    grid-column: 1 / -1;
+    margin: 2px 0 0;
+  }
+  
+  .qx-stat-note[data-tone="positive"] {
+    color: var(--qx-color-text-success);
+  }
+  
+  .qx-stat-note[data-tone="negative"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-stat-note[data-tone="warning"] {
+    color: var(--qx-color-text-warning);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-stat + .qx-stat {
+      border-inline-start-color: canvastext;
+    }
+  
+    .qx-stat-trend-line {
+      stroke: canvastext;
+    }
+  
+    .qx-stat-trend-area {
+      fill: canvastext;
+    }
+  
+    .qx-stat-trend-end {
+      fill: highlight;
+    }
+  }
+}

package/dist/css/experimental/top-bar.css

@@ -0,0 +1,299 @@
+@import "../base.css";
+@import "../button.css";
+@import "./app-shell.css";
+
+@layer qx.components {
+  .qx-top-bar {
+    align-items: stretch;
+    column-gap: var(--qx-space-gap-lg);
+    block-size: calc(var(--qx-size-control-lg) + 16px);
+    border-block-start: var(--qx-border-width-strong) solid var(--qx-color-border-brand);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    background: var(--qx-color-surface-sunken);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    grid-template-columns: minmax(max-content, 1fr) auto;
+    padding-inline-end: var(--qx-space-inset-md);
+    display: grid;
+  }
+  
+  .qx-top-bar[data-search] {
+    grid-template-columns: minmax(max-content, 1fr) minmax(240px, 480px) minmax(max-content, 1fr);
+  }
+  
+  .qx-top-bar-start, .qx-top-bar-end {
+    align-items: center;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-end {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-top-bar-cell {
+    aspect-ratio: 1;
+    border-inline-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex: none;
+    align-self: stretch;
+    place-items: center;
+    display: grid;
+  }
+  
+  .qx-top-bar-identity {
+    align-self: stretch;
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    padding-inline: var(--qx-space-inset-lg) var(--qx-space-inset-sm);
+    color: var(--qx-color-text-default);
+    white-space: nowrap;
+    flex: none;
+    text-decoration: none;
+    display: flex;
+  }
+  
+  .qx-top-bar-identity:hover {
+    background: var(--qx-color-overlay-hover);
+  }
+  
+  .qx-top-bar-identity:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-product {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+  }
+  
+  .qx-top-bar-slash {
+    inline-size: var(--qx-border-width-default);
+    block-size: 16px;
+    margin-inline: var(--qx-space-gap-sm);
+    background: var(--qx-color-border-strong);
+    flex: none;
+    rotate: 20deg;
+  }
+  
+  [dir="rtl"] .qx-top-bar-slash {
+    rotate: -20deg;
+  }
+  
+  .qx-top-bar-switcher {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    min-inline-size: 0;
+    block-size: var(--qx-size-control-md);
+    padding-inline: var(--qx-space-inset-sm);
+    border-radius: var(--qx-radius-control);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-switcher:hover, .qx-top-bar-switcher[data-popup-open] {
+    background: var(--qx-color-overlay-hover);
+  }
+  
+  .qx-top-bar-switcher:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-switcher-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-mark {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-overlay-pressed);
+    block-size: 20px;
+    inline-size: 20px;
+    font: var(--qx-typography-label-sm);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    flex: none;
+    place-items: center;
+    display: grid;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-status {
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-icon-subtle);
+    flex: none;
+    block-size: 8px;
+    inline-size: 8px;
+  }
+  
+  .qx-top-bar-status[data-status="success"] {
+    background: var(--qx-color-bg-success-bold);
+  }
+  
+  .qx-top-bar-status[data-status="info"] {
+    background: var(--qx-color-bg-info-bold);
+  }
+  
+  .qx-top-bar-status[data-status="warning"] {
+    background: var(--qx-color-bg-warning-bold);
+  }
+  
+  .qx-top-bar-status[data-status="danger"] {
+    background: var(--qx-color-bg-danger-bold);
+  }
+  
+  .qx-top-bar-caret {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-top-bar-search {
+    align-items: center;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-search-trigger {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    inline-size: 100%;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-sm) var(--qx-space-gap-xs);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-control);
+    background: var(--qx-color-overlay-hover);
+    color: var(--qx-color-text-subtlest);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    cursor: pointer;
+    transition-property: background-color, border-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    display: flex;
+  }
+  
+  .qx-top-bar-search-trigger:hover {
+    border-color: var(--qx-color-border-strong);
+    background: var(--qx-color-overlay-pressed);
+  }
+  
+  .qx-top-bar-search-trigger:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-search-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-top-bar-search-text {
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-keys {
+    flex: none;
+    gap: 2px;
+    display: flex;
+  }
+  
+  .qx-top-bar-key {
+    block-size: 20px;
+    min-inline-size: 20px;
+    padding-inline: var(--qx-space-gap-xs);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-sm);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    place-items: center;
+    display: grid;
+  }
+  
+  .qx-top-bar-tools {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-top-bar-tool {
+    position: relative;
+  }
+  
+  .qx-top-bar-tool > [aria-pressed="true"] {
+    background: var(--qx-color-overlay-pressed);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-top-bar-tool[data-badge]:after {
+    content: "";
+    border: var(--qx-border-width-strong) solid var(--qx-color-surface-sunken);
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-icon-brand);
+    pointer-events: none;
+    block-size: 10px;
+    inline-size: 10px;
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-end: 3px;
+  }
+  
+  .qx-top-bar-rule {
+    inline-size: var(--qx-border-width-default);
+    block-size: 20px;
+    margin-inline: var(--qx-space-gap-sm);
+    background: var(--qx-color-border-subtle);
+    flex: none;
+  }
+  
+  @media (width < 840px) {
+    .qx-top-bar, .qx-top-bar[data-search] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+  
+    .qx-top-bar-search {
+      display: none;
+    }
+  }
+  
+  @media (forced-colors: active) {
+    .qx-top-bar {
+      border-block-end-color: canvastext;
+    }
+  
+    .qx-top-bar-cell {
+      border-inline-end-color: canvastext;
+    }
+  
+    .qx-top-bar-slash, .qx-top-bar-rule {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  
+    .qx-top-bar-status, .qx-top-bar-tool[data-badge]:after {
+      forced-color-adjust: none;
+      background: highlight;
+    }
+  
+    .qx-top-bar-search-trigger, .qx-top-bar-key {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/css/input.css

@@ -95,4 +95,14 @@
   .qx-textarea[data-max-rows] {
     max-block-size: calc(var(--qx-textarea-max-rows) * 1lh + var(--qx-size-control-lg) - 1lh);
   }
+  
+  @media (forced-colors: active) {
+    .qx-input {
+      border: var(--qx-border-width-default) solid FieldText;
+    }
+  
+    .qx-input:has( > .qx-input-control:disabled), .qx-textarea:disabled {
+      border-color: graytext;
+    }
+  }
 }

package/dist/css/menu.css

@@ -146,4 +146,21 @@
     background: var(--qx-color-border-subtle);
     margin-block: 4px;
   }
+  
+  @media (forced-colors: active) {
+    .qx-menu-item[data-highlighted] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+    }
+  
+    .qx-menu-item[data-highlighted] .qx-menu-item-icon, .qx-menu-item[data-highlighted] .qx-menu-submenu-icon {
+      color: highlighttext;
+    }
+  
+    .qx-menu-separator {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
 }

package/dist/css/progress.css

@@ -85,4 +85,18 @@
       opacity: .35;
     }
   }
+  
+  @media (forced-colors: active) {
+    .qx-progress-track, .qx-progress-indicator {
+      forced-color-adjust: none;
+    }
+  
+    .qx-progress-track {
+      background: graytext;
+    }
+  
+    .qx-progress-indicator {
+      background: highlight;
+    }
+  }
 }

package/dist/css/scroll-area.css

@@ -60,4 +60,11 @@
   .qx-scroll-area-thumb:hover, .qx-scroll-area-thumb:active {
     background: var(--qx-color-icon-subtle);
   }
+  
+  @media (forced-colors: active) {
+    .qx-scroll-area-thumb {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
 }