@cahyo-dimas/freeday 3.9.4 → 3.11.0

package/dist/freeday.bundle.css

@@ -1213,9 +1213,6 @@ a { color: var(--color-primary-strong); }
  * framework with its preflight OFF (the recommended pairing), a semantic <ul>/<ol> keeps native
  * bullets + a 40px indent; add this class (or a Freeday list component) to normalise it. */
 .fdy-list-reset { list-style: none; margin: 0; padding: 0; }
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
-}
 
 /* ===========================================================================
  * Reduce Motion: SETIAP transisi dinetralkan, bukan daftar yang dipelihara tangan.
@@ -1495,7 +1492,7 @@ a { color: var(--color-primary-strong); }
 @media (prefers-reduced-motion:no-preference){.fdy-autocomplete__listbox:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
 /* Freeday. Avatar */
-.fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
+.fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;-webkit-user-select:none;user-select:none;}
 .fdy-avatar img{width:100%;height:100%;object-fit:cover;}
 /* --xs exists for an avatar INSIDE a control: `.fdy-btn--sm` is exactly 2rem tall, which is also
    `--sm`'s size, so a small avatar in a small button fills it edge to edge and the ghost border
@@ -1651,7 +1648,7 @@ a { color: var(--color-primary-strong); }
 .fdy-breadcrumb__link:hover{color:var(--color-primary-strong);text-decoration:underline;}
 .fdy-breadcrumb__link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.26);}
 .fdy-breadcrumb__item[aria-current="page"]{color:var(--color-text);font-weight:var(--weight-medium);}
-.fdy-breadcrumb__sep{color:var(--color-text-subtle);user-select:none;}
+.fdy-breadcrumb__sep{color:var(--color-text-subtle);-webkit-user-select:none;user-select:none;}
 
 /* Freeday. Responsive display utilities (pairs with freeday-breakpoint.js).
  * Breakpoint scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920.
@@ -1957,7 +1954,13 @@ a { color: var(--color-primary-strong); }
  * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
  * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
  * its own content, so it never sized to the table to begin with. */
-.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
+.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Fenced the way composition.css:62 fences its own, so the declaration states the condition it
+   needs instead of relying on a browser to drop it. Safari 15.4 to 15.8 is inside the floor the
+   README states and has no container queries at all. */
+@supports (container-type:inline-size){
+  .fdy-cfl__results{container:fdy-cfl / inline-size;}
+}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
 
 .fdy-cfl__row{cursor:pointer;}
@@ -1999,30 +2002,71 @@ a { color: var(--color-primary-strong); }
  *
  * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
  * row that costs a third of the width buys nothing when each row is labelled by its own title. */
