@yewdiel21/motion-kit 0.14.0 → 0.15.0

package/dist/css/components/add-to-cart.css

@@ -0,0 +1,72 @@
+/* components/add-to-cart/add-to-cart.css */
+/* add-to-cart — the little box that carries the product to the cart: a kraft front with a tape stripe in the accent,
+   two flaps that close over the picture, a soft shadow; it flies above everything and never takes the pointer. */
+.mk-add-to-cart,
+mk-add-to-cart {
+  display: inline-flex;
+}
+
+[data-mk-cart-box] {
+  --mk-cart-box: #c99a62;
+  --mk-cart-box-shade: #b0824d;
+  --mk-cart-tape: var(--mk-accent);
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.28));
+}
+
+[data-mk-cart-thumb] {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+[data-mk-cart-front] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 70%;
+  border-radius: 4px 4px 8px 8px;
+  background: linear-gradient(180deg, var(--mk-cart-box), var(--mk-cart-box-shade));
+  transform-origin: 50% 100%;
+}
+
+[data-mk-cart-tape] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 10px;
+  height: 100%;
+  margin-left: -5px;
+  border-radius: 0 0 2px 2px;
+  background: var(--mk-cart-tape);
+  opacity: 0.9;
+  transform-origin: 50% 0;
+}
+
+[data-mk-cart-flap] {
+  position: absolute;
+  top: 18%;
+  width: 50%;
+  height: 14%;
+  background: var(--mk-cart-box-shade);
+}
+
+[data-mk-cart-flap='left'] {
+  left: 0;
+  border-radius: 4px 0 0 2px;
+  transform-origin: 0 100%;
+}
+
+[data-mk-cart-flap='right'] {
+  right: 0;
+  border-radius: 0 4px 2px 0;
+  transform-origin: 100% 100%;
+}

package/dist/css/components/bidirectional-slider.css

