@fairfox/polly 0.86.0 → 0.88.0

package/dist/gallery/gallery.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,14 +1244,16 @@
   }
 
   .label_rnf-SQ {
-    vertical-align: middle;
-    margin-inline-start: var(--polly-space-sm);
+    min-inline-size: 0;
   }
 }
 
 /* src/polly-ui/theme.css */
 @layer polly-defaults {
   :root {
+    --buncss-light: initial;
+    --buncss-dark: ;
+    color-scheme: light dark;
     --polly-surface: #fff;
     --polly-surface-raised: #fff;
     --polly-surface-sunken: #f4f5f7;
@@ -1205,9 +1290,15 @@
     --polly-radius-full: 9999px;
     --polly-measure-prose: 68ch;
     --polly-measure-page: 1040px;
-    --polly-control-height-sm: 1.75rem;
-    --polly-control-height-md: 2.25rem;
-    --polly-control-height-lg: 2.75rem;
+    --polly-control-height-sm: 2rem;
+    --polly-control-height-md: 2.5rem;
+    --polly-control-height-lg: 3rem;
+    --polly-control-radius: var(--polly-radius-md);
+    --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);
+    --polly-checkbox-size: 1.125rem;
     --polly-control-min-width-sm: 6rem;
     --polly-control-min-width-md: 9rem;
     --polly-control-min-width-lg: 12rem;
@@ -1251,6 +1342,8 @@
 
   @media (prefers-color-scheme: dark) {
     :root {
+      --buncss-light: ;
+      --buncss-dark: initial;
       --polly-surface: #14171c;
       --polly-surface-raised: #1c2027;
       --polly-surface-sunken: #0f1216;
@@ -1283,6 +1376,9 @@
   }
 
   [data-polly-theme="light"] {
+    --buncss-light: initial;
+    --buncss-dark: ;
+    color-scheme: light;
     --polly-surface: #fff;
     --polly-surface-raised: #fff;
     --polly-surface-sunken: #f4f5f7;
@@ -1314,6 +1410,9 @@
   }
 
   [data-polly-theme="dark"] {
+    --buncss-light: ;
+    --buncss-dark: initial;
+    color-scheme: dark;
     --polly-surface: #14171c;
     --polly-surface-raised: #1c2027;
     --polly-surface-sunken: #0f1216;
@@ -1562,9 +1661,13 @@ body {
 .gallery-dropdown-trigger {
   display: inline-flex;
   gap: var(--polly-space-sm);
-  padding: var(--polly-space-sm) var(--polly-space-md);
+  box-sizing: border-box;
+  min-block-size: var(--polly-control-height-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);
   color: var(--polly-text);
   font: inherit;