@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/dist/css/components/date-range-picker.css

@@ -0,0 +1,168 @@
+/* components/date-range-picker/date-range-picker.css */
+/* date-range-picker — one 12 px field on surface-3 holding two segmented dates, a dash and an 8 px calendar button;
+   the focused segment sits on a 6 px accent-soft pill that glides; invalid draws an error ring and a message below.
+   The popover (an anchored dialog: needs dialog.css and range-calendar.css) has 20 px corners and preset chips. */
+.mk-date-range-picker,
+mk-date-range-picker {
+  display: inline-block;
+  max-width: 100%;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 100%;
+  box-sizing: border-box;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font-variant-numeric: tabular-nums;
+  transition: box-shadow 0.2s ease;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field][aria-invalid='true'] {
+  box-shadow: 0 0 0 2px var(--mk-error, #d93025);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segments] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segments][aria-disabled='true'] {
+  opacity: 0.5;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment] {
+  position: relative;
+  z-index: 1;
+  padding: 0.2rem 0.15rem;
+  border-radius: 6px;
+  caret-color: transparent;
+  outline: none;
+  cursor: default;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment][data-mk-empty] {
+  color: var(--mk-muted);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment]:focus {
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment]::selection {
+  background: transparent;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment-literal] {
+  padding: 0 0.05rem;
+  color: var(--mk-muted);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment-focus] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 1.75rem;
+  margin-top: -0.875rem;
+  border-radius: 6px;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-dash] {
+  color: var(--mk-muted);
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-button] {
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: inherit;
+  cursor: pointer;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-button]:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-button]:disabled {
+  cursor: not-allowed;
+}
+
+:is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-error] {
+  margin: 0.4rem 0 0;
+  color: var(--mk-error, #d93025);
+  font-size: 0.8125rem;
+}
+
+/* Classes, not data attributes: the copy that folds back into the button on close keeps only the classes. */
+.mk-dialog.mk-range-popover {
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+  width: max-content;
+  max-width: calc(100vw - 16px);
+}
+
+.mk-dialog.mk-range-popover > .mk-range-calendar {
+  display: grid;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+[data-mk-range-presets] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  padding: 0.75rem 0.75rem 0;
+}
+
+[data-mk-range-preset] {
+  min-height: 2rem;
+  padding: 0 0.8rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+[data-mk-range-preset]:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment]:focus {
+    background: var(--mk-accent-soft);
+  }
+
+  :is(.mk-date-range-picker, mk-date-range-picker) [data-mk-segment-focus] {
+    display: none;
+  }
+
+  :is(.mk-date-range-picker, mk-date-range-picker) [data-mk-range-field] {
+    transition: none;
+  }
+}

package/dist/css/components/date-time-picker.css

@@ -0,0 +1,178 @@
+/* components/date-time-picker/date-time-picker.css */
+/* date-time-picker — one 12 px field on surface-3 holding the date and time segments and an 8 px calendar button;
+   the focused segment sits on a 6 px accent-soft pill; invalid draws an error ring and a message under it. The popover
+   (an anchored dialog: needs dialog.css, range-calendar.css and time-field.css) has 20 px corners. */
+.mk-date-time-picker,
+mk-date-time-picker {
+  display: inline-block;
+  max-width: 100%;
+}
+
+[data-mk-dt-field] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font-variant-numeric: tabular-nums;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-dt-field]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-dt-field]:has([aria-invalid='true']) {
+  box-shadow: 0 0 0 2px var(--mk-error, #c62828);
+}
+
+[data-mk-dt-field] [data-mk-segments] {
+  position: relative;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+}
+
+[data-mk-dt-field] [data-mk-segment] {
+  position: relative;
+  z-index: 1;
+  padding: 0.2rem 0.15rem;
+  border-radius: 6px;
+  caret-color: transparent;
+  outline: none;
+  cursor: default;
+}
+
+[data-mk-dt-field] [data-mk-segment][data-mk-empty] {
+  color: var(--mk-muted);
+}
+
+[data-mk-dt-field] [data-mk-segment]:focus {
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+[data-mk-dt-field] [data-mk-segment]::selection {
+  background: transparent;
+}
+
+[data-mk-dt-field] [data-mk-segment-literal] {
+  padding: 0 0.05rem;
+  color: var(--mk-muted);
+  white-space: pre;
+}
+
+[data-mk-dt-field] [data-mk-segment-focus] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 1.75rem;
+  margin-top: -0.875rem;
+  border-radius: 6px;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  pointer-events: none;
+}
+
+[data-mk-dt-button] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: inherit;
+  cursor: pointer;
+}
+
+[data-mk-dt-button]:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+[data-mk-dt-error] {
+  margin: 0.4rem 0 0;
+  color: var(--mk-error, #c62828);
+  font-size: 0.8125rem;
+}
+
+[data-mk-dt-error][hidden] {
+  display: none;
+}
+
+/* Classes, not data attributes: the copy that folds back into the button on close keeps only the classes. */
+.mk-dialog.mk-dt-popover {
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+  width: max-content;
+  max-width: calc(100vw - 16px);
+}
+
+.mk-dialog.mk-dt-popover > .mk-range-calendar {
+  display: grid;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding-bottom: 0.25rem;
+}
+
+[data-mk-dt-time-row] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.25rem 0.75rem;
+}
+
+[data-mk-dt-time-label] {
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+[data-mk-dt-footer] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem 0.75rem;
+}
+
+[data-mk-dt-footer] button {
+  min-height: 2.25rem;
+  padding: 0 0.9rem;
+  border: 0;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+[data-mk-dt-footer] [data-mk-dt-done] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-dt-field] [data-mk-segment]:focus {
+    background: var(--mk-accent-soft);
+  }
+
+  [data-mk-dt-field] [data-mk-segment-focus] {
+    display: none;
+  }
+
+  [data-mk-dt-field] {
+    transition: none;
+  }
+}