-@container fdy-cfl (max-width: 30rem){
-  .fdy-cfl__results .fdy-table,
-  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
-  .fdy-cfl__results .fdy-table thead{display:none;}
-  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
-  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
-  .fdy-cfl__row > td{display:block;padding:0;border:0;}
-  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
-     one — no selector has to know how many columns there are, or which of them is last. */
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
-  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
-  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
-  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
-  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
-  /* The checkbox keeps its own line position beside the title rather than above it. */
-  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+@supports (container-type:inline-size){
+  @container fdy-cfl (max-width: 30rem){
+    .fdy-cfl__results .fdy-table,
+    .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+    .fdy-cfl__results .fdy-table thead{display:none;}
+    .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+    .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+    .fdy-cfl__row > td{display:block;padding:0;border:0;}
+    /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+       one — no selector has to know how many columns there are, or which of them is last. */
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+    .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+    /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+    .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+    /* The checkbox keeps its own line position beside the title rather than above it. */
+    .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+  }
+}
+
+/* The same block for a browser that has no container queries, which is every Safari from 15.4 to
+ * 15.8 and inside the floor the README states. There the @supports above is false, the stacked
+ * layout never applied, and a 372px dialog kept a three-column master-data table that scrolls on
+ * both axes.
+ *
+ * The condition is a VIEWPORT width, the only width this path can read. 32rem is derived from the
+ * dialog rather than picked: the dialog is min(46rem, 100vw - var(--space-8)) with --space-8 at
+ * 2rem, and the results box takes that width, so it sits at or under 30rem exactly when the
+ * viewport sits at or under 32rem. What a media query cannot answer is the case the container
+ * query exists for, a narrow dialog inside a wide viewport, which is a docked panel on a desktop;
+ * on those browsers that one case keeps the scrolling table it has always had.
+ *
+ * The body is a copy of the body above, because CSS has no way to share one declaration block
+ * between two different conditions. test/baseline.test.mjs compares the two, so an edit that
+ * reaches one of them and misses the other fails there. */
+@supports not (container-type:inline-size){
+  @media (max-width:32rem){
+    .fdy-cfl__results .fdy-table,
+    .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+    .fdy-cfl__results .fdy-table thead{display:none;}
+    .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+    .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+    .fdy-cfl__row > td{display:block;padding:0;border:0;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+    .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+    .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+    .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+  }
 }
 
 /* Freeday. Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).

package/dist/freeday.css

@@ -36,9 +36,6 @@ a { color: var(--color-primary-strong); }
  * framework with its preflight OFF (the recommended pairing), a semantic <ul>/<ol> keeps native
  * bullets + a 40px indent; add this class (or a Freeday list component) to normalise it. */
 .fdy-list-reset { list-style: none; margin: 0; padding: 0; }
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
-}
 
 /* ===========================================================================
  * Reduce Motion: SETIAP transisi dinetralkan, bukan daftar yang dipelihara tangan.
@@ -318,7 +315,7 @@ a { color: var(--color-primary-strong); }
 @media (prefers-reduced-motion:no-preference){.fdy-autocomplete__listbox:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
 /* Freeday. Avatar */
-.fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
+.fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;-webkit-user-select:none;user-select:none;}
 .fdy-avatar img{width:100%;height:100%;object-fit:cover;}
 /* --xs exists for an avatar INSIDE a control: `.fdy-btn--sm` is exactly 2rem tall, which is also
    `--sm`'s size, so a small avatar in a small button fills it edge to edge and the ghost border
@@ -474,7 +471,7 @@ a { color: var(--color-primary-strong); }
 .fdy-breadcrumb__link:hover{color:var(--color-primary-strong);text-decoration:underline;}
 .fdy-breadcrumb__link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.26);}
 .fdy-breadcrumb__item[aria-current="page"]{color:var(--color-text);font-weight:var(--weight-medium);}
-.fdy-breadcrumb__sep{color:var(--color-text-subtle);user-select:none;}
+.fdy-breadcrumb__sep{color:var(--color-text-subtle);-webkit-user-select:none;user-select:none;}
 
 /* Freeday. Responsive display utilities (pairs with freeday-breakpoint.js).
  * Breakpoint scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920.
@@ -780,7 +777,13 @@ a { color: var(--color-primary-strong); }
  * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
  * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
  * its own content, so it never sized to the table to begin with. */
-.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
+.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Fenced the way composition.css:62 fences its own, so the declaration states the condition it
+   needs instead of relying on a browser to drop it. Safari 15.4 to 15.8 is inside the floor the
+   README states and has no container queries at all. */
+@supports (container-type:inline-size){
+  .fdy-cfl__results{container:fdy-cfl / inline-size;}
+}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
 
 .fdy-cfl__row{cursor:pointer;}
@@ -822,30 +825,71 @@ a { color: var(--color-primary-strong); }
  *
  * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
  * row that costs a third of the width buys nothing when each row is labelled by its own title. */
