@threadlabs/looma 0.32.1 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -82,7 +82,8 @@
       "types": "./editor/expressmark.d.ts",
       "import": "./editor/expressmark.js",
       "default": "./editor/expressmark.js"
-    }
+    },
+    "./theme-system.css": "./theme-system.css"
   },
   "files": [
     "dist/",

package/styles/ui-action-bar.css

@@ -21,7 +21,7 @@
       --_ui-action-bar-gap: var(--ui-action-bar-gap);
 
       --_gap: var(--ui-space-2);
-      display: block;
+      display: block !important;
       /* A size container sizes itself from its container, never its content. */
       container-type: inline-size;
       inline-size: 100%;
@@ -32,16 +32,16 @@
     .tertiary,
     .secondary,
     .primary {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--_ui-action-bar-gap, var(--_gap));
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--_ui-action-bar-gap, var(--_gap)) !important;
     }
 
     /* 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;
+      justify-content: flex-end !important;
     }
 
     .tertiary {
@@ -51,7 +51,7 @@
     .tertiary:empty,
     .secondary:empty,
     .primary:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
@@ -61,9 +61,9 @@
       .tertiary,
       .secondary,
       .primary {
-        flex-direction: column-reverse;
-        flex-wrap: nowrap;
-        align-items: stretch;
+        flex-direction: column-reverse !important;
+        flex-wrap: nowrap !important;
+        align-items: stretch !important;
       }
 
       .tertiary {
@@ -73,7 +73,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-action-bar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-action-bar"]) to ([data-component]) {

package/styles/ui-affordance-scope.css

@@ -8,7 +8,7 @@
 }
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
 :scope:where([data-component~="ui-affordance-scope"]) {
-      display: contents;
+      display: contents !important;
       --ui-affordance-scope-engaged: 0;
       --ui-affordance-scope-guide: 1;
     }
@@ -24,7 +24,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-affordance-scope"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-affordance-scope"]) to ([data-component]) {

package/styles/ui-avatar-group.css

@@ -26,10 +26,10 @@
        * a white gap out of the avatar underneath. */
       --_overlap-shadow: -1px 0 0 0 rgb(0 0 0 / 0.22);
 
-      display: flex;
-      align-items: center;
-      flex-direction: row;
-      gap: 0;
+      display: flex !important;
+      align-items: center !important;
+      flex-direction: row !important;
+      gap: 0 !important;
     }
 
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
@@ -40,10 +40,10 @@
     }
 
     .overflow {
-      margin-inline-start: -0.5rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      margin-inline-start: -0.5rem !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-radius-round);
@@ -60,13 +60,13 @@
     }
 
     :scope:where([data-component~="ui-avatar-group"])[data-ui-avatar-group-state~="size=sm"] .overflow {
-      margin-inline-start: -0.25rem;
+      margin-inline-start: -0.25rem !important;
       inline-size: 1.75rem;
       block-size: 1.75rem;
     }
 
     :scope:where([data-component~="ui-avatar-group"])[data-ui-avatar-group-state~="size=xs"] .overflow {
-      margin-inline-start: -0.1875rem;
+      margin-inline-start: -0.1875rem !important;
       inline-size: 1.25rem;
       block-size: 1.25rem;
       /* Matches the xs Avatar's initials. */
@@ -75,12 +75,12 @@
     }
 
     .overflow[hidden] {
-      display: none;
+      display: none !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-avatar-group"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-avatar-group"]) to ([data-component]) {
@@ -89,12 +89,12 @@
     /* Overlap and the separating shadow are applied by the controller: slotted avatars are nested
      * component roots outside this style scope. */
     :where([data-slotted], [data-slotted] *):is(*) {
-      margin-inline-start: -0.5rem;
+      margin-inline-start: -0.5rem !important;
       flex-shrink: 0;
     }
 
     :where([data-slotted], [data-slotted] *):is(*:first-child) {
-      margin-inline-start: 0;
+      margin-inline-start: 0 !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-avatar.css

@@ -31,7 +31,7 @@
 
     :scope:where([data-component~="ui-avatar"]) {
       --_ui-default-icon-size: 1.25rem;
-      display: inline-grid;
+      display: inline-grid !important;
       place-items: center;
       overflow: hidden;
       inline-size: 2.5rem;
@@ -85,9 +85,9 @@
 
     .fallback {
       grid-area: 1 / 1;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       inline-size: 100%;
       block-size: 100%;
     }
@@ -97,21 +97,21 @@
      * Trimming applies to block containers, so the box is a block with centred content. */
     @supports (text-box-trim: trim-both) {
       .fallback {
-        display: block;
+        display: block !important;
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
     }
 
     [hidden] {
-      display: none;
+      display: none !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-avatar"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-avatar"]) to ([data-component]) {

package/styles/ui-badge.css

@@ -85,14 +85,14 @@
       --_badge-color-text: var(--_badge-color-ink);
       --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, var(--_badge-surface)));
 
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--ui-space-1);
-      box-sizing: border-box;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: var(--ui-space-1) !important;
+      box-sizing: border-box !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
+      padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
       border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       border-radius: var(--ui-radius-round);
       background: var(--_badge-outline-surface);
@@ -107,26 +107,26 @@
     /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
        text stays in the DOM for accessible names and consumers' selected values. */
     .label {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
     .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Icon content has its own flex item so label ellipsis never clips its strokes. */
     .icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       flex: none;
     }
 
     .icon:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
@@ -139,15 +139,15 @@
        Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
     @supports (text-box-trim: trim-both) {
       :scope:where([data-component~="ui-badge"]) {
-        display: inline-block;
+        display: inline-block !important;
         min-block-size: var(--ui-badge-min-block-size, 1.5rem);
         text-align: center;
-        align-content: center;
+        align-content: center !important;
         text-box-trim: none;
       }
       :scope:where([data-component~="ui-badge"]):has(.icon:not(:empty)),
       :scope:where([data-component~="ui-badge"]):has(.label svg) {
-        display: inline-flex;
+        display: inline-flex !important;
         text-box-trim: none;
       }
       .label:not(:has(svg)) {
@@ -159,12 +159,12 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="size=xs"] {
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       min-inline-size: 1rem;
       min-block-size: var(--ui-badge-min-block-size, 1rem);
       /* Compact text still needs room at both rounded edges. Fixed marks override this
          padding below; ordinary text badges retain their larger spacing. */
-      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1));
+      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1)) !important;
       font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
       line-height: var(--ui-badge-line-height, 1);
     }