@@ -0,0 +1,168 @@
+/* components/bidirectional-slider/bidirectional-slider.css */
+/* bidirectional-slider — a chunky 12 px track whose fill grows from the origin notch towards the thumb:
+   "more" in the accent, "less" in a tint of it. − and + sit at the ends; the bubble shows the signed value while held. */
+.mk-bidirectional-slider,
+mk-bidirectional-slider {
+  --mk-bislider-height: 2.75rem;
+  --mk-bislider-track: var(--mk-surface-2);
+  --mk-bislider-more: var(--mk-accent);
+  --mk-bislider-less: color-mix(in srgb, var(--mk-accent) 45%, var(--mk-surface-2));
+  display: grid;
+  grid-template-columns: auto minmax(6rem, 1fr) auto;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  max-width: 26rem;
+  color: var(--mk-text);
+}
+
+[data-mk-bislider-track] {
+  position: relative;
+  height: var(--mk-bislider-height);
+  border-radius: 12px;
+  background: var(--mk-bislider-track);
+  touch-action: none;
+}
+
+[data-mk-bislider-track]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-bislider-clip] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+[data-mk-bislider-fill] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--mk-bislider-more);
+  transition: background-color 0.2s ease;
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-side='less'] [data-mk-bislider-fill] {
+  background: var(--mk-bislider-less);
+}
+
+[data-mk-bislider-notch] {
+  position: absolute;
+  top: 30%;
+  bottom: 30%;
+  width: 2px;
+  margin-left: -1px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--mk-text) 30%, transparent);
+}
+
+[data-mk-bislider-thumb] {
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  width: 4px;
+  margin-left: -2px;
+  border-radius: 4px;
+  background: var(--mk-text);
+  pointer-events: none;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-held] [data-mk-bislider-thumb] {
+  transform: scale(1.5, 1.2);
+}
+
+[data-mk-bislider-bubble] {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-glass-inverse);
+  box-shadow: var(--mk-glass-bevel);
+  color: var(--mk-on-glass-inverse);
+  font: 600 0.75rem/1.2 var(--mk-font);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, 4px) scale(0.85);
+  transform-origin: 50% 100%;
+  transition:
+    opacity 0.15s ease,
+    transform 0.3s var(--mk-ease-swatch);
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider):is([data-mk-held], :has(input:focus-visible)) [data-mk-bislider-bubble] {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+}
+
+[data-mk-bislider-input] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: grab;
+  appearance: none;
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider)[data-mk-held] [data-mk-bislider-input] {
+  cursor: grabbing;
+}
+
+:is([data-mk-bislider-less], [data-mk-bislider-more]) {
+  display: grid;
+  place-items: center;
+  width: var(--mk-bislider-height);
+  height: var(--mk-bislider-height);
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is([data-mk-bislider-less], [data-mk-bislider-more]) svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (hover: hover) {
+  :is([data-mk-bislider-less], [data-mk-bislider-more]):hover {
+    background: var(--mk-surface-2);
+  }
+}
+
+:is(.mk-bidirectional-slider, mk-bidirectional-slider):has(input:disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-bislider-thumb],
+  [data-mk-bislider-bubble] {
+    transition: opacity 0.15s ease;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-bislider-fill] {
+    background: Highlight !important;
+  }
+  [data-mk-bislider-track] {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/css/components/data-table.css

@@ -1,10 +1,12 @@
 /* components/data-table/data-table.css */
 /* data-table — a toolbar (a 12 px search on surface-3, 12 px tool buttons with an accent count), the filter sentence
    on accent-soft, then the table on a 20 px panel: a sticky muted header with sort buttons whose arrow turns, 3rem
-   rows on hairlines, chosen rows tinted, 18 px checks that draw themselves, an 8 px row menu button and shimmering
-   bones while loading; the foot with the range, rows per page and the pager; the bar of the chosen rows on inverse
-   glass. Panels (columns, filters) are anchored .mk-dialog (dialog.css) surfaces with 20 px corners. The table
-   scrolls sideways inside its panel when it is wider; --mk-dt-max-height lets it scroll down too. */
+   rows on hairlines, chosen rows softly tinted with an accent edge (their data stays readable), 18 px checks that
+   draw themselves, an 8 px row menu button and shimmering bones while loading; the foot with the range, the rows
+   per page menu and the pager; the bar of the chosen rows takes the toolbar's place, so it never covers a row.
+   Panels and menus (columns, filters, rows per page, row actions) are anchored .mk-dialog (dialog.css) surfaces with
+   20 px corners and 8 px items. The table scrolls sideways inside its panel when it is wider; --mk-dt-max-height
+   lets it scroll down too. */
 .mk-data-table,
 mk-data-table {
   --mk-dt-max-height: none;
@@ -18,6 +20,8 @@ mk-data-table {
 
 /* ── The toolbar ─────────────────────────────────────────────────────────── */
 [data-mk-dt-bar] {
+  grid-row: 1;
+  grid-column: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -87,6 +91,7 @@ mk-data-table {
 }
 
 [data-mk-dt-tool]:focus-visible,
+[data-mk-dt-size-button]:focus-visible,
 [data-mk-dt-sort]:focus-visible,
 [data-mk-dt-row-menu]:focus-visible,
 [data-mk-dt-pager] button:focus-visible,
@@ -224,8 +229,17 @@ mk-data-table {
   background: color-mix(in srgb, var(--mk-text) 3%, transparent);
 }
 
+/* A chosen row: a light tint and an accent edge, never a fill that hides the data (on OLED the accent is white). */
 [data-mk-dt-table] tbody tr[data-selected] {
-  background: color-mix(in srgb, var(--mk-accent-soft) 60%, transparent);
+  background: color-mix(in srgb, var(--mk-accent) 7%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected]:hover {
+  background: color-mix(in srgb, var(--mk-accent) 11%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected] > :first-child {
+  box-shadow: inset 3px 0 0 var(--mk-accent);
 }
 
 [data-mk-dt-table] td mark {
@@ -297,7 +311,7 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   width: 1.125rem;
   height: 1.125rem;
   box-sizing: border-box;
-  border: 1.5px solid var(--mk-outline);
+  border: 2px solid var(--mk-outline);
   border-radius: 5px;
   color: transparent;
   vertical-align: middle;
@@ -318,6 +332,9 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
 }
 
 [data-mk-dt-check] svg {
+  display: block;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
 }
 
@@ -423,14 +440,35 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   margin-left: auto;
 }
 
-[data-mk-dt-size] select {
+[data-mk-dt-size-button] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
   height: 2rem;
-  padding: 0 0.5rem;
+  padding: 0 0.375rem 0 0.75rem;
   border: 1px solid var(--mk-outline-soft);
   border-radius: 8px;
   background: var(--mk-surface-1);
   color: var(--mk-text);
   font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-size-button]:hover,
+[data-mk-dt-size-button][aria-expanded='true'] {
+  background: var(--mk-surface-2);
+}
+
+[data-mk-dt-size-button] svg {
+  flex: none;
+  color: var(--mk-muted);
+  transition: transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-dt-size-button][aria-expanded='true'] svg {
+  transform: rotate(180deg);
 }
 
 [data-mk-dt-pager] {
@@ -464,24 +502,28 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
 }
 
 /* ── The bar of the chosen rows ──────────────────────────────────────────── */
+/* It shares the toolbar's grid cell and covers it while rows are chosen: the rows stay in view. */
 [data-mk-dt-bulk] {
-  position: absolute;
-  right: 0;
-  bottom: 3.25rem;
-  left: 0;
-  z-index: 3;
+  position: relative;
+  z-index: 2;
+  grid-row: 1;
+  grid-column: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  align-self: stretch;
   gap: 0.25rem 0.5rem;
-  width: max-content;
-  max-width: calc(100% - 1rem);
-  margin-inline: auto;
-  padding: 0.375rem 0.375rem 0.375rem 1rem;
-  border-radius: 20px;
-  background: var(--mk-glass-inverse, var(--mk-text));
-  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
-  color: var(--mk-on-glass-inverse, var(--mk-surface-1));
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0.25rem 0.25rem 0.25rem 1rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+.mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar],
+mk-data-table:has(> [data-mk-dt-bulk]:not([hidden])) > [data-mk-dt-bar] {
+  visibility: hidden;
 }
 
 [data-mk-dt-bulk-label] {
@@ -505,12 +547,17 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   height: 2rem;
   padding: 0 0.75rem;
   border: 0;
-  border-radius: 12px;
-  background: color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
   color: inherit;
   font: inherit;
   font-weight: 500;
   cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-bulk] button:hover {
+  background: var(--mk-surface-2);
 }
 
 [data-mk-dt-bulk] button[data-danger] {
@@ -518,23 +565,31 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   color: var(--mk-on-error, #fff);
 }
 
-[data-mk-dt-select-all] {
+[data-mk-dt-bulk] [data-mk-dt-select-all] {
+  background: none;
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 
-[data-mk-dt-bulk-close] {
+/* The close button is a square with its cross in the middle (the bar's button padding must not reach it). */
+[data-mk-dt-bulk] [data-mk-dt-bulk-close] {
   display: inline-grid;
   place-items: center;
   width: 2rem;
+  margin-left: auto;
   padding: 0;
 }
 
+[data-mk-dt-bulk-close] svg {
+  display: block;
+}
+
 /* ── Panels and the row menu ─────────────────────────────────────────────── */
 .mk-dialog.mk-dt-panel {
   --mk-dialog-radius: 20px;
   --mk-dialog-bg: var(--mk-surface-1);
-  --mk-dialog-shadow: 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  /* A hairline keeps the panel apart from the table under it (on OLED both are near black). */
+  --mk-dialog-shadow: 0 0 0 1px var(--mk-outline-soft), 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
   gap: 0.5rem;
   width: max-content;
   min-width: min(14rem, calc(100vw - 32px));
@@ -575,6 +630,45 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   background: var(--mk-surface-2);
 }
 
+/* The row menu and the rows per page menu look like the panels: 20 px surface, 8 px items, the same hover. */
+.mk-dialog.mk-dt-panel.mk-dt-menu {
+  gap: 0.125rem;
+  min-width: 9rem;
+  padding: 0.375rem;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] {
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.625rem;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: normal;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item]:hover,
+.mk-dialog.mk-dt-menu [data-mk-item]:focus-visible {
+  background: var(--mk-surface-2);
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item] svg {
+  flex: none;
+  margin-left: auto;
+  opacity: 0;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] {
+  font-weight: 600;
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][aria-checked='true'] svg {
+  opacity: 1;
+}
+
 .mk-dialog.mk-dt-menu [data-mk-item][data-danger] {
   color: var(--mk-error);
 }
@@ -585,6 +679,7 @@ th[data-direction='desc'] [data-mk-dt-sort] svg {
   }
 
   [data-mk-dt-sort] svg,
+  [data-mk-dt-size-button] svg,
   [data-mk-dt-check] {
     transition: none;
   }

package/dist/css/components/filter-builder.css

@@ -89,7 +89,13 @@ mk-filter-builder {
   min-width: 0;
 }
 
-[data-mk-fb-rule] :is(select, input) {
+/* Choices are the kit's select (select.css draws the button); inputs share its look. */
+[data-mk-fb-rule] .mk-select {
+  min-width: 8rem;
+  max-width: 100%;
+}
+
+[data-mk-fb-rule] input {
   box-sizing: border-box;
   min-width: 0;
   height: 2.5rem;
@@ -104,22 +110,11 @@ mk-filter-builder {
   transition: box-shadow 0.2s ease;
 }
 
-[data-mk-fb-rule] select {
-  max-width: 100%;
-  padding-right: 1.9rem;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-position: right 0.55rem center;
-  background-repeat: no-repeat;
-  background-size: 1rem;
-  cursor: pointer;
-}
-
 [data-mk-fb-rule] input {
   width: 9rem;
 }
 
-[data-mk-fb-rule] :is(select, input):focus-visible {
+[data-mk-fb-rule] input:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
 }
 
@@ -218,7 +213,7 @@ mk-filter-builder {
 }
 
 @media (max-width: 480px) {
-  [data-mk-fb-rule] :is(select, input) {
+  [data-mk-fb-rule] :is(.mk-select, input) {
     flex: 1 1 8rem;
   }
 }
@@ -226,7 +221,7 @@ mk-filter-builder {
 @media (prefers-reduced-motion: reduce) {
   [data-mk-fb-combinator] [role='radio'],
   [data-mk-fb-actions] button,
-  [data-mk-fb-rule] :is(select, input) {
+  [data-mk-fb-rule] input {
     transition: none;
   }
 }