-@container fdy-cfl (max-width: 30rem){
-  .fdy-cfl__results .fdy-table,
-  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
-  .fdy-cfl__results .fdy-table thead{display:none;}
-  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
-  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
-  .fdy-cfl__row > td{display:block;padding:0;border:0;}
-  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
-     one — no selector has to know how many columns there are, or which of them is last. */
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
-  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
-  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
-  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
-  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
-  /* The checkbox keeps its own line position beside the title rather than above it. */
-  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+@supports (container-type:inline-size){
+  @container fdy-cfl (max-width: 30rem){
+    .fdy-cfl__results .fdy-table,
+    .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+    .fdy-cfl__results .fdy-table thead{display:none;}
+    .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+    .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+    .fdy-cfl__row > td{display:block;padding:0;border:0;}
+    /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+       one — no selector has to know how many columns there are, or which of them is last. */
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+    .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+    /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+    .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+    /* The checkbox keeps its own line position beside the title rather than above it. */
+    .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+  }
+}
+
+/* The same block for a browser that has no container queries, which is every Safari from 15.4 to
+ * 15.8 and inside the floor the README states. There the @supports above is false, the stacked
+ * layout never applied, and a 372px dialog kept a three-column master-data table that scrolls on
+ * both axes.
+ *
+ * The condition is a VIEWPORT width, the only width this path can read. 32rem is derived from the
+ * dialog rather than picked: the dialog is min(46rem, 100vw - var(--space-8)) with --space-8 at
+ * 2rem, and the results box takes that width, so it sits at or under 30rem exactly when the
+ * viewport sits at or under 32rem. What a media query cannot answer is the case the container
+ * query exists for, a narrow dialog inside a wide viewport, which is a docked panel on a desktop;
+ * on those browsers that one case keeps the scrolling table it has always had.
+ *
+ * The body is a copy of the body above, because CSS has no way to share one declaration block
+ * between two different conditions. test/baseline.test.mjs compares the two, so an edit that
+ * reaches one of them and misses the other fails there. */
+@supports not (container-type:inline-size){
+  @media (max-width:32rem){
+    .fdy-cfl__results .fdy-table,
+    .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+    .fdy-cfl__results .fdy-table thead{display:none;}
+    .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+    .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+    .fdy-cfl__row > td{display:block;padding:0;border:0;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+    .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+    .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+    .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+  }
 }
 
 /* Freeday. Charts (zero-dependency CSS/SVG, rendered by freeday-chart.js).

package/dist/freeday.js

@@ -4945,6 +4945,14 @@
     trigger.setAttribute('aria-haspopup', 'listbox');
     trigger.setAttribute('aria-expanded', 'false');
     trigger.setAttribute('aria-label', label);
+    /* The trigger is a <button>, which is NOT a labelable element, so a form's own `<label for>`
+       can never activate it -- but an id is still what `aria-describedby` targets and what a host
+       needs to point at this control. Both were unreadable from the seed until now, so a Blazor
+       host could not name its own error text. Mirrors the datepicker's seed. */
+    var seedId = wrap.getAttribute('data-id');
+    if (seedId) trigger.id = seedId;
+    var describedby = wrap.getAttribute('data-describedby');
+    if (describedby) trigger.setAttribute('aria-describedby', describedby);
     var valueSpan = document.createElement('span');
     valueSpan.className = 'fdy-timepicker__value';
     trigger.appendChild(valueSpan);
@@ -4982,6 +4990,30 @@
     wrap.appendChild(panel);
 
     var active = -1;
+    /* A host that renders its seed ONCE and then never re-renders it (Blazor: ShouldRender is
+       false after hydration) still has to be able to disable, lock or invalidate the field
+       afterwards. Without this the parameter was there and nothing read it. Mirrors
+       FreedayDatepicker.setState so the two controls of one family answer the same call. */
+    var stateDisabled = wrap.hasAttribute('data-disabled');
+    var stateReadonly = wrap.hasAttribute('data-readonly');
+    var stateInvalid = wrap.hasAttribute('data-invalid');
+
+    function applyState() {
+      trigger.disabled = stateDisabled;
+      if (stateReadonly) trigger.setAttribute('aria-readonly', 'true');
+      else trigger.removeAttribute('aria-readonly');
+      if (stateInvalid) trigger.setAttribute('aria-invalid', 'true');
+      else trigger.removeAttribute('aria-invalid');
+      wrap.classList.toggle('fdy-timepicker--error', stateInvalid);
+      if ((stateDisabled || stateReadonly) && !panel.hidden) close(false);
+    }
+    function setState(next) {
+      if (!next) return;
+      if (next.disabled != null) stateDisabled = !!next.disabled;
+      if (next.readonly != null) stateReadonly = !!next.readonly;
+      if (next.invalid != null) stateInvalid = !!next.invalid;
+      applyState();
+    }
 
     function updateDisplay() {
       if (value) {
@@ -5010,6 +5042,7 @@
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
     function open() {
+      if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
       var p = popCtl(); if (p) p.show(); else panel.hidden = false;
       trigger.setAttribute('aria-expanded', 'true');
@@ -5060,10 +5093,12 @@
     });
 
     updateDisplay();
+    applyState();
 
     var api = {
       wrap: wrap,
       getValue: function () { return value; },
+      setState: setState,
       clear: function () { value = ''; for (var i = 0; i < opts.length; i++) opts[i].setAttribute('aria-selected', 'false'); updateDisplay(); }
     };
     wrap._fdyTp = api;
@@ -5083,7 +5118,15 @@
     initAll();
   }
 
-  window.FreedayTimepicker = { init: initTime, initAll: initAll };
+  window.FreedayTimepicker = {
+    init: initTime,
+    initAll: initAll,
+    /* See api.setState above: the one call a render-once host needs. */
+    setState: function (root, state) {
+      var api = root && root._fdyTp ? root._fdyTp : null;
+      if (api && api.setState) api.setState(state);
+    }
+  };
 })();
 
 /* Freeday, toast API (optional, zero-dependency).

package/docs/agent-onboarding.md

@@ -33,9 +33,9 @@ and the code looks correct and fails later.**
 | Blazor (net8.0) | `@using Freeday.Blazor` (RCL) | `@bind-Value` |
 | Static HTML, Svelte, server-rendered templates… | no wrapper: raw markup + the enhancer script | `fdy-*` DOM events |
 
-The twelve: **FdyCombo · FdyDatepicker · FdyMonthpicker · FdyDateRange · FdyAutocomplete ·
-FdyCascade · FdyCfl · FdyChart · FdyTable · FdyModal · FdyDrawer · FdyAppShell**. In
-Vue/React/Blazor, **never hand-write the raw markup + enhancer for these twelve.** The raw path *appears* to work: the enhancer auto-initialises
+The thirteen: **FdyCombo · FdyDatepicker · FdyMonthpicker · FdyDateRange · FdyTimepicker ·
+FdyAutocomplete · FdyCascade · FdyCfl · FdyChart · FdyTable · FdyModal · FdyDrawer · FdyAppShell**. In
+Vue/React/Blazor, **never hand-write the raw markup + enhancer for these thirteen.** The raw path *appears* to work: the enhancer auto-initialises
 once on `DOMContentLoaded` and the first render is correct. Then it fails quietly: DOM your framework
 renders later is never hydrated, and the widget's state lives in the DOM instead of in your
 framework's state.

package/docs/getting-started.md

@@ -21,8 +21,8 @@ Freeday = **CSS** (semantic tokens + `fdy-*` classes) + **zero-dependency JS enh
    the enhancer owns the widget's DOM. You **listen for `fdy-*` events** (all bubbling
    `CustomEvent`s, data in `event.detail`) → store them in your framework state. Event/API contract
    table: [`integrations.md` §Event & API contract](integrations.md).
-   **On Vue, React or Blazor this is not the path to take for twelve of the components.** `FdyCombo`,
-   `FdyDatepicker`, `FdyMonthpicker`, `FdyDateRange`, `FdyAutocomplete`, `FdyCascade`, `FdyCfl`,
+   **On Vue, React or Blazor this is not the path to take for thirteen of the components.** `FdyCombo`,
+   `FdyDatepicker`, `FdyMonthpicker`, `FdyDateRange`, `FdyTimepicker`, `FdyAutocomplete`, `FdyCascade`, `FdyCfl`,
    `FdyChart`, `FdyTable`, `FdyModal`, `FdyDrawer`, `FdyAppShell` ship typed wrappers that own the state properly (Vue and
    React re-implement the interaction natively; Blazor wraps the enhancer over interop). Use them;
    the raw path is for the components without a wrapper, and for stacks without an adapter.
@@ -156,6 +156,13 @@ cp -r node_modules/@cahyo-dimas/freeday/dist ./assets/freeday   # copy into your
 ```
 > Two-file alternative: `freeday.tokens.css` (tokens) + `freeday.css` (components).
 
+> **The viewport meta is required, not decoration.** Without it a mobile engine lays the page out at
+> a default width near 980px, so `(max-width: 720px)` never matches and the kit's entire responsive
+> layer is absent: the app shell stands in its desktop form on a phone, sidebar visible and bottom
+> nav gone. That is not a hypothetical. It is what a fixture without the tag did on the first run of
+> the WebKit suite, reporting `window.innerWidth` 981 on an iPhone 7 descriptor, and it is the same
+> shape as the report that started that suite.
+
 ### 3. Load the enhancers before `</body>`
 ```html
   <script src="assets/freeday/freeday.js" defer></script>
@@ -191,7 +198,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.9.4"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.11.0"` (public npm package). `dist/` is
 committed and published → no build step; `npm ci` runs without auth.
 
 ### 2. Import the CSS + enhancers **once** in your entry (`src/main.ts`)
@@ -444,9 +451,9 @@ kit's CSS/enhancers), then bind:
 <FdyChart Type="donut" Values="_byCity" Labels="_cityLabels" AriaLabel="Revenue by city" />
 <FdyDrawer @bind-Open="_drawerOpen" Title="Detail" Side="right">…</FdyDrawer>
 ```
-Twelve components at parity with the Vue/React adapters: **`FdyModal`** · **`FdyDrawer`** (`@bind-Open`,
+Thirteen components at parity with the Vue/React adapters: **`FdyModal`** · **`FdyDrawer`** (`@bind-Open`,
 `Title`, `Size`/`Side`, `Dismissible`) · **`FdyCombo<TValue>`** · **`FdyDatepicker`** ·
-**`FdyMonthpicker`** (`@bind-Value` as `yyyy-MM`) · **`FdyAutocomplete`** · **`FdyCascade`** · **`FdyDateRange`** (`@bind-From`/`@bind-To`) ·
+**`FdyMonthpicker`** (`@bind-Value` as `yyyy-MM`) · **`FdyTimepicker`** (`@bind-Value` as `HH:MM`) · **`FdyAutocomplete`** · **`FdyCascade`** · **`FdyDateRange`** (`@bind-From`/`@bind-To`) ·
 **`FdyCfl<TRow>`** (async `LoadPage`) · **`FdyChart`** · **`FdyTable<TRow>`** (client sort/filter/page,
 or controlled `Sort`/`Filters`/`Page` for a server-paged table; `RowActivatable`, `RowDetail`) ·
 **`FdyAppShell`** (`@bind-NavOpen`). Each

package/docs/integrations.md

@@ -154,7 +154,7 @@ function Panel(): JSX.Element {
 ```
 > **Controlled alternative (parity with Vue's `v-model`):** `@cahyo-dimas/freeday/react` also exports
 > the typed components `FdyCombo` / `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` /
-> `FdyAutocomplete` / `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` /
+> `FdyTimepicker` / `FdyAutocomplete` / `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` /
 > `FdyAppShell`, with plain
 > `value`/`onChange` (props in, events out), no `data-fdy-*` + manual event listener:
 > ```tsx
@@ -200,7 +200,7 @@ document.addEventListener('fdy-form-invalid', (e) =>
 
 > **Native components (parity with Vue's `v-model` / React's `value`/`onChange`):** the
 > **`Freeday.Blazor`** RCL (net8.0, `adapters/blazor/`) ships the typed components `FdyCombo<TValue>` /
-> `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` / `FdyAutocomplete` / `FdyCascade` /
+> `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` / `FdyTimepicker` / `FdyAutocomplete` / `FdyCascade` /
 > `FdyCfl<TRow>` / `FdyChart` / `FdyTable<TRow>` / `FdyModal` / `FdyDrawer` / `FdyAppShell` with `@bind`, no `@ref` / manual `initAll` / `[JSInvokable]`:
 > ```razor
 > @using Freeday.Blazor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "3.9.4",
+  "version": "3.11.0",
   "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -96,14 +96,16 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test --test-concurrency=3 browser/color-mix.mjs browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/cfl-dialog-only.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/bottom-nav.mjs browser/picker-states.mjs browser/tabs-strip.mjs browser/tabs-vertical.mjs browser/menu-align.mjs browser/cfl-narrow.mjs browser/form-reveal.mjs browser/confirm-search-copy.mjs browser/daterange-settled.mjs browser/display-parts.mjs browser/table-empty.mjs browser/table-footer-text.mjs browser/month-mode.mjs browser/monthpicker.mjs browser/page-columns.mjs browser/table-hover.mjs browser/typed-popover.mjs browser/filter-parity.mjs browser/filter-wrap.mjs browser/filter-stack.mjs browser/harness-contract.mjs",
+    "test:browser": "node --test --test-concurrency=3 browser/color-mix.mjs browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/cfl-dialog-only.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/bottom-nav.mjs browser/picker-states.mjs browser/tabs-strip.mjs browser/tabs-vertical.mjs browser/menu-align.mjs browser/cfl-narrow.mjs browser/form-reveal.mjs browser/confirm-search-copy.mjs browser/daterange-settled.mjs browser/display-parts.mjs browser/table-empty.mjs browser/table-footer-text.mjs browser/month-mode.mjs browser/monthpicker.mjs browser/page-columns.mjs browser/table-hover.mjs browser/typed-popover.mjs browser/filter-parity.mjs browser/filter-wrap.mjs browser/filter-stack.mjs browser/timepicker.mjs browser/harness-contract.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit",
     "test:blazor": "dotnet test test/blazor -v quiet --nologo",
+    "test:webkit": "playwright test",
     "test:blazor-server": "node --test browser/blazor-server.mjs"
   },
   "devDependencies": {
+    "@playwright/test": "^1.64.1",
     "@types/react": "^19.2.17",
     "esbuild": "^0.28.1",
     "react": "^19.2.8",

package/src/base.css

@@ -35,9 +35,6 @@ a { color: var(--color-primary-strong); }
  * framework with its preflight OFF (the recommended pairing), a semantic <ul>/<ol> keeps native
  * bullets + a 40px indent; add this class (or a Freeday list component) to normalise it. */
 .fdy-list-reset { list-style: none; margin: 0; padding: 0; }
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
-}
 
 /* ===========================================================================
  * Reduce Motion: SETIAP transisi dinetralkan, bukan daftar yang dipelihara tangan.

package/src/components/avatar.css

@@ -1,5 +1,5 @@
 /* Freeday. Avatar */
