@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

package/ux-demo/recipes/recipes.css

@@ -1,453 +0,0 @@
-.kui-recipe {
-  width: 100%;
-  min-width: 0;
-  color: var(--kui-color-text);
-  container-type: inline-size;
-}
-.kui-recipe button {
-  font: inherit;
-}
-.kui-recipe__button {
-  min-height: 2rem;
-  padding: var(--kui-space-xs) var(--kui-space-s);
-  border: 1px solid var(--kui-color-border);
-  border-radius: var(--kui-radius-m);
-  color: var(--kui-color-text);
-  background: var(--kui-color-surface);
-  cursor: pointer;
-}
-.kui-recipe__button[data-primary="true"] {
-  color: var(--kui-color-brand-on-normal);
-  border-color: var(--kui-color-brand-border-normal);
-  background: var(--kui-color-brand-fill-normal);
-}
-.kui-recipe__button:focus-visible {
-  outline: var(--kui-focus-ring);
-  outline-offset: 2px;
-}
-.kui-recipe__surface {
-  min-width: 0;
-  overflow: hidden;
-  border: 1px solid var(--kui-color-border);
-  border-radius: var(--kui-radius-l);
-  background: var(--kui-color-surface);
-  box-shadow: var(--kui-shadow-s);
-}
-.kui-recipe__pane-title {
-  margin: 0;
-  font-size: var(--kui-font-s);
-}
-.kui-recipe__muted {
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-s);
-}
-.kui-recipe__ownership {
-  margin: 0;
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-xs);
-}
-
-.recipe-shell {
-  display: grid;
-  height: min(37rem, 70vh);
-  grid-template-rows: auto minmax(0, 1fr);
-}
-.recipe-shell__body {
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-}
-.recipe-shell__toolbar-actions {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-}
-.recipe-shell__responsive-controls {
-  display: none;
-}
-.recipe-shell__nav,
-.recipe-shell__inspector {
-  min-height: 0;
-  background: var(--kui-color-surface);
-}
-.recipe-shell__nav-list,
-.recipe-shell__inspector-body,
-.recipe-shell__main-body {
-  min-height: 0;
-}
-.recipe-shell__main {
-  display: grid;
-  min-width: 16rem;
-  min-height: 0;
-  flex: 1;
-  grid-template-rows: auto minmax(0, 1fr);
-  background: var(--kui-color-surface-lowered);
-}
-.recipe-shell__cards {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--kui-layout-content-gap);
-}
-.recipe-shell__card {
-  --kui-content-item-border: var(--kui-color-border-quiet);
-  --kui-content-item-background: var(--kui-color-surface);
-}
-
-.recipe-sidebar {
-  display: grid;
-  width: min(22rem, 100%);
-  min-height: 32rem;
-  margin-inline: auto;
-  grid-template-rows: minmax(0, 1fr) auto;
-}
-.recipe-sidebar__body {
-  min-height: 0;
-}
-.recipe-sidebar__footer {
-  border-block-start: 1px solid var(--kui-color-border);
-}
-
-.recipe-header {
-  min-height: 20rem;
-}
-.recipe-header__context {
-  margin: 0;
-}
-
-.recipe-list-detail {
-  display: grid;
-  width: 100%;
-  min-height: 25rem;
-  grid-template-columns: minmax(13rem, 0.8fr) minmax(18rem, 1.4fr);
-}
-.recipe-list-detail__list {
-  border-inline-end: 1px solid var(--kui-color-border);
-}
-.recipe-list-detail__detail {
-  min-width: 0;
-}
-.recipe-list-detail__body {
-  padding-block: var(--kui-layout-item-gap);
-}
-.recipe-list-detail__title {
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-}
-.recipe-list-detail__actions {
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-}
-.recipe-dialog {
-  --spacing: 0;
-  --width: min(62rem, calc(100vw - 2rem));
-}
-.kui-recipe__heading-summary {
-  min-width: 0;
-  margin: 0 var(--kui-layout-inline-margin, remify(8px));
-  overflow: hidden;
-  color: var(--kui-color-text-quiet);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.recipe-form {
-  width: min(38rem, 100%);
-  margin-inline: auto;
-  padding-block: var(--kui-layout-item-gap);
-}
-.recipe-form__section {
-  display: grid;
-  min-width: 0;
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-  gap: var(--kui-layout-item-gap);
-}
-.recipe-form__fields {
-  align-content: start;
-}
-.recipe-form__fields wa-input::part(form-control-label),
-.recipe-form__fields wa-input::part(hint),
-.recipe-form__fields wa-textarea::part(form-control-label),
-.recipe-form__fields wa-textarea::part(hint),
-.recipe-form__fields .kui-select::part(form-control-label) {
-  padding-inline: remify(8px);
-}
-.recipe-form__fields wa-textarea::part(textarea) {
-  padding-inline: remify(8px);
-}
-.recipe-form__footer {
-  align-content: start;
-}
-
-.recipe-list {
-  display: grid;
-  min-height: 27rem;
-  grid-template-rows: auto minmax(0, 1fr);
-}
-.recipe-list__body {
-  min-height: 0;
-}
-.recipe-list__items {
-  display: grid;
-  margin: 0 var(--kui-layout-inline-margin);
-  padding: var(--kui-layout-item-padding);
-  border: var(--kui-layout-item-border-width) solid
-    var(--kui-color-border-quiet);
-  border-radius: var(--kui-layout-rounded-radius);
-  background: var(--kui-color-surface);
-  list-style: none;
-}
-.recipe-list__items li {
-  display: grid;
-  padding: var(--kui-layout-item-padding);
-  border-block-end: 1px solid var(--kui-color-border-quiet);
-  gap: var(--kui-layout-metadata-gap);
-}
-.recipe-list__items li:last-child {
-  border-block-end: 0;
-}
-
-.recipe-compact-toolbar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kui-layout-content-gap);
-}
-.recipe-compact-toolbar__guide {
-  /* Span the toolbar's full width instead of the 8px content-item inset — under a
-     full-bleed toolbar/divider the inset read as the boxes floating too far in. */
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-inline: 0;
-  gap: var(--kui-layout-control-gap);
-}
-.recipe-compact-toolbar__guide > div {
-  padding: var(--kui-layout-item-padding);
-  border: var(--kui-layout-item-border-width) solid
-    var(--kui-color-border-quiet);
-  border-radius: var(--kui-layout-rounded-radius);
-}
-.recipe-compact-toolbar__guide strong,
-.recipe-compact-toolbar__guide span {
-  display: block;
-}
-
-@container (max-width: 44rem) {
-  .recipe-shell__inspector-region {
-    display: none;
-  }
-  .recipe-shell__responsive-controls {
-    display: inline-flex;
-  }
-  .recipe-shell[data-responsive-pane="inspector"] .recipe-shell__nav-region,
-  .recipe-shell[data-responsive-pane="inspector"] .recipe-shell__main {
-    display: none;
-  }
-  .recipe-shell[data-responsive-pane="inspector"]
-    .recipe-shell__inspector-region {
-    display: flex;
-    min-width: 0;
-    flex: 1;
-  }
-  .recipe-shell[data-responsive-pane="inspector"]
-    .recipe-shell__inspector-region
-    .kui-resizable-region {
-    width: 100%;
-    flex: 1;
-  }
-  .recipe-shell[data-responsive-pane="inspector"]
-    .recipe-shell__inspector-region
-    .kui-resizable-region__handle {
-    display: none;
-  }
-  .recipe-shell__responsive-controls [data-recipe-command="show-navigation"] {
-    display: none;
-  }
-  .recipe-shell__cards,
-  .recipe-compact-toolbar__guide {
-    grid-template-columns: 1fr 1fr;
-  }
-  .recipe-list-detail {
-    grid-template-columns: 1fr;
-  }
-  .recipe-list-detail__list {
-    border-inline-end: 0;
-    border-block-end: 1px solid var(--kui-color-border);
-  }
-  .recipe-compact-toolbar .kui-toolbar {
-    height: auto;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "leading" "center" "trailing";
-    row-gap: var(--kui-toolbar-gap);
-  }
-  .recipe-compact-toolbar .kui-toolbar__leading {
-    grid-area: leading;
-    padding-inline-end: 0;
-  }
-  .recipe-compact-toolbar .kui-toolbar__center {
-    grid-area: center;
-  }
-  .recipe-compact-toolbar .kui-toolbar__trailing {
-    grid-area: trailing;
-    justify-content: flex-start;
-  }
-  .recipe-compact-toolbar .kui-toolbar__trailing > .kui-control-cluster {
-    width: 100%;
-  }
-  .recipe-compact-toolbar .kui-toolbar__trailing wa-select {
-    min-width: min(12rem, 100%);
-    flex: 1 1 12rem;
-  }
-}
-
-@container (max-width: 28rem) {
-  .recipe-shell__nav-region {
-    display: none;
-  }
-  .recipe-shell[data-responsive-pane="navigation"] .recipe-shell__main,
-  .recipe-shell[data-responsive-pane="navigation"]
-    .recipe-shell__inspector-region {
-    display: none;
-  }
-  .recipe-shell[data-responsive-pane="navigation"] .recipe-shell__nav-region {
-    display: flex;
-    min-width: 0;
-    flex: 1;
-  }
-  .recipe-shell[data-responsive-pane="navigation"]
-    .recipe-shell__nav-region
-    .kui-resizable-region {
-    width: 100%;
-    flex: 1;
-  }
-  .recipe-shell[data-responsive-pane="navigation"]
-    .recipe-shell__nav-region
-    .kui-resizable-region__handle {
-    display: none;
-  }
-  .recipe-shell__responsive-controls [data-recipe-command="show-navigation"] {
-    display: grid;
-  }
-  .recipe-shell__cards,
-  .recipe-compact-toolbar__guide {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (forced-colors: active) {
-  .recipe-form__section {
-    border-color: Canvas;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .kui-recipe *,
-  .kui-recipe *::before,
-  .kui-recipe *::after {
-    scroll-behavior: auto !important;
-    animation-duration: 1ms !important;
-    transition-duration: 1ms !important;
-  }
-}
-
-.recipe-navstack {
-  display: flex;
-  width: min(28rem, 100%);
-  margin-inline: auto;
-  flex-direction: column;
-}
-.recipe-navstack__stage {
-  height: 24rem;
-}
-.recipe-navstack__view {
-  /* The view is a .kui-content stack whose rows own their 8px margins; add only a
-     little block breathing room, not an inline pad that would double-inset them. */
-  padding-block: var(--kui-space-2xs);
-}
-
-.recipe-inspector {
-  width: min(remify(560px), 100%);
-}
-
-/* The bare Select + SegmentedControl carry no content-item geometry, so inset
-   them to the shared inline margin to line up with the ValueTable / list / banner
-   content-items, and group the two related controls closer than the 24px
-   between-region content gap. */
-.recipe-inspector__controls {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-  gap: var(--kui-space-s);
-}
-
-/* Collapsible-sidebar recipe: a mini app frame with a left rail (CollapsiblePanel)
-   full-height at the leading edge, the main pane, and a bottom drawer under it.
-   `contain: paint` bounds the wire's compact overlay (a viewport-`fixed` panel +
-   backdrop) to this frame so the embedded demo does not cover the whole catalog. */
-.recipe-collapsible-sidebar {
-  display: grid;
-  height: min(34rem, 70vh);
-  contain: paint;
-  grid-template-areas:
-    "rail main"
-    "rail drawer";
-  grid-template-columns: auto minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr) auto;
-}
-.recipe-collapsible-sidebar__rail {
-  grid-area: rail;
-  display: flex;
-  min-height: 0;
-  flex-direction: column;
-}
-.recipe-collapsible-sidebar__rail-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--kui-space-2xs) var(--kui-layout-inline-margin, remify(8px));
-  border-block-end: 1px solid var(--kui-color-border);
-}
-.recipe-collapsible-sidebar__nav {
-  min-height: 0;
-}
-.recipe-collapsible-sidebar__main {
-  display: grid;
-  grid-area: main;
-  min-width: 0;
-  min-height: 0;
-  grid-template-rows: auto minmax(0, 1fr);
-  background: var(--kui-color-surface-lowered);
-}
-.recipe-collapsible-sidebar__body {
-  min-height: 0;
-}
-.recipe-collapsible-sidebar__card strong {
-  display: block;
-}
-.recipe-collapsible-sidebar__drawer {
-  grid-area: drawer;
-  display: flex;
-  min-height: 0;
-  flex-direction: column;
-}
-.recipe-collapsible-sidebar__drawer-body {
-  min-height: 0;
-}
-.recipe-collapsible-sidebar__log {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  margin: 0;
-  margin-inline: var(--kui-layout-inline-margin, remify(8px));
-  padding: 0;
-  list-style: none;
-  gap: var(--kui-space-xs);
-}
-.recipe-collapsible-sidebar__log li {
-  display: flex;
-  align-items: center;
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-s);
-  gap: var(--kui-space-xs);
-}
-.recipe-collapsible-sidebar__log svg {
-  width: remify(16px);
-  height: remify(16px);
-}