package/dist/css/components/drawer.css

@@ -0,0 +1,58 @@
+/* components/drawer/drawer.css */
+/* drawer — a full-height side panel (8 px from the edges, 400 px) or the bottom sheet; built on .mk-dialog. */
+.mk-dialog[data-mk-drawer] {
+  --mk-drawer-width: 400px;
+}
+
+.mk-dialog:is([data-mk-drawer='left'], [data-mk-drawer='right']):not([data-mk-placement='anchor']) {
+  position: fixed;
+  width: min(var(--mk-drawer-width), calc(100vw - 16px));
+  height: calc(100dvh - 16px);
+  max-height: none;
+  margin: 0;
+  border-radius: var(--mk-dialog-radius);
+}
+
+.mk-dialog[data-mk-drawer='left']:not([data-mk-placement='anchor']) {
+  inset: 8px auto 8px 8px;
+}
+
+.mk-dialog[data-mk-drawer='right']:not([data-mk-placement='anchor']) {
+  inset: 8px 8px 8px auto;
+}
+
+/* Footer actions stay at the bottom of the panel. */
+.mk-dialog[data-mk-drawer] [data-mk-part='footer'] {
+  margin-top: auto;
+}
+
+.mk-dialog[data-mk-drawer='bottom'] {
+  --mk-sheet-max-width: 640px;
+}
+
+/* Phones: the side panel keeps a strip of the page visible and squares its outer edge. */
+@media (max-width: 679px) {
+  .mk-dialog:is([data-mk-drawer='left'], [data-mk-drawer='right']):not([data-mk-placement='anchor']) {
+    width: min(var(--mk-drawer-width), 88vw);
+    height: 100dvh;
+    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
+  }
+
+  .mk-dialog[data-mk-drawer='left']:not([data-mk-placement='anchor']) {
+    inset: 0 auto 0 0;
+    border-radius: 0 var(--mk-dialog-radius) var(--mk-dialog-radius) 0;
+  }
+
+  .mk-dialog[data-mk-drawer='right']:not([data-mk-placement='anchor']) {
+    inset: 0 0 0 auto;
+    border-radius: var(--mk-dialog-radius) 0 0 var(--mk-dialog-radius);
+  }
+}
+
+mk-drawer {
+  display: contents;
+}
+
+mk-drawer:not(:defined) {
+  display: none;
+}

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

