@threadlabs/looma 0.4.0 → 0.5.1

package/styles/ui-switcher.css

@@ -0,0 +1,61 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_switcher-gap: var(--ui-space-4, 1rem);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ui-switcher-gap, var(--_switcher-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope[data-ui-switcher-state~="gap=xs"] {
+      --_switcher-gap: var(--ui-space-2, 0.5rem);
+    }
+    :scope[data-ui-switcher-state~="gap=s"] {
+      --_switcher-gap: var(--ui-space-3, 0.75rem);
+    }
+    :scope[data-ui-switcher-state~="gap=m"] {
+      --_switcher-gap: var(--ui-space-4, 1rem);
+    }
+    :scope[data-ui-switcher-state~="gap=l"] {
+      --_switcher-gap: var(--ui-space-5, 1.5rem);
+    }
+    :scope[data-ui-switcher-state~="gap=xl"] {
+      --_switcher-gap: var(--ui-space-6, 2rem);
+    }
+    :scope[data-ui-switcher-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope[data-ui-switcher-state~="align=center"] {
+      align-items: center;
+    }
+    :scope[data-ui-switcher-state~="align=end"] {
+      align-items: flex-end;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-switcher"]) to ([data-component]) {
+:scope > :where([data-slotted], [data-slotted] *):is(*) {
+      min-inline-size: 0;
+      flex-grow: 1;
+      /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
+      flex-basis: calc((var(--ui-switcher-threshold, 30rem) - 100%) * 999);
+    }
+    :scope[data-ui-switcher-state~="threshold=xs"] > :where([data-slotted], [data-slotted] *):is(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
+    }
+    :scope[data-ui-switcher-state~="threshold=md"] > :where([data-slotted], [data-slotted] *):is(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
+    }
+    :scope[data-ui-switcher-state~="threshold=lg"] > :where([data-slotted], [data-slotted] *):is(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-tabs.css

@@ -0,0 +1,114 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: grid;
+      inline-size: 100%;
+      min-inline-size: 0;
+    }
+
+    .list {
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: max-content;
+      justify-content: start;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
+      overflow-x: auto;
+      /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
+         strip or the page vertically. */
+      overflow-y: hidden;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    .list button {
+      min-block-size: 2.5rem;
+      margin: 0 0 -1px;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 0;
+      border-block-end: 2px solid transparent;
+      background: transparent;
+      color: var(--ui-text-secondary);
+      font: inherit;
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium, 500);
+      cursor: pointer;
+      transition:
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope[data-ui-tabs-state~="stretch"] .list {
+      grid-auto-columns: minmax(max-content, 1fr);
+    }
+
+    .list button {
+      white-space: nowrap;
+    }
+
+    .list button:hover {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-muted);
+    }
+    .list button[aria-selected="true"] {
+      color: var(--ui-accent-solid);
+      border-block-end-color: var(--ui-accent-solid);
+    }
+    .list button:focus-visible {
+      position: relative;
+      outline: none;
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      border-radius: var(--ui-radius-1);
+    }
+
+    .panels {
+      min-inline-size: 0;
+    }
+
+    :scope[data-ui-tabs-state~="orientation=vertical"] {
+      grid-template-columns: max-content minmax(0, 1fr);
+      align-items: start;
+    }
+
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list {
+      grid-auto-flow: row;
+      grid-auto-columns: auto;
+      border-block-end: 0;
+      border-inline-end: 1px solid var(--ui-border-default);
+    }
+
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list button {
+      margin: 0 -1px 0 0;
+      border-block-end: 0;
+      border-inline-end: 2px solid transparent;
+      text-align: start;
+    }
+
+    :scope[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"] {
+      border-inline-end-color: var(--ui-accent-solid);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .list button {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-tabs"]) to ([data-component]) {
+:where([data-slotted], [data-slotted] *):is(*) {
+      padding: var(--ui-space-4);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-textarea.css

@@ -0,0 +1,77 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-textarea"]) to ([data-component], [data-slotted]) {
+:scope {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: calc(var(--ui-space-12, 3rem) * 2);
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      appearance: none;
+      resize: vertical;
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-textarea-radius, var(--ui-radius-2));
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      color: var(--ui-text-primary);
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-textarea-shadow, var(--ui-control-inset));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+    :scope::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+
+    :scope::placeholder {
+      color: var(--ui-control-placeholder, var(--ui-text-secondary));
+      opacity: 1;
+    }
+
+    :scope:hover:not(:focus):not(:disabled) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+    }
+
+    :scope:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      outline: none;
+      box-shadow: var(--ui-textarea-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :scope[aria-invalid="true"],
+    :scope:is(:user-invalid, [data-user-invalid]) {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    :scope:disabled {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-text-muted);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-textarea"]) to ([data-component]) {
+/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-toast-region.css

@@ -0,0 +1,103 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@keyframes ui-toast-enter {
+      from {
+        opacity: 0;
+        transform: translateY(-1rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+@keyframes ui-toast-exit {
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(0.75rem);
+      }
+    }
+@scope ([data-component~="ui-toast-region"]) to ([data-component], [data-slotted]) {
+:scope {
+      position: fixed;
+      top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9999;
+      display: grid;
+      gap: var(--ui-space-2);
+      inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
+      max-inline-size: 100%;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      box-shadow: none;
+      pointer-events: none;
+    }
+
+    :scope:not(:popover-open) {
+      display: none;
+    }
+
+    .toast {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: var(--ui-space-2);
+      align-items: start;
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-3);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    }
+
+    /* Leaving slides on down and fades; the controller removes the toast when this ends. */
+    .toast.closing {
+      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
+      pointer-events: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .toast, .toast.closing {
+        animation: none;
+      }
+    }
+
+    .message {
+      min-inline-size: 0;
+      align-self: center;
+    }
+
+    .dismiss {
+      align-self: center;
+      margin-inline-end: calc(var(--ui-space-2) * -1);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-toast-region"]) to ([data-component]) {
+:scope > .toast,
+    :scope > :where([data-slotted], [data-slotted] *):is(*) {
+      pointer-events: auto;
+    }
+
+    /* Leaving slides on down and fades; the controller removes the toast when this ends. */
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-tooltip.css

@@ -0,0 +1,113 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-tooltip"]) to ([data-component], [data-slotted]) {
+:scope {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      display: inline-block;
+      box-sizing: border-box;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      /* The UA popover default (overflow: auto) would clip the arrow. */
+      overflow: visible;
+      opacity: 0;
+      transform: translateY(4px);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    .surface {
+      --_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
+      position: relative;
+      box-sizing: border-box;
+      max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
+      border: 1px solid var(--_tooltip-line);
+      border-radius: var(--ui-tooltip-radius, var(--ui-radius-1));
+      background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
+      color: var(--ui-tooltip-text, var(--ui-text-primary));
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+    }
+
+    :scope[data-ui-tooltip-state~="inverse"] .surface {
+      --_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
+      background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
+      color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
+    }
+
+    /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
+     * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
+    .surface::after {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      inset-inline-start: var(--ui-space-3);
+      inset-block-end: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inline-size: var(--ui-tooltip-arrow-size, 0.5rem);
+      block-size: var(--ui-tooltip-arrow-size, 0.5rem);
+      box-sizing: border-box;
+      background: inherit;
+      border: 0 solid var(--_tooltip-line);
+      border-inline-end-width: 1px;
+      border-block-end-width: 1px;
+      border-end-end-radius: 1px;
+      transform: rotate(45deg);
+    }
+
+    :is(:scope[data-ui-tooltip-state~="placement=bottom"], :scope[data-ui-tooltip-state~="placement=bottom-start"], :scope[data-ui-tooltip-state~="placement=bottom-end"]) .surface::after {
+      inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-block-end: auto;
+      border-inline-end-width: 0;
+      border-block-end-width: 0;
+      border-inline-start-width: 1px;
+      border-block-start-width: 1px;
+      border-end-end-radius: 0;
+      border-start-start-radius: 1px;
+    }
+
+    :is(:scope[data-ui-tooltip-state~="placement=top-end"], :scope[data-ui-tooltip-state~="placement=bottom-end"]) .surface::after {
+      inset-inline-start: auto;
+      inset-inline-end: var(--ui-space-3);
+    }
+
+    :scope:popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      :scope:popover-open {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope {
+        transition: none;
+      }
+    }
+}
+@scope ([data-component~="ui-tooltip"]) to ([data-component]) {
+/* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
+     * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
+
+    @starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+}

package/styles/ui-top-bar.css

@@ -0,0 +1,51 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-top-bar"]) to ([data-component], [data-slotted]) {
+:scope {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: var(--ui-top-bar-z-index, 100);
+      min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
+      display: flex;
+      align-items: center;
+      gap: var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));
+      padding-block-start: env(safe-area-inset-top);
+      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left));
+      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right));
+      background: var(--ui-top-bar-bg, var(--ui-surface-elevated));
+      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
+    }
+
+    .leading,
+    .search,
+    .actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .actions {
+      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem));
+    }
+
+    .title {
+      min-inline-size: 0;
+      flex: 1;
+    }
+
+    /* An unused region takes no space, so it adds no gap. */
+    .leading:empty,
+    .search:empty,
+    .actions:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-top-bar"]) to ([data-component]) {
+/* An unused region takes no space, so it adds no gap. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}