@threadlabs/looma 0.11.0 → 0.11.2

package/components/ui-action-bar/ui-action-bar.html

@@ -0,0 +1,72 @@
+<template component="ui-action-bar">
+  <div>
+    <!-- Source order is tertiary, secondary, primary: the order the row reads in, so reading and focus
+         order match what a wide bar shows (WCAG 1.3.2, 2.4.3), and they stay the same at every width. -->
+    <div class="bar">
+      <span class="tertiary"><slot name="tertiary"></slot></span>
+      <span class="secondary"><slot name="secondary"></slot><slot></slot></span>
+      <span class="primary"><slot name="primary"></slot></span>
+    </div>
+  </div>
+  <style>
+    /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
+       edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
+       row. The bar arranges its actions and leaves their look to them. */
+    :host {
+      --_gap: var(--ui-space-2);
+      display: block;
+      /* A size container sizes itself from its container, never its content. */
+      container-type: inline-size;
+      inline-size: 100%;
+      min-inline-size: 0;
+    }
+
+    .bar,
+    .tertiary,
+    .secondary,
+    .primary {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-action-bar-gap, var(--_gap));
+    }
+
+    /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
+       rest still ends the row. */
+    .bar {
+      justify-content: flex-end;
+    }
+
+    .tertiary {
+      flex: 1 1 auto;
+    }
+
+    .tertiary:empty,
+    .secondary:empty,
+    .primary:empty {
+      display: none;
+    }
+
+    /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
+       read from its end edge. Container queries cannot read custom properties, so the width is fixed. */
+    @container (inline-size < 24rem) {
+      .bar,
+      .tertiary,
+      .secondary,
+      .primary {
+        flex-direction: column-reverse;
+        flex-wrap: nowrap;
+        align-items: stretch;
+      }
+
+      .tertiary {
+        flex: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-input/ui-input.html

@@ -19,9 +19,9 @@
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-input-radius, var(--ui-radius-md));
-      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);
@@ -44,11 +44,11 @@
     }
 
     :host:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+      border-color: var(--ui-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
 
     :host:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
       outline: none;
       box-shadow: var(--ui-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
     }

package/components/ui-input-group/ui-input-group.html

@@ -0,0 +1,86 @@
+<template component="ui-input-group">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">Fades the group's framing to match a disabled input inside it. Disable the input itself too.</prop>
+  </defs>
+  <div>
+    <span class="affix"><slot name="prefix"></slot></span>
+    <span class="field"><slot></slot></span>
+    <span class="affix"><slot name="suffix"></slot></span>
+  </div>
+  <style>
+    /* An input with fixed text before or after it, such as a domain after a site's name
+       ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+       focus ring around the input and its affixes together; the input inside drops its own through
+       its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+       affixes are plain text beside the input, so name the input with a label that says what the
+       whole value is. */
+    :host {
+      --ui-input-border: transparent;
+      --ui-input-border-hover: transparent;
+      --ui-input-focus-border: transparent;
+      --ui-input-shadow: none;
+      --ui-input-focus-shadow: none;
+      --ui-input-radius: 0;
+      --ui-input-surface: transparent;
+
+      display: flex;
+      align-items: stretch;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-md);
+      background: var(--ui-surface-elevated);
+      box-shadow: var(--ui-control-inset);
+      overflow: hidden;
+      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :host:hover:not(:focus-within) {
+      border-color: var(--ui-text-secondary);
+    }
+
+    :host:focus-within {
+      border-color: var(--ui-accent-solid);
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+
+    :host:has([aria-invalid="true"], :user-invalid) {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :host-state([disabled]) {
+      background: var(--ui-surface-muted);
+      box-shadow: none;
+    }
+
+    .field {
+      display: flex;
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .affix {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      padding-inline: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-family: var(--ui-font-family-mono);
+      font-size: var(--ui-font-size-sm);
+      white-space: nowrap;
+    }
+
+    .affix:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-list/ui-list.html

@@ -3,6 +3,9 @@
     <prop name="layout" type="rows | grid" default="rows"
     >How the items are laid out. Rows stack the items one per line, for a list read top to bottom. Grid sets them in as many columns as fit, each at least
       --ui-list-min-item-width (14rem) wide, for card items such as pinned or featured entries.</prop>
+    <prop name="density" type="comfortable | compact" default="comfortable"
+    >How much room each item takes. comfortable is a full row, easy to point at, for lists of things to open; compact sets items close together with no row
+      padding, for a short list of facts inside other content, such as the features a plan includes.</prop>
   </defs>
   <ul role="list"><slot></slot></ul>
   <style>
@@ -19,6 +22,15 @@
       list-style: none;
     }
 
+    /* Compact passes its size to the items through private properties, which cross into each item. */
+    :host-state([density="compact"]) {
+      --_ui-list-item-min-size: 0;
+      --_ui-list-item-padding-block: 0;
+      --_ui-list-item-padding-inline: 0;
+      --_ui-list-item-title-weight: var(--ui-font-normal);
+      gap: var(--ui-list-gap, var(--ui-space-2));
+    }
+
     :host-state([layout="grid"]) {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));

package/components/ui-list-item/ui-list-item.html

@@ -32,9 +32,9 @@
       align-items: center;
       gap: var(--ui-list-item-gap, var(--ui-space-3));
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size, 2.5rem);
-      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
-      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
+      padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2)));
+      padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3)));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-primary);
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
@@ -104,7 +104,7 @@
 
     .title {
       font-size: var(--ui-font-size-md);
-      font-weight: var(--ui-font-medium);
+      font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
       line-height: var(--ui-line-height-tight);
     }