@fairfox/polly 0.87.0 → 0.88.1

package/dist/src/polly-ui/Button.d.ts

@@ -4,8 +4,12 @@
  * Renders as a <button> by default; switches to an <a> when given an
  * `href`. Tier sets visual importance (primary/secondary/tertiary),
  * color overlays semantic meaning (info/success/warning/danger),
- * size picks the padding + font scale (small/normal/large). Icon +
- * label are arranged with a nested inline <Layout>.
+ * size picks the height + padding + font scale (small/normal/large).
+ * The button is a flex container, so an icon and a label are its own
+ * children with a `gap` between them.
+ *
+ * Height comes from --polly-control-height-*, never from padding, so a
+ * Button is exactly as tall as a TextInput or a Select in the same row.
  *
  * A text `label` is the accessible name. An icon-only button (icon, no
  * label) has none, so the type REQUIRES `aria-label` there — an unnamed

package/dist/src/polly-ui/Tabs.d.ts

@@ -5,7 +5,9 @@
  * and `data-action-id={tab.id}` so the event delegator resolves the
  * activated tab. The active tab gets `aria-current="page"` and a
  * bottom-border accent. The nav scrolls horizontally with a hidden
- * scrollbar for overflow. Internal arrangement uses <Layout>.
+ * scrollbar for overflow. Internal arrangement uses <Layout>, packed to
+ * the inline start: the grid is 100% wide, so without justifyContent the
+ * `auto` tracks stretch and four tabs spread across the whole container.
  */
 import type { JSX } from "preact";
 export type Tab = {

package/dist/src/polly-ui/index.css

@@ -14,23 +14,27 @@
 @layer polly-components {
   .root_-n6UrQ {
     box-sizing: border-box;
-    padding: var(--polly-space-sm) var(--polly-space-md);
+    min-block-size: var(--polly-control-height-md);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-field-padding);
     font: inherit;
     font-family: var(--polly-font-sans);
     color: var(--polly-text);
     line-height: var(--polly-line-height-base);
     border: var(--polly-border-width-default) solid transparent;
-    border-radius: var(--polly-radius-md);
-    min-block-size: calc(1.5em + 2 * var(--polly-space-sm)  + 2 * var(--polly-border-width-default));
+    border-radius: var(--polly-control-radius);
     inline-size: 100%;
   }
 
   .view_-n6UrQ {
+    display: flex;
     cursor: text;
     white-space: pre-wrap;
     word-break: break-word;
     transition: background var(--polly-motion-fast) ease, border-color var(--polly-motion-fast) ease;
     background: none;
+    align-items:  center;
   }
 
   .view_-n6UrQ:hover {
@@ -49,7 +53,9 @@
   }
 
   .root_-n6UrQ[data-variant="multi"] {
+    display: block;
     field-sizing: content;
+    padding-block: calc((var(--polly-control-height-md)  - 1.5em - 2 * var(--polly-border-width-default)) / 2);
     resize: vertical;
     max-block-size: 40em;
   }
@@ -63,7 +69,8 @@
   }
 
   .trigger_HX48zA {
-    display: inline-block;
+    display: inline-flex;
+    align-items:  center;
   }
 
   .menu_HX48zA {
@@ -160,10 +167,13 @@
     display: inline-flex;
     align-items:  center;
     gap: var(--polly-space-sm);
+    min-block-size: var(--polly-control-height-md);
     max-width: min(100%, var(--polly-control-max-width));
-    padding: var(--polly-space-sm) var(--polly-space-md);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-field-padding);
     border: var(--polly-border-width-default) solid var(--polly-border);
-    border-radius: var(--polly-radius-sm);
+    border-radius: var(--polly-control-radius);
     background-color: var(--polly-surface);
     font-family: inherit;
     font-size: var(--polly-text-md);
