@0001-labs/design-system-1 0.3.0-alpha.24 → 0.3.0-alpha.25

package/DS1/0-face/shared-words.ts

@@ -3,7 +3,8 @@
  * again, Undo, Redo, Copy, Copy link, Remove, Rename, Duplicate, Download,
  * Refresh, Open, Send, Clear), Saved, Saving…, Untitled, Account, sign-in,
  * empty states, dates, the settings ds-cycle shows, ds-notice's words, the
- * carousel's and slide's (Carousel, Slide, Previous slide, Next slide, Pause, Play…), the feedback module's (OK, Copied, Could not copy, Notifications), a meter's
+ * carousel's and slide's (Carousel, Slide, Previous slide, Next slide, Pause, Play…), a
+ * sheet's moving rows (Move row 3, Row 3 moved to 5), the feedback module's (OK, Copied, Could not copy, Notifications), a meter's
  * words ("7 of 10") and a step's (Done, Failed), the site chrome's (Menu,
  * Contents), the key names keys.ts writes as words (`key.ctrl`, `key.shift` …)
  * and the names of the languages. Keyed by the English sentence,

package/DS1/0-face/translations/da.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} af {count}",
     "Previous slide": "Forrige dias",
     "Next slide": "Næste dias",
+    "Move row {index}": "Flyt række {index}",
+    "Row {from} moved to {to}": "Række {from} flyttet til {to}",
     "Pause": "Pause",
     "Play": "Afspil",
     "Menu": "Menu",

package/DS1/0-face/translations/de.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} von {count}",
     "Previous slide": "Vorherige Folie",
     "Next slide": "Nächste Folie",
+    "Move row {index}": "Zeile {index} verschieben",
+    "Row {from} moved to {to}": "Zeile {from} nach {to} verschoben",
     "Pause": "Pause",
     "Play": "Abspielen",
     "Menu": "Menü",

package/DS1/0-face/translations/en.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} of {count}",
     "Previous slide": "Previous slide",
     "Next slide": "Next slide",
+    "Move row {index}": "Move row {index}",
+    "Row {from} moved to {to}": "Row {from} moved to {to}",
     "Pause": "Pause",
     "Play": "Play",
     "Menu": "Menu",

package/DS1/0-face/translations/es.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} de {count}",
     "Previous slide": "Diapositiva anterior",
     "Next slide": "Diapositiva siguiente",
+    "Move row {index}": "Mover fila {index}",
+    "Row {from} moved to {to}": "Fila {from} movida a {to}",
     "Pause": "Pausar",
     "Play": "Reproducir",
     "Menu": "Menú",

package/DS1/0-face/translations/fi.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index}/{count}",
     "Previous slide": "Edellinen dia",
     "Next slide": "Seuraava dia",
+    "Move row {index}": "Siirrä riviä {index}",
+    "Row {from} moved to {to}": "Rivi {from} siirretty kohtaan {to}",
     "Pause": "Tauko",
     "Play": "Toista",
     "Menu": "Valikko",

package/DS1/0-face/translations/fr.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} sur {count}",
     "Previous slide": "Diapositive précédente",
     "Next slide": "Diapositive suivante",
+    "Move row {index}": "Déplacer la ligne {index}",
+    "Row {from} moved to {to}": "Ligne {from} déplacée en {to}",
     "Pause": "Pause",
     "Play": "Lecture",
     "Menu": "Menu",

package/DS1/0-face/translations/is.json

@@ -85,6 +85,8 @@
     "{index} of {count}": "{index} af {count}",
     "Previous slide": "Fyrri glæra",
     "Next slide": "Næsta glæra",
+    "Move row {index}": "Færa röð {index}",
+    "Row {from} moved to {to}": "Röð {from} færð í {to}",
     "Pause": "Gera hlé",
     "Play": "Spila",
     "Menu": "Valmynd",

package/DS1/0-face/translations/it.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} di {count}",
     "Previous slide": "Slide precedente",
     "Next slide": "Slide successiva",
+    "Move row {index}": "Sposta la riga {index}",
+    "Row {from} moved to {to}": "Riga {from} spostata in {to}",
     "Pause": "Pausa",
     "Play": "Riproduci",
     "Menu": "Menu",

package/DS1/0-face/translations/ja.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{count} 枚中 {index} 枚目",
     "Previous slide": "前のスライド",
     "Next slide": "次のスライド",
+    "Move row {index}": "{index} 行目を移動",
+    "Row {from} moved to {to}": "{from} 行目を {to} 行目に移動しました",
     "Pause": "一時停止",
     "Play": "再生",
     "Menu": "メニュー",

package/DS1/0-face/translations/ko.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{count}개 중 {index}번째",
     "Previous slide": "이전 슬라이드",
     "Next slide": "다음 슬라이드",
+    "Move row {index}": "{index}행 이동",
+    "Row {from} moved to {to}": "{from}행을 {to}행으로 이동함",
     "Pause": "일시정지",
     "Play": "재생",
     "Menu": "메뉴",

