@0001-labs/design-system-1 0.3.0-alpha.23 → 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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Forrige måned",
     "Next month": "Næste måned",
+    "Previous year": "Forrige år",
+    "Next year": "Næste år",
+    "Earlier years": "Tidligere år",
+    "Later years": "Senere år",
+    "Choose a month and year": "Vælg måned og år",
     "Choose a date": "Vælg en dato",
     "Date": "Dato",
     "W{week}": "U{week}",

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ü",
@@ -111,6 +113,11 @@
     "key.pagedown": "Bild ab",
     "Previous month": "Vorheriger Monat",
     "Next month": "Nächster Monat",
+    "Previous year": "Vorheriges Jahr",
+    "Next year": "Nächstes Jahr",
+    "Earlier years": "Frühere Jahre",
+    "Later years": "Spätere Jahre",
+    "Choose a month and year": "Monat und Jahr wählen",
     "Choose a date": "Datum wählen",
     "Date": "Datum",
     "W{week}": "KW{week}",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "PgDn",
     "Previous month": "Previous month",
     "Next month": "Next month",
+    "Previous year": "Previous year",
+    "Next year": "Next year",
+    "Earlier years": "Earlier years",
+    "Later years": "Later years",
+    "Choose a month and year": "Choose a month and year",
     "Choose a date": "Choose a date",
     "Date": "Date",
     "W{week}": "W{week}",

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ú",
@@ -111,6 +113,11 @@
     "key.pagedown": "Av Pág",
     "Previous month": "Mes anterior",
     "Next month": "Mes siguiente",
+    "Previous year": "Año anterior",
+    "Next year": "Año siguiente",
+    "Earlier years": "Años anteriores",
+    "Later years": "Años siguientes",
+    "Choose a month and year": "Elegir mes y año",
     "Choose a date": "Elegir una fecha",
     "Date": "Fecha",
     "W{week}": "S{week}",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Edellinen kuukausi",
     "Next month": "Seuraava kuukausi",
+    "Previous year": "Edellinen vuosi",
+    "Next year": "Seuraava vuosi",
+    "Earlier years": "Aiemmat vuodet",
+    "Later years": "Myöhemmät vuodet",
+    "Choose a month and year": "Valitse kuukausi ja vuosi",
     "Choose a date": "Valitse päivämäärä",
     "Date": "Päivämäärä",
     "W{week}": "Vk{week}",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page suiv.",
     "Previous month": "Mois précédent",
     "Next month": "Mois suivant",
+    "Previous year": "Année précédente",
+    "Next year": "Année suivante",
+    "Earlier years": "Années précédentes",
+    "Later years": "Années suivantes",
+    "Choose a month and year": "Choisir le mois et l’année",
     "Choose a date": "Choisir une date",
     "Date": "Date",
     "W{week}": "S{week}",

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",
@@ -104,6 +106,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Fyrri mánuður",
     "Next month": "Næsti mánuður",
+    "Previous year": "Fyrra ár",
+    "Next year": "Næsta ár",
+    "Earlier years": "Fyrri ár",
+    "Later years": "Síðari ár",
+    "Choose a month and year": "Velja mánuð og ár",
     "Choose a date": "Veldu dagsetningu",
     "Date": "Dagsetning",
     "W{week}": "V{week}",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Pag giù",
     "Previous month": "Mese precedente",
     "Next month": "Mese successivo",
+    "Previous year": "Anno precedente",
+    "Next year": "Anno successivo",
+    "Earlier years": "Anni precedenti",
+    "Later years": "Anni successivi",
+    "Choose a month and year": "Scegli mese e anno",
     "Choose a date": "Scegli una data",
     "Date": "Data",
     "W{week}": "S{week}",

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": "メニュー",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "前の月",
     "Next month": "次の月",
+    "Previous year": "前の年",
+    "Next year": "次の年",
+    "Earlier years": "前の12年",
+    "Later years": "次の12年",
+    "Choose a month and year": "年と月を選択",
     "Choose a date": "日付を選択",
     "Date": "日付",
     "W{week}": "第{week}週",

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": "메뉴",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "이전 달",
     "Next month": "다음 달",
+    "Previous year": "이전 연도",
+    "Next year": "다음 연도",
+    "Earlier years": "이전 연도들",
+    "Later years": "다음 연도들",
+    "Choose a month and year": "연도와 월 선택",
     "Choose a date": "날짜 선택",
     "Date": "날짜",
     "W{week}": "{week}주",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Forrige måned",
     "Next month": "Neste måned",
+    "Previous year": "Forrige år",
+    "Next year": "Neste år",
+    "Earlier years": "Tidligere år",
+    "Later years": "Senere år",
+    "Choose a month and year": "Velg måned og år",
     "Choose a date": "Velg en dato",
     "Date": "Dato",
     "W{week}": "U{week}",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Mês anterior",
     "Next month": "Próximo mês",
+    "Previous year": "Ano anterior",
+    "Next year": "Próximo ano",
+    "Earlier years": "Anos anteriores",
+    "Later years": "Anos seguintes",
+    "Choose a month and year": "Escolher mês e ano",
     "Choose a date": "Escolher uma data",
     "Date": "Data",
     "W{week}": "S{week}",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Mês anterior",
     "Next month": "Mês seguinte",
+    "Previous year": "Ano anterior",
+    "Next year": "Ano seguinte",
+    "Earlier years": "Anos anteriores",
+    "Later years": "Anos seguintes",
+    "Choose a month and year": "Escolher mês e ano",
     "Choose a date": "Escolher uma data",
     "Date": "Data",
     "W{week}": "S{week}",

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",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Föregående månad",
     "Next month": "Nästa månad",
+    "Previous year": "Föregående år",
+    "Next year": "Nästa år",
+    "Earlier years": "Tidigare år",
+    "Later years": "Senare år",
+    "Choose a month and year": "Välj månad och år",
     "Choose a date": "Välj ett datum",
     "Date": "Datum",
     "W{week}": "V{week}",

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": "菜单",
@@ -111,6 +113,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "上个月",
     "Next month": "下个月",
+    "Previous year": "上一年",
+    "Next year": "下一年",
+    "Earlier years": "更早的年份",
+    "Later years": "更晚的年份",
+    "Choose a month and year": "选择月份和年份",
     "Choose a date": "选择日期",
     "Date": "日期",
     "W{week}": "第{week}周",

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.23 */
+/* 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.23 */
+/* 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.23 */
+/* 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.23 */
+/* 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;
+  }
+}