-.fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;user-select:none;}
+.fdy-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary-strong);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;overflow:hidden;-webkit-user-select:none;user-select:none;}
 .fdy-avatar img{width:100%;height:100%;object-fit:cover;}
 /* --xs exists for an avatar INSIDE a control: `.fdy-btn--sm` is exactly 2rem tall, which is also
    `--sm`'s size, so a small avatar in a small button fills it edge to edge and the ghost border

package/src/components/breadcrumb.css

@@ -6,4 +6,4 @@
 .fdy-breadcrumb__link:hover{color:var(--color-primary-strong);text-decoration:underline;}
 .fdy-breadcrumb__link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.26);}
 .fdy-breadcrumb__item[aria-current="page"]{color:var(--color-text);font-weight:var(--weight-medium);}
-.fdy-breadcrumb__sep{color:var(--color-text-subtle);user-select:none;}
+.fdy-breadcrumb__sep{color:var(--color-text-subtle);-webkit-user-select:none;user-select:none;}

package/src/components/cfl.css

@@ -23,7 +23,13 @@
  * size, which is what made `.fdy-stats--inline` collapse to three zero tracks in 3.1.0. This box
  * takes its width from the dialog (`min(46rem, 100vw - …)`, an explicit width) and already scrolls
  * its own content, so it never sized to the table to begin with. */
