@fairfox/polly 0.87.0 → 0.88.1

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

@@ -203,23 +203,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 {
@@ -238,7 +242,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;
   }
@@ -252,7 +258,8 @@
   }
 
   .trigger_HX48zA {
-    display: inline-block;
+    display: inline-flex;
+    align-items:  center;
   }
 
   .menu_HX48zA {
@@ -349,10 +356,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);
@@ -406,7 +416,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;
@@ -449,6 +459,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);
@@ -494,20 +506,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"] {
@@ -582,20 +600,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 {
@@ -608,6 +637,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 */
@@ -691,7 +736,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);
@@ -706,14 +755,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;
   }
 }
 
@@ -831,13 +881,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 {
@@ -918,14 +974,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 {
@@ -949,10 +1011,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);
@@ -1083,8 +1148,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;
@@ -1095,6 +1163,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) {
@@ -1192,13 +1262,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%;
   }
@@ -1218,7 +1291,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;
   }
@@ -1266,13 +1340,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 {
@@ -1283,13 +1363,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 {
@@ -1310,12 +1393,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;
   }
@@ -1350,7 +1433,6 @@
   }
 
   .label_rnf-SQ {
-    vertical-align: middle;
-    margin-inline-start: var(--polly-space-sm);
+    min-inline-size: 0;
   }
 }

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

@@ -14,6 +14,13 @@
 
 @layer polly-defaults {
   :root {
+    /* Tell the UA which schemes the page supports, so native controls —
+     * date and time pickers, the checkbox box, scrollbars, autofill —
+     * follow the palette instead of staying light on a dark page
+     * (polly#179). The media query below asks what the user prefers;
+     * this property answers what the page can render. */
+    color-scheme: light dark;
+
     /* Surfaces */
     --polly-surface: #ffffff;
     --polly-surface-raised: #ffffff;
@@ -75,10 +82,39 @@
     --polly-measure-prose: 68ch;
     --polly-measure-page: 1040px;
 
-    /* Control heights — used by Button, Input, Select. */
-    --polly-control-height-sm: 1.75rem;
-    --polly-control-height-md: 2.25rem;
-    --polly-control-height-lg: 2.75rem;
+    /* Control heights — the single source of truth for how tall an
+     * interactive control is. Button, TextInput, ActionInput, Select,
+     * FileInput, Dropdown, Checkbox, Toggle and Tabs all set
+     * `min-block-size` from this ladder, so a row of mixed controls
+     * lines up without the consumer measuring anything. The ladder used to
+     * exist without anything reading it, and the same row held five different
+     * heights (37.19 / 40 / 42 / 42 / 54 px).
+     *
+     * Control text is centred by the flex/native box rather than by
+     * vertical padding, so changing a height here moves every control
+     * together and never re-cuts the text position. */
+    --polly-control-height-sm: 2rem;
+    --polly-control-height-md: 2.5rem;
+    --polly-control-height-lg: 3rem;
+
+    /* Control corner — one radius for every control, so a Button beside
+     * a TextInput has the same corner. Containers (Collapsible, the
+     * Dropdown menu, Output, a code block) keep --polly-radius-md
+     * independently; this token exists so a consumer can re-cut control
+     * corners without touching container corners. */
+    --polly-control-radius: var(--polly-radius-md);
+
+    /* Control inline padding — buttons carry more air than fields, and
+     * the ladder tracks the height ladder. */
+    --polly-control-padding-sm: var(--polly-space-md);
+    --polly-control-padding-md: var(--polly-space-lg);
+    --polly-control-padding-lg: var(--polly-space-xl);
+    --polly-field-padding: var(--polly-space-md);
+
+    /* Native checkbox box. The UA default is 13x13, which reads small
+     * beside 16px text; Checkbox and the Select option check both size
+     * from this. */
+    --polly-checkbox-size: 1.125rem;
 
     /* Control widths — caps and floors for Button, Select, Dropdown
      * triggers so semi-dynamic labels (multi-select joins, user-
@@ -194,6 +230,7 @@
 
   /* Explicit mode override — wins over prefers-color-scheme. */
   [data-polly-theme="light"] {
+    color-scheme: light;
     --polly-surface: #ffffff;
     --polly-surface-raised: #ffffff;
     --polly-surface-sunken: #f4f5f7;
@@ -225,6 +262,7 @@
   }
 
   [data-polly-theme="dark"] {
+    color-scheme: dark;
     --polly-surface: #14171c;
     --polly-surface-raised: #1c2027;
     --polly-surface-sunken: #0f1216;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fairfox/polly",
-  "version": "0.87.0",
+  "version": "0.88.1",
   "private": false,
   "type": "module",
   "description": "Multi-execution-context framework with reactive state and cross-context messaging for Chrome extensions, PWAs, and worker-based applications",