@lynn123411/dsh-model-submenu 0.3.5 → 0.3.10

package/src/client/ModelSubmenu.module.css

@@ -1,509 +0,0 @@
-/*
- * The composer model seat and the picker it opens. The menu surface renders
- * through the primitives' MenuSurface and the dialog through Modal, so neither
- * this file paints a floating fill — it only places content on the surfaces
- * those two own.
- */
-
-.root {
-  min-width: 0;
-  position: relative;
-  display: flex;
-}
-
-/* The Models glyph replaces the text when the composer row cannot fit it; the
- * row owns both variables, so this plugin follows the same compact contract as
- * the built-in occupant. */
-.trigger {
-  min-width: 0;
-  max-width: min(360px, 45cqw);
-  height: 28px;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 24px;
-  outline: none;
-  align-items: center;
-  gap: 4px;
-  padding: 0 4px 0 8px;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 20px;
-  display: flex;
-}
-
-.trigger:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.trigger:focus-visible {
-  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
-}
-
-.trigger:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-}
-
-.triggerLabel {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  overflow: hidden;
-  display: var(--dsh-composer-model-text-display, block);
-}
-
-/* The effort caption is the accent the reference UI uses to say "this is the
- * thinking level in force"; it carries no extra meaning of its own. */
-.triggerEffort {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  color: var(--dsw-alias-state-business-primary);
-  flex-shrink: 1000;
-  overflow: hidden;
-  display: var(--dsh-composer-model-text-display, block);
-}
-
-.triggerIcon {
-  flex: 0 0 auto;
-  display: var(--dsh-composer-model-icon-display, none);
-}
-
-.triggerBadge {
-  flex: none;
-  margin-inline-end: 4px;
-}
-
-.rowBadge {
-  flex: none;
-  margin-inline-start: 6px;
-}
-
-.chevron {
-  color: var(--dsw-alias-label-caption);
-  flex: none;
-  transition: transform .12s;
-}
-
-.chevronOpen {
-  transform: rotate(180deg);
-}
-
-.menu {
-  z-index: 1100;
-  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
-  /* A fixed width keeps the card independent of the trigger's text length, so
-   * opening the menu never reflows the composer. */
-  box-sizing: border-box;
-  width: min(252px, calc(100vw - 24px));
-  max-height: var(--dsh-anchored-max-height, min(70vh, calc(100vh - 96px)));
-  box-shadow: var(--dsw-elevation-prominent);
-  color: var(--dsw-alias-label-primary);
-  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
-  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
-  border: 0;
-  flex-direction: column;
-  padding: 4px;
-  display: flex;
-  position: fixed;
-  overflow: hidden;
-}
-
-/* The provider name is a heading, not a control: it says which provider's
- * models the list below belongs to. */
-.providerName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-height: 24px;
-  color: var(--dsw-alias-label-tertiary);
-  align-items: center;
-  padding: 3px 8px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  overflow: hidden;
-  display: flex;
-}
-
-.groups {
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.row {
-  align-items: center;
-  gap: 2px;
-  display: flex;
-}
-
-.rowPick {
-  box-sizing: border-box;
-  /* A slightly tighter side padding buys the name a few more characters, which
-   * is what keeps a long provider suffix readable inside a narrow card. */
-  padding-inline: 6px;
-  /* The scroll list is a block container, so a flex item's `flex: 1` does
-   * nothing here: the row must claim the full width or a long model name pushes
-   * the favorite mark and the check past the card's edge, where overflow clips
-   * them. */
-  width: 100%;
-  flex: 1;
-  min-width: 0;
-  min-height: 34px;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 10px;
-  outline: none;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 7px;
-  display: flex;
-}
-
-.rowPick:hover:not(:disabled),
-.rowPick:focus-visible {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.rowPick:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-}
-
-.rowCopy {
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-}
-
-.rowName {
-  color: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11.5px;
-  font-weight: 400;
-  line-height: 17px;
-  overflow: hidden;
-}
-
-/* The menu's names carry the weight: at this size a regular face reads thin
- * against the card. The picker's rows keep theirs regular — there the metadata
- * line already separates the rows. */
-.menu .rowName {
-  font-weight: 600;
-}
-
-.rowMeta {
-  color: var(--dsw-alias-label-tertiary);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.check {
-  color: var(--dsw-alias-label-primary);
-  flex: 0 0 15px;
-  place-items: center;
-  display: grid;
-}
-
-/* The menu's favorite mark: it lives inside the row button, so hovering it
- * highlights the row and clicking it picks the model — no separate hit area. */
-.starStatic {
-  color: var(--dsw-alias-state-warn-primary);
-  flex: none;
-  place-items: center;
-  width: 14px;
-  display: grid;
-}
-
-/* The picker's star is a real control: outline until hover or focus, solid and
- * gold once favorited, and visible without hover on touch screens. */
-.starButton {
-  color: var(--dsw-alias-label-tertiary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 8px;
-  outline: none;
-  flex: none;
-  place-items: center;
-  width: 26px;
-  height: 26px;
-  display: grid;
-  opacity: 0;
-}
-
-.starButton:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l3);
-}
-
-.row:hover .starButton,
-.row:focus-within .starButton {
-  opacity: 1;
-}
-
-.starButton[aria-pressed='true'] {
-  color: var(--dsw-alias-state-warn-primary);
-  opacity: 1;
-}
-
-@media (hover: none) {
-  .starButton {
-    opacity: 1;
-  }
-}
-
-.star {
-  flex: none;
-}
-
-.divider {
-  height: .5px;
-  background: var(--dsw-alias-border-l2);
-  flex: none;
-  margin: 3px 2px;
-}
-
-.effortRow {
-  align-items: center;
-  gap: 6px;
-  padding: 3px 6px;
-  display: flex;
-}
-
-.effortHeading {
-  color: var(--dsw-alias-label-primary);
-  flex: none;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-/* The segments scroll sideways rather than wrap, so the row keeps one height
- * however many levels a model advertises. */
-.effortTrack {
-  background: var(--dsw-alias-interactive-bg-hover);
-  border-radius: 999px;
-  align-items: center;
-  gap: 1px;
-  min-width: 0;
-  margin-left: auto;
-  padding: 2px;
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.effortTrack::-webkit-scrollbar {
-  display: none;
-}
-
-.effortSegment {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 999px;
-  outline: none;
-  flex: none;
-  padding: 2px 7px;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.effortSegment:hover:not(:disabled) {
-  color: var(--dsw-alias-label-primary);
-}
-
-.effortSegment[aria-checked='true'] {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-layer-1);
-  box-shadow: var(--dsw-elevation-soft);
-  font-weight: 600;
-}
-
-.effortSegment:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-}
-
-.effortSegment:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l3);
-  outline-offset: -2px;
-}
-
-.hint {
-  color: var(--dsw-alias-label-tertiary);
-  margin: 0;
-  padding: 6px 8px;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.moreRow {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 10px;
-  outline: none;
-  align-items: center;
-  gap: 6px;
-  min-height: 32px;
-  padding: 5px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  display: flex;
-}
-
-.moreRow:hover,
-.moreRow:focus-visible {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.moreIcon {
-  color: var(--dsw-alias-label-tertiary);
-  flex: none;
-}
-
-.notice {
-  color: var(--dsw-alias-label-tertiary);
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 6px 10px;
-  font-size: 12px;
-  line-height: 18px;
-  display: flex;
-}
-
-.retry {
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  flex: none;
-  padding: 0;
-  font-weight: 600;
-  text-decoration: underline;
-}
-
-/* ── the picker dialog ───────────────────────────────────────────────────── */
-
-.pickerDialog {
-  width: min(680px, 100%);
-  height: min(640px, 80vh);
-  gap: 0;
-  padding: 0;
-}
-
-.pickerContent {
-  min-height: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Modal wraps children in a body row of its own; that row — the content
- * region's last child — is what has to carry the column and give the list its
- * remaining height, so the footer stays put while the list scrolls. */
-.pickerContent > :last-child {
-  min-height: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.pickerSearch {
-  padding: 0 20px 12px;
-}
-
-.pickerSearchInput {
-  width: 100%;
-}
-
-/* The tabs scroll sideways rather than wrap: the dialog keeps one row of
- * providers however many the catalog has, so the list below starts at the same
- * height every time. The bar keeps its hairline and hides its scrollbar the way
- * the effort track does. */
-.pickerTabs {
-  border-bottom: .5px solid var(--dsw-alias-border-l2);
-  gap: 2px;
-  padding: 0 16px;
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-}
-
-.pickerTabs::-webkit-scrollbar {
-  display: none;
-}
-
-.pickerTab {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 8px;
-  outline: none;
-  flex: none;
-  padding: 6px 10px;
-  font-size: 13px;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.pickerTab:hover {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.pickerTab[aria-selected='true'] {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-  font-weight: 600;
-}
-
-.pickerTab:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l3);
-}
-
-.pickerList {
-  min-height: 0;
-  flex: 1;
-  padding: 8px 12px;
-  overflow-y: auto;
-}
-
-.pickerFooter {
-  border-top: .5px solid var(--dsw-alias-border-l2);
-  color: var(--dsw-alias-label-tertiary);
-  align-items: center;
-  gap: 6px;
-  padding: 10px 20px;
-  font-size: 12px;
-  line-height: 18px;
-  display: flex;
-}
-
-.footerHint {
-  align-items: center;
-  gap: 6px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.footerDot {
-  color: var(--dsw-alias-label-dimmed);
-}