package/DS1/0-face/translations/nb.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} av {count}",
     "Previous slide": "Forrige lysbilde",
     "Next slide": "Neste lysbilde",
+    "Move row {index}": "Flytt rad {index}",
+    "Row {from} moved to {to}": "Rad {from} flyttet til {to}",
     "Pause": "Pause",
     "Play": "Spill av",
     "Menu": "Meny",

package/DS1/0-face/translations/pt-BR.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} de {count}",
     "Previous slide": "Slide anterior",
     "Next slide": "Próximo slide",
+    "Move row {index}": "Mover linha {index}",
+    "Row {from} moved to {to}": "Linha {from} movida para {to}",
     "Pause": "Pausar",
     "Play": "Reproduzir",
     "Menu": "Menu",

package/DS1/0-face/translations/pt.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} de {count}",
     "Previous slide": "Diapositivo anterior",
     "Next slide": "Diapositivo seguinte",
+    "Move row {index}": "Mover linha {index}",
+    "Row {from} moved to {to}": "Linha {from} movida para {to}",
     "Pause": "Pausar",
     "Play": "Reproduzir",
     "Menu": "Menu",

package/DS1/0-face/translations/sv.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} av {count}",
     "Previous slide": "Föregående bild",
     "Next slide": "Nästa bild",
+    "Move row {index}": "Flytta rad {index}",
+    "Row {from} moved to {to}": "Rad {from} flyttad till {to}",
     "Pause": "Pausa",
     "Play": "Spela upp",
     "Menu": "Meny",

package/DS1/0-face/translations/zh.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "第 {index} 张，共 {count} 张",
     "Previous slide": "上一张",
     "Next slide": "下一张",
+    "Move row {index}": "移动第 {index} 行",
+    "Row {from} moved to {to}": "第 {from} 行已移到第 {to} 行",
     "Pause": "暂停",
     "Play": "播放",
     "Menu": "菜单",

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.24 */
+/* version 0.3.0-alpha.25 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.24 */
+/* version 0.3.0-alpha.25 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.24 */
+/* version 0.3.0-alpha.25 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/one.semantic.css

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.24 */
+/* DS1 — version 0.3.0-alpha.25 */
 /* A classless stylesheet for native HTML. No JavaScript is required. */
 
 /* It draws on Design system 1's measures: the 20px square, 14px type on

package/DS1/1-root/table.css

@@ -24,6 +24,14 @@
  * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table
  * `--ds-table-columns` (the number of data columns) and the scroll a height
  * with `--ds-table-height`.
+ *
+ * `data-reorderable` (set by `<ds-table sheet reorderable>`) gives each row
+ * number a grip, `.ds-table__handle` with the `handle` icon, in place of the
+ * number while the row is hovered or the grip focused. A lifted row
+ * (`tr[data-lifted]`) keeps the paper behind it and follows the pointer; while
+ * `data-moving` is on the table the other rows step aside in transform alone,
+ * a sortable list's 200ms on cubic-bezier(0.2, 0, 0, 1), and never under
+ * reduced motion.
  */
 
 .ds-table {
@@ -172,14 +180,14 @@
 .ds-table[data-sheet] thead :is(th, td) {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 3;
   background: var(--ds-table-paper);
 }
 .ds-table[data-sheet] thead tr + tr :is(th, td) {
   top: var(--ds-table-row);
 }
 .ds-table[data-sheet] thead .ds-table__number {
-  z-index: 3;
+  z-index: 4;
 }
 .ds-table[data-sheet] .ds-table__letters td {
   color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
@@ -198,3 +206,68 @@
   overflow: auto;
   overscroll-behavior: contain;
 }
+
+/* Rows that move: a grip on the number, the lifted row on paper, the others stepping aside. */
+.ds-table[data-sheet][data-reorderable] tbody .ds-table__number {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+.ds-table__index {
+  transition: opacity 100ms ease;
+}
+.ds-table__handle {
+  all: unset;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  color: var(--ds-reorder-color, light-dark(#777777, #cccccc));
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+.ds-table__handle:hover {
+  color: var(--ds-reorder-active-color, light-dark(#333333, #ffffff));
+}
+.ds-table__handle:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);
+}
+@media (hover: hover) {
+  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__handle { opacity: 1; }
+  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__index { opacity: 0; }
+}
+.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__handle { opacity: 1; }
+.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__index { opacity: 0; }
+.ds-table[data-moving] tbody tr {
+  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+.ds-table[data-moving],
+.ds-table[data-moving] * {
+  cursor: grabbing;
+}
+.ds-table[data-sheet] tbody tr[data-lifted] {
+  position: relative;
+  z-index: 2;
+  transition: none;
+}
+.ds-table[data-sheet] tbody tr[data-lifted] > :is(th, td) {
+  background: var(--ds-table-paper);
+  box-shadow: inset 0 1px var(--ds-table-rule);
+}
+.ds-table__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-table[data-moving] tbody tr,
+  .ds-table__index,
+  .ds-table__handle {
+    transition: none;
+  }
+}