@@ -0,0 +1,201 @@
+/* components/editable-table/editable-table.css */
+/* editable-table — data-table (needs data-table.css) whose cells edit in place: a 2 px accent ring that glides from
+   cell to cell, editors that fill the cell (8 px, accent border), changed cells with an accent dot that pops and a
+   soft tint, invalid ones ringed in the error colour, new rows tinted, saved cells that flash; the bar of changes
+   (12 px, surface-3) folds open above the table with Descartar and Guardar. */
+.mk-editable-table,
+mk-editable-table {
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+  color: var(--mk-text);
+  font-size: 0.875rem;
+}
+
+[data-mk-editable] [data-mk-dt-scroll] {
+  position: relative;
+}
+
+[data-mk-editable] td[data-key] {
+  outline: none;
+}
+
+[data-mk-editable] td[data-mk-et-editable] {
+  cursor: cell;
+}
+
+[data-mk-et-ring] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+}
+
+[data-mk-editable] td[data-mk-et-dirty] {
+  position: relative;
+  background: color-mix(in srgb, var(--mk-accent) 9%, transparent);
+}
+
+[data-mk-editable] td[data-mk-et-dirty]::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--mk-accent);
+}
+
+[data-mk-editable] td[data-mk-et-pop]::after {
+  animation: mk-et-pop 0.4s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+@keyframes mk-et-pop {
+  from {
+    transform: scale(0);
+  }
+}
+
+[data-mk-editable] td[data-mk-et-invalid] {
+  background: color-mix(in srgb, var(--mk-error) 9%, transparent);
+  box-shadow: inset 0 0 0 2px var(--mk-error);
+}
+
+[data-mk-editable] td[data-mk-et-saved] {
+  animation: mk-et-saved 1.2s ease-out;
+}
+
+@keyframes mk-et-saved {
+  0%,
+  30% {
+    background: color-mix(in srgb, var(--mk-accent) 30%, transparent);
+  }
+}
+
+[data-mk-editable] tr[data-mk-et-new] td {
+  background: color-mix(in srgb, var(--mk-accent-soft) 45%, transparent);
+}
+
+[data-mk-editable] td[data-mk-et-editing] {
+  padding: 0 0.375rem;
+}
+
+[data-mk-et-editor] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 6rem;
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  border: 1.5px solid var(--mk-accent);
+  border-radius: 8px;
+  outline: none;
+  background: var(--mk-surface-1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 22%, transparent);
+  color: var(--mk-text);
+  font: inherit;
+  text-align: inherit;
+}
+
+[data-mk-et-editor][aria-invalid='true'] {
+  border-color: var(--mk-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-error) 22%, transparent);
+}
+
+[data-mk-et-save] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+}
+
+[data-mk-et-save][hidden],
+[data-mk-et-error][hidden] {
+  display: none;
+}
+
+[data-mk-et-save-text] {
+  flex: 1 1 auto;
+  font-weight: 500;
+}
+
+[data-mk-et-save-count] {
+  display: inline-block;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+[data-mk-et-error] {
+  flex: 1 1 100%;
+  order: 3;
+  color: var(--mk-error);
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+[data-mk-et-save] button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2.25rem;
+  padding: 0 0.875rem;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-et-save] button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-et-save] button:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+[data-mk-et-save] button[data-mk-et-save-button] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-et-save-button][aria-busy='true']::before {
+  content: '';
+  width: 0.875rem;
+  height: 0.875rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: mk-et-spin 0.8s linear infinite;
+}
+
+@keyframes mk-et-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-editable] td:is([data-mk-et-pop], [data-mk-et-saved])::after,
+  [data-mk-editable] td[data-mk-et-saved],
+  [data-mk-et-save-button][aria-busy='true']::before {
+    animation: none;
+  }
+
+  [data-mk-et-ring] {
+    transition: none;
+  }
+}

package/dist/css/components/empty-state.css

@@ -0,0 +1,61 @@
+/* components/empty-state/empty-state.css */
+/* empty-state — centred column: a 160 × 120 illustration on the theme's colours, a 1.125rem title, a muted line of
+   help (36ch) and the actions (kit buttons). The illustration's colours are variables, so a theme or a card can
+   recolour it. */
+.mk-empty-state,
+mk-empty-state {
+  --mk-empty-ink: var(--mk-muted);
+  --mk-empty-fill: var(--mk-surface-3);
+  --mk-empty-card: var(--mk-surface-1);
+  --mk-empty-accent: var(--mk-accent);
+  --mk-empty-soft: var(--mk-accent-soft);
+  --mk-empty-shadow: color-mix(in srgb, var(--mk-text) 9%, transparent);
+  --mk-empty-fill-ink: color-mix(in srgb, var(--mk-muted) 35%, transparent);
+  --mk-empty-alert: var(--mk-error);
+  --mk-empty-alert-soft: var(--mk-error-soft);
+  display: grid;
+  justify-items: center;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  max-width: 28rem;
+  margin-inline: auto;
+  padding: 2rem 1.25rem;
+  text-align: center;
+}
+
+[data-mk-empty-illustration] svg {
+  display: block;
+  width: min(160px, 50vw);
+  height: auto;
+  overflow: visible;
+}
+
+[data-mk-empty-title] {
+  margin: 0.25rem 0 0;
+  color: var(--mk-text);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+  text-wrap: balance;
+}
+
+[data-mk-empty-description] {
+  max-width: 36ch;
+  margin: 0;
+  color: var(--mk-muted);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+[data-mk-empty-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+:is(.mk-empty-state, mk-empty-state) [hidden] {
+  display: none;
+}