@@ -338,14 +338,14 @@
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] {
       --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
-      display: inline-flex;
-      box-sizing: border-box;
+      display: inline-flex !important;
+      box-sizing: border-box !important;
       flex: none;
       inline-size: var(--_badge-square-size);
       block-size: var(--_badge-square-size);
       min-inline-size: var(--_badge-square-size);
       min-block-size: var(--_badge-square-size);
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-md);
       text-box-trim: none;
     }
@@ -359,25 +359,25 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] {
       --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       inline-size: var(--_badge-circle-size);
       block-size: var(--_badge-circle-size);
       min-inline-size: var(--_badge-circle-size);
       min-block-size: var(--_badge-circle-size);
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-round);
       text-box-trim: none;
     }
@@ -395,15 +395,15 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
       line-height: 1;
       text-box-trim: none;
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label:empty {
-      display: none;
+      display: none !important;
     }
 
     /* Center capital and numeral ink, rather than the font's ascent/descent line box.
@@ -411,7 +411,7 @@
     @supports (text-box-trim: trim-both) {
       :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
       :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
-        display: block;
+        display: block !important;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
         overflow: visible;
@@ -421,13 +421,13 @@
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=dot"] {
       position: relative;
-      box-sizing: border-box;
+      box-sizing: border-box !important;
       flex: none;
       inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
       block-size: var(--ui-badge-dot-size, var(--ui-space-2));
       min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
       min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
-      padding: 0;
+      padding: 0 !important;
       border-radius: var(--ui-radius-round);
       text-box-trim: none;
     }
@@ -451,7 +451,7 @@
       border-color: transparent;
       border-radius: 0;
       background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-      padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)) !important;
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
@@ -470,8 +470,8 @@
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=tag"]:dir(rtl) {
-      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
-      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2)) !important;
+      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)) !important;
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
@@ -499,7 +499,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-badge"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-badge"]) to ([data-component]) {
@@ -511,7 +511,7 @@
     /* Icon content has its own flex item so label ellipsis never clips its strokes. */
 
     .icon :where([data-slotted], [data-slotted] *):is(svg) {
-      display: block;
+      display: block !important;
       inline-size: 1em;
       block-size: 1em;
       flex: none;
@@ -522,7 +522,7 @@
       inline-size: 1em;
       block-size: 1em;
       vertical-align: middle;
-      margin-inline-end: var(--ui-space-1);
+      margin-inline-end: var(--ui-space-1) !important;
     }
 
     /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
@@ -548,13 +548,13 @@
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {
-      margin-inline-end: 0;
+      margin-inline-end: 0 !important;
     }
 
     /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=circle"] .label :where([data-slotted], [data-slotted] *):is(svg) {
-      margin-inline-end: 0;
+      margin-inline-end: 0 !important;
     }
 
     /* Center capital and numeral ink, rather than the font's ascent/descent line box.

package/styles/ui-breadcrumb-item.css

@@ -10,27 +10,27 @@
 /* One step in a ui-breadcrumbs trail: a link up to that place, or the current view. A chevron leads
        every step but the first. An icon slotted before the name sits with it. */
     :scope:where([data-component~="ui-breadcrumb-item"]) {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
       min-inline-size: 0;
-      margin: 0;
+      margin: 0 !important;
     }
 
     .separator {
-      display: inline-flex;
+      display: inline-flex !important;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
     }
 
     :scope:where([data-component~="ui-breadcrumb-item"]):first-child .separator {
-      display: none;
+      display: none !important;
     }
 
     .content {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
     }
 
@@ -41,7 +41,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-breadcrumb-item"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-breadcrumb-item"]) to ([data-component]) {
@@ -49,9 +49,9 @@
        every step but the first. An icon slotted before the name sits with it. */
 
     .content > :where([data-slotted], [data-slotted] *):is(a) {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--ui-space-1);
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
       color: var(--ui-text-secondary);
       text-decoration: none;
     }

package/styles/ui-breadcrumbs.css

@@ -10,25 +10,25 @@
 /* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
        rather than scrolls, so every step stays reachable. */
     :scope:where([data-component~="ui-breadcrumbs"]) {
-      display: block;
+      display: block !important;
       min-inline-size: 0;
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);
     }
 
     ol {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-space-1) var(--ui-space-2);
-      margin: 0;
-      padding: 0;
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) var(--ui-space-2) !important;
+      margin: 0 !important;
+      padding: 0 !important;
       list-style: none;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-breadcrumbs"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-breadcrumbs"]) to ([data-component]) {