@@ -217,7 +227,7 @@
   }
 
   .actionBtn_daofbw {
-    display: inline-block;
+    display: block;
     padding: var(--polly-space-xs) var(--polly-space-sm);
     border-radius: var(--polly-radius-sm);
     font-family: inherit;
@@ -260,6 +270,8 @@
 
   .optionCheck_daofbw {
     accent-color: var(--polly-accent);
+    inline-size: var(--polly-checkbox-size);
+    block-size: var(--polly-checkbox-size);
     vertical-align: middle;
     pointer-events: none;
     margin-inline-end: var(--polly-space-sm);
@@ -305,20 +317,26 @@
 /* src/polly-ui/Button.module.css */
 @layer polly-components {
   .btn_c4HKfA {
-    display: inline-block;
-    padding: var(--polly-space-sm) var(--polly-space-lg);
+    display: inline-flex;
+    justify-content: center;
+    align-items:  center;
+    gap: var(--polly-space-sm);
+    min-block-size: var(--polly-control-height-md);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-control-padding-md);
     border: var(--polly-border-width-default) solid transparent;
-    border-radius: var(--polly-radius-sm);
+    border-radius: var(--polly-control-radius);
     font-family: inherit;
     font-size: var(--polly-text-md);
     font-weight: var(--polly-weight-medium);
+    line-height: var(--polly-line-height-tight);
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     user-select: none;
     box-sizing: border-box;
     transition: background-color var(--polly-motion-fast), border-color var(--polly-motion-fast), color var(--polly-motion-fast);
-    line-height: 1.2;
   }
 
   .btn_c4HKfA:disabled, .btn_c4HKfA[aria-disabled="true"] {
@@ -393,20 +411,31 @@
   }
 
   .btnSmall_c4HKfA {
-    padding: var(--polly-space-xs) var(--polly-space-md);
+    min-block-size: var(--polly-control-height-sm);
+    padding-inline: var(--polly-control-padding-sm);
     font-size: var(--polly-text-sm);
   }
 
   .btnLarge_c4HKfA {
-    padding: var(--polly-space-md) var(--polly-space-xl);
+    min-block-size: var(--polly-control-height-lg);
+    padding-inline: var(--polly-control-padding-lg);
     font-size: var(--polly-text-lg);
   }
 
   .btnCircle_c4HKfA {
     border-radius: var(--polly-radius-full);
     aspect-ratio: 1;
-    width: var(--polly-control-height-md);
-    padding: 0;
+    inline-size: var(--polly-control-height-md);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  .btnSmall_c4HKfA.btnCircle_c4HKfA {
+    inline-size: var(--polly-control-height-sm);
+  }
+
+  .btnLarge_c4HKfA.btnCircle_c4HKfA {
+    inline-size: var(--polly-control-height-lg);
   }
 
   .btnFullWidth_c4HKfA {
@@ -419,6 +448,22 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .icon_c4HKfA {
+    display: inline-flex;
+    flex: none;
+    align-items:  center;
+  }
+
+  .label_c4HKfA {
+    min-inline-size: 0;
+  }
+
+  .btnBounded_c4HKfA .label_c4HKfA {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 /* src/polly-ui/Surface.module.css */
@@ -502,7 +547,11 @@
 /* src/polly-ui/Checkbox.module.css */
 @layer polly-components {
   .checkbox_EKE5sg {
-    display: inline-block;
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--polly-space-sm);
+    box-sizing: border-box;
+    min-block-size: var(--polly-control-height-md);
     cursor: pointer;
     font-family: inherit;
     font-size: var(--polly-text-md);
@@ -517,14 +566,15 @@
 
   .input_EKE5sg {
     accent-color: var(--polly-accent);
-    vertical-align: middle;
+    inline-size: var(--polly-checkbox-size);
+    block-size: var(--polly-checkbox-size);
     cursor: inherit;
+    flex: none;
     margin: 0;
   }
 
   .label_EKE5sg {
-    vertical-align: middle;
-    margin-inline-start: var(--polly-space-sm);
+    min-inline-size: 0;
   }
 }
 
@@ -642,13 +692,19 @@
 
   .cancel_ZfTX4A, .confirm_ZfTX4A, .confirmDanger_ZfTX4A {
     appearance: none;
-    padding: var(--polly-space-sm) var(--polly-space-lg);
+    display: inline-flex;
+    min-block-size: var(--polly-control-height-md);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-control-padding-md);
     font: inherit;
     font-weight: var(--polly-weight-medium);
     border: var(--polly-border-width-default) solid var(--polly-border);
-    border-radius: var(--polly-radius-md);
+    border-radius: var(--polly-control-radius);
     cursor: pointer;
     transition: background var(--polly-motion-fast) ease;
+    justify-content: center;
+    align-items:  center;
   }
 
   .cancel_ZfTX4A {
@@ -729,14 +785,20 @@
 
   .close_fLMrWA {
     appearance: none;
+    display: inline-flex;
+    min-block-size: var(--polly-control-height-md);
     color: var(--polly-text);
     border: var(--polly-border-width-default) solid transparent;
-    border-radius: var(--polly-radius-md);
-    padding: var(--polly-space-sm) var(--polly-space-md);
+    border-radius: var(--polly-control-radius);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-field-padding);
     font: inherit;
     cursor: pointer;
     transition: background var(--polly-motion-fast) ease, border-color var(--polly-motion-fast) ease;
     background: none;
+    justify-content: center;
+    align-items:  center;
   }
 
   .close_fLMrWA:hover {
@@ -760,10 +822,13 @@
     display: inline-flex;
     align-items:  center;
     gap: var(--polly-space-sm);
+    box-sizing: border-box;
     min-block-size: var(--polly-control-height-md);
-    padding: var(--polly-space-sm) var(--polly-space-md);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-control-padding-md);
     border: var(--polly-border-width-default) solid var(--polly-border);
-    border-radius: var(--polly-radius-sm);
+    border-radius: var(--polly-control-radius);
     background-color: var(--polly-surface);
     font-family: inherit;
     font-size: var(--polly-text-md);
@@ -894,8 +959,11 @@
   }
 
   .tab_xKO6GA {
-    display: inline-block;
-    padding: var(--polly-space-sm) var(--polly-space-lg);
+    display: inline-flex;
+    min-block-size: var(--polly-control-height-md);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-control-padding-md);
     border: none;
     border-bottom: var(--polly-border-width-medium) solid transparent;
     font-family: inherit;
@@ -906,6 +974,8 @@
     white-space: nowrap;
     transition: color var(--polly-motion-fast), border-color var(--polly-motion-fast);
     background: none;
+    justify-content: center;
+    align-items:  center;
   }
 
   .tab_xKO6GA:hover:not(:disabled) {
@@ -1003,13 +1073,16 @@
 @layer polly-components {
   .input_ez4_Vg {
     box-sizing: border-box;
-    padding: var(--polly-space-sm) var(--polly-space-md);
+    min-block-size: var(--polly-control-height-md);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-field-padding);
     font: inherit;
     font-family: var(--polly-font-sans);
     color: var(--polly-text);
     background: var(--polly-surface);
     border: var(--polly-border-width-default) solid var(--polly-border);
-    border-radius: var(--polly-radius-md);
+    border-radius: var(--polly-control-radius);
     transition: border-color var(--polly-motion-fast) ease, background var(--polly-motion-fast) ease;
     inline-size: 100%;
   }
@@ -1029,7 +1102,8 @@
 
   .input_ez4_Vg[data-polly-input-variant="multi"] {
     field-sizing: content;
-    min-block-size: calc(1.5em + 2 * var(--polly-space-sm)  + 2 * var(--polly-border-width-default));
+    padding-block: calc((var(--polly-control-height-md)  - 1.5em - 2 * var(--polly-border-width-default)) / 2);
+    min-block-size: var(--polly-control-height-md);
     resize: vertical;
     max-block-size: 40em;
   }
@@ -1077,13 +1151,19 @@
 
   .close_xVzRuA {
     appearance: none;
+    display: inline-flex;
+    min-block-size: var(--polly-control-height-sm);
     color: inherit;
     border: var(--polly-border-width-default) solid transparent;
-    border-radius: var(--polly-radius-sm);
-    padding: var(--polly-space-xs) var(--polly-space-sm);
+    border-radius: var(--polly-control-radius);
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: var(--polly-space-sm);
     font: inherit;
     cursor: pointer;
     background: none;
+    justify-content: center;
+    align-items:  center;
   }
 
   .close_xVzRuA:hover {
@@ -1094,13 +1174,16 @@
 /* src/polly-ui/Toggle.module.css */
 @layer polly-components {
   .toggle_rnf-SQ {
-    display: inline-block;
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--polly-space-sm);
+    box-sizing: border-box;
+    min-block-size: var(--polly-control-height-md);
     cursor: pointer;
     font-family: inherit;
     font-size: var(--polly-text-md);
     color: var(--polly-text);
     user-select: none;
-    vertical-align: middle;
   }
 
   .disabled_rnf-SQ {
@@ -1121,12 +1204,12 @@
   }
 
   .track_rnf-SQ {
-    display: inline-block;
+    display: block;
     position: relative;
     border-radius: var(--polly-radius-full);
     background-color: var(--polly-border);
-    vertical-align: middle;
     transition: background-color var(--polly-motion-fast);
+    flex: none;
     width: 36px;
     height: 20px;
   }
@@ -1161,7 +1244,6 @@
   }
 
   .label_rnf-SQ {
-    vertical-align: middle;
-    margin-inline-start: var(--polly-space-sm);
+    min-inline-size: 0;
   }
 }

package/dist/src/polly-ui/index.js

@@ -718,11 +718,13 @@ var Button_module_default = {
   btnLarge: "btnLarge_c4HKfA",
   btnCircle: "btnCircle_c4HKfA",
   btnFullWidth: "btnFullWidth_c4HKfA",
-  btnBounded: "btnBounded_c4HKfA"
+  btnBounded: "btnBounded_c4HKfA",
+  icon: "icon_c4HKfA",
+  label: "label_c4HKfA"
 };
 
 // src/polly-ui/Button.tsx
-import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6, Fragment as Fragment2 } from "preact/jsx-dev-runtime";
 function tierClass(tier) {
   if (tier === "primary")
     return Button_module_default["tierPrimary"];
@@ -782,18 +784,18 @@ function Button(props) {
   if (className)
     parts.push(className);
   const buttonClass = parts.filter(Boolean).join(" ");
-  const content = icon ? /* @__PURE__ */ jsxDEV6(Layout, {
-    inline: true,
-    columns: "auto auto",
-    gap: "0.5em",
-    alignItems: "center",
+  const content = /* @__PURE__ */ jsxDEV6(Fragment2, {
     children: [
-      icon,
+      icon !== undefined && /* @__PURE__ */ jsxDEV6("span", {
+        class: Button_module_default["icon"],
+        children: icon
+      }, undefined, false, undefined, this),
       label !== undefined && /* @__PURE__ */ jsxDEV6("span", {
+        class: Button_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
     ]
-  }, undefined, true, undefined, this) : label;
+  }, undefined, true, undefined, this);
   const dataAction = props["data-action"];
   const ariaLabel = props["aria-label"];
   const resolvedTitle = title ?? (typeof label === "string" && label.length > 0 ? label : typeof ariaLabel === "string" ? ariaLabel : undefined);
@@ -1822,7 +1824,7 @@ function Output(props) {
 }
 // src/polly-ui/Select.tsx
 import { useComputed, useSignal as useSignal2 } from "@preact/signals";
-import { jsxDEV as jsxDEV17, Fragment as Fragment2 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17, Fragment as Fragment3 } from "preact/jsx-dev-runtime";
 var MULTI_SELECT_LABEL_THRESHOLD = 2;
 function formatSelected(options, selected, multiSelect) {
   if (selected.size === 0)
@@ -1885,7 +1887,7 @@ function Select(props) {
   if (wide)
     triggerParts.push(Select_module_default["triggerWide"] ?? "");
   const triggerClass = triggerParts.filter(Boolean).join(" ");
-  const triggerContent = /* @__PURE__ */ jsxDEV17(Fragment2, {
+  const triggerContent = /* @__PURE__ */ jsxDEV17(Fragment3, {
     children: [
       /* @__PURE__ */ jsxDEV17("span", {
         class: Select_module_default["triggerLabel"],
@@ -2052,6 +2054,7 @@ function Tabs(props) {
       columns: `repeat(${tabs.length}, auto)`,
       gap: "0",
       alignItems: "end",
+      justifyContent: "start",
       children: tabs.map((tab) => {
         const isActive = activeTab === tab.id;
         const tabClass = isActive ? `${Tabs_module_default["tab"]} ${Tabs_module_default["active"]}` : Tabs_module_default["tab"];
@@ -2419,4 +2422,4 @@ export {
   getOverlayRootNode
 };
 
-//# debugId=CE1386A9435DE31764756E2164756E21
+//# debugId=658A56B7B40F7FD364756E2164756E21