@fairfox/polly 0.88.1 → 0.89.0

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

@@ -28,13 +28,12 @@
   }
 
   .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;
+    align-content:  center;
   }
 
   .view_-n6UrQ:hover {
@@ -54,6 +53,7 @@
 
   .root_-n6UrQ[data-variant="multi"] {
     display: block;
+    line-height: var(--polly-line-height-base);
     field-sizing: content;
     padding-block: calc((var(--polly-control-height-md)  - 1.5em - 2 * var(--polly-border-width-default)) / 2);
     resize: vertical;
@@ -69,8 +69,7 @@
   }
 
   .trigger_HX48zA {
-    display: inline-flex;
-    align-items:  center;
+    align-content:  center;
   }
 
   .menu_HX48zA {
@@ -164,9 +163,6 @@
   }
 
   .trigger_daofbw {
-    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-block-start: 0;
@@ -180,6 +176,7 @@
     color: var(--polly-text);
     text-align: start;
     cursor: pointer;
+    align-content:  center;
   }
 
   .trigger_daofbw:disabled, .trigger_daofbw[aria-disabled="true"] {
@@ -195,15 +192,13 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    flex: auto;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   .caret_daofbw {
     color: var(--polly-caret-color);
     pointer-events: none;
     transition: transform var(--polly-motion-fast) ease;
-    flex: none;
   }
 
   .caret_daofbw:before {
@@ -317,10 +312,6 @@
 /* src/polly-ui/Button.module.css */
 @layer polly-components {
   .btn_c4HKfA {
-    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;
@@ -337,6 +328,7 @@
     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);
+    align-content:  center;
   }
 
   .btn_c4HKfA:disabled, .btn_c4HKfA[aria-disabled="true"] {
@@ -442,6 +434,23 @@
     width: 100%;
   }
 
+  .btnFlush_c4HKfA {
+    margin-inline: calc(-1 * (var(--polly-control-padding-md)  + var(--polly-border-width-default)));
+  }
+
+  .btnSmall_c4HKfA.btnFlush_c4HKfA {
+    margin-inline: calc(-1 * (var(--polly-control-padding-sm)  + var(--polly-border-width-default)));
+  }
+
+  .btnLarge_c4HKfA.btnFlush_c4HKfA {
+    margin-inline: calc(-1 * (var(--polly-control-padding-lg)  + var(--polly-border-width-default)));
+  }
+
+  .btnCircle_c4HKfA.btnFlush_c4HKfA {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+
   .btnBounded_c4HKfA {
     max-width: var(--polly-control-max-width);
     overflow: hidden;
@@ -450,9 +459,7 @@
   }
 
   .icon_c4HKfA {
-    display: inline-flex;
-    flex: none;
-    align-items:  center;
+    vertical-align: middle;
   }
 
   .label_c4HKfA {
@@ -464,6 +471,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .btnBounded_c4HKfA {
+    text-overflow: ellipsis;
+  }
 }
 
 /* src/polly-ui/Surface.module.css */
@@ -547,9 +558,6 @@
 /* src/polly-ui/Checkbox.module.css */
 @layer polly-components {
   .checkbox_EKE5sg {
-    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;
@@ -637,6 +645,8 @@
 
   .summary_sEhnPw {
     padding: var(--polly-space-sm) var(--polly-space-md);
+    min-block-size: var(--polly-control-height-md);
+    box-sizing: border-box;
     cursor: pointer;
     font-family: inherit;
     font-size: var(--polly-text-md);
@@ -651,23 +661,26 @@
     display: none;
   }
 
-  .summary_sEhnPw:before {
+  .marker_sEhnPw:before {
     content: "▶";
-    display: inline-block;
+    display: block;
     font-size: var(--polly-text-xs);
     transition: transform var(--polly-motion-fast);
-    margin-inline-end: var(--polly-space-sm);
   }
 
-  [dir="rtl"] .summary_sEhnPw:before {
+  .summaryContent_sEhnPw {
+    min-inline-size: 0;
+  }
+
+  [dir="rtl"] .marker_sEhnPw:before {
     transform: scaleX(-1);
   }
 
-  .collapsible_sEhnPw[open] > .summary_sEhnPw:before {
+  .collapsible_sEhnPw[open] .marker_sEhnPw:before {
     transform: rotate(90deg);
   }
 
-  [dir="rtl"] .collapsible_sEhnPw[open] > .summary_sEhnPw:before {
+  [dir="rtl"] .collapsible_sEhnPw[open] .marker_sEhnPw:before {
     transform: rotate(-90deg);
   }
 
@@ -684,15 +697,11 @@
 /* src/polly-ui/ConfirmDialog.module.css */
 @layer polly-components {
   .actions_ZfTX4A {
-    display: grid;
-    grid-auto-flow: column;
-    gap: var(--polly-space-sm);
-    justify-content: end;
+    inline-size: 100%;
   }
 
   .cancel_ZfTX4A, .confirm_ZfTX4A, .confirmDanger_ZfTX4A {
     appearance: none;
-    display: inline-flex;
     min-block-size: var(--polly-control-height-md);
     padding-block-start: 0;
     padding-block-end: 0;
@@ -703,8 +712,7 @@
     border-radius: var(--polly-control-radius);
     cursor: pointer;
     transition: background var(--polly-motion-fast) ease;
-    justify-content: center;
-    align-items:  center;
+    align-content:  center;
   }
 
   .cancel_ZfTX4A {
@@ -741,9 +749,7 @@
 @layer polly-components {
   .container_fLMrWA {
     position: fixed;
-    display: grid;
     pointer-events: none;
-    place-items:  center;
     inset: 0;
   }
 
@@ -785,7 +791,6 @@
 
   .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;
@@ -797,8 +802,7 @@
     cursor: pointer;
     transition: background var(--polly-motion-fast) ease, border-color var(--polly-motion-fast) ease;
     background: none;
-    justify-content: center;
-    align-items:  center;
+    align-content:  center;
   }
 
   .close_fLMrWA:hover {
@@ -819,9 +823,6 @@
 /* src/polly-ui/FileInput.module.css */
 @layer polly-components {
   .fileInput_esO1fA {
-    display: inline-flex;
-    align-items:  center;
-    gap: var(--polly-space-sm);
     box-sizing: border-box;
     min-block-size: var(--polly-control-height-md);
     padding-block-start: 0;
@@ -834,6 +835,7 @@
     font-size: var(--polly-text-md);
     color: var(--polly-text);
     cursor: pointer;
+    align-content:  center;
   }
 
   .fileInput_esO1fA:hover {
@@ -959,7 +961,6 @@
   }
 
   .tab_xKO6GA {
-    display: inline-flex;
     min-block-size: var(--polly-control-height-md);
     padding-block-start: 0;
     padding-block-end: 0;
@@ -974,8 +975,7 @@
     white-space: nowrap;
     transition: color var(--polly-motion-fast), border-color var(--polly-motion-fast);
     background: none;
-    justify-content: center;
-    align-items:  center;
+    align-content:  center;
   }
 
   .tab_xKO6GA:hover:not(:disabled) {
@@ -1109,8 +1109,7 @@
   }
 
   .field_ez4_Vg {
-    display: grid;
-    gap: var(--polly-space-xs);
+    inline-size: 100%;
   }
 
   .error_ez4_Vg {
@@ -1122,16 +1121,11 @@
 /* src/polly-ui/Toast.module.css */
 @layer polly-components {
   .viewport_xVzRuA {
-    display: grid;
-    gap: var(--polly-space-sm);
+    inline-size: max-content;
   }
 
   .item_xVzRuA {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: var(--polly-space-md);
     color: var(--polly-text);
-    align-items:  center;
     min-inline-size: 16em;
     max-inline-size: 28em;
   }
@@ -1151,7 +1145,6 @@
 
   .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;
@@ -1162,8 +1155,7 @@
     font: inherit;
     cursor: pointer;
     background: none;
-    justify-content: center;
-    align-items:  center;
+    align-content:  center;
   }
 
   .close_xVzRuA:hover {
@@ -1174,9 +1166,6 @@
 /* src/polly-ui/Toggle.module.css */
 @layer polly-components {
   .toggle_rnf-SQ {
-    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;
@@ -1209,7 +1198,6 @@
     border-radius: var(--polly-radius-full);
     background-color: var(--polly-border);
     transition: background-color var(--polly-motion-fast);
-    flex: none;
     width: 36px;
     height: 20px;
   }