-.fdy-cfl__results{container:fdy-cfl / inline-size;overflow:auto;max-height:min(24rem,50vh);}
+.fdy-cfl__results{overflow:auto;max-height:min(24rem,50vh);}
+/* Fenced the way composition.css:62 fences its own, so the declaration states the condition it
+   needs instead of relying on a browser to drop it. Safari 15.4 to 15.8 is inside the floor the
+   README states and has no container queries at all. */
+@supports (container-type:inline-size){
+  .fdy-cfl__results{container:fdy-cfl / inline-size;}
+}
 .fdy-cfl__results .fdy-table th{position:sticky;top:0;z-index:1;}
 
 .fdy-cfl__row{cursor:pointer;}
@@ -65,28 +71,69 @@
  *
  * Column headers ARE a real loss here, and a deliberate one: `<thead>` is hidden, because a header
  * row that costs a third of the width buys nothing when each row is labelled by its own title. */
-@container fdy-cfl (max-width: 30rem){
-  .fdy-cfl__results .fdy-table,
-  .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
-  .fdy-cfl__results .fdy-table thead{display:none;}
-  .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
-  .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
-  .fdy-cfl__row > td{display:block;padding:0;border:0;}
-  /* The title takes the whole first line, which is what pushes every remaining cell onto the second
-     one — no selector has to know how many columns there are, or which of them is last. */
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
-  .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
-  /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
-  .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
-  .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
-  .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
-  .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
-  /* The checkbox keeps its own line position beside the title rather than above it. */
-  .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+@supports (container-type:inline-size){
+  @container fdy-cfl (max-width: 30rem){
+    .fdy-cfl__results .fdy-table,
+    .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+    .fdy-cfl__results .fdy-table thead{display:none;}
+    .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+    .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+    .fdy-cfl__row > td{display:block;padding:0;border:0;}
+    /* The title takes the whole first line, which is what pushes every remaining cell onto the second
+       one — no selector has to know how many columns there are, or which of them is last. */
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+    .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+    /* Multi-select: the checkbox shares line one with the title, so the title claims the rest of it. */
+    .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+    /* The checkbox keeps its own line position beside the title rather than above it. */
+    .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+  }
+}
+
+/* The same block for a browser that has no container queries, which is every Safari from 15.4 to
+ * 15.8 and inside the floor the README states. There the @supports above is false, the stacked
+ * layout never applied, and a 372px dialog kept a three-column master-data table that scrolls on
+ * both axes.
+ *
+ * The condition is a VIEWPORT width, the only width this path can read. 32rem is derived from the
+ * dialog rather than picked: the dialog is min(46rem, 100vw - var(--space-8)) with --space-8 at
+ * 2rem, and the results box takes that width, so it sits at or under 30rem exactly when the
+ * viewport sits at or under 32rem. What a media query cannot answer is the case the container
+ * query exists for, a narrow dialog inside a wide viewport, which is a docked panel on a desktop;
+ * on those browsers that one case keeps the scrolling table it has always had.
+ *
+ * The body is a copy of the body above, because CSS has no way to share one declaration block
+ * between two different conditions. test/baseline.test.mjs compares the two, so an edit that
+ * reaches one of them and misses the other fails there. */
+@supports not (container-type:inline-size){
+  @media (max-width:32rem){
+    .fdy-cfl__results .fdy-table,
+    .fdy-cfl__results .fdy-table tbody{display:block;width:100%;}
+    .fdy-cfl__results .fdy-table thead{display:none;}
+    .fdy-cfl__row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);}
+    .fdy-cfl__results .fdy-table tbody tr:last-child{border-bottom:0;}
+    .fdy-cfl__row > td{display:block;padding:0;border:0;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check),
+    .fdy-cfl__row > .fdy-cfl__check + td{font-weight:var(--weight-semibold);color:var(--color-text);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check){flex:0 0 100%;}
+    .fdy-cfl__row > .fdy-cfl__check + td{flex:1 0 calc(100% - var(--space-6));}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td{font-size:var(--text-xs);color:var(--color-text-muted);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td:empty,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td:empty{display:none;}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) ~ td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td ~ td::before{content:"·";margin-right:var(--space-2);color:var(--color-text-subtle);}
+    .fdy-cfl__row > td:first-child:not(.fdy-cfl__check) + td::before,
+    .fdy-cfl__row > .fdy-cfl__check + td + td::before{content:none;}
+    .fdy-cfl__row > .fdy-cfl__check{flex:none;width:auto;align-self:center;}
+  }
 }