@hina-ui/vue 1.7.1 → 1.7.3

package/src/styles/timeline.css

@@ -0,0 +1,144 @@
+@layer components {
+  .hn-timeline {
+    --hn-timeline-gap: calc(var(--hn-stack-gap) * 1.5);
+  }
+
+  .hn-timeline-item {
+    display: grid;
+  }
+
+  .hn-timeline-marker {
+    min-inline-size: 1lh;
+    min-block-size: 1lh;
+  }
+
+  .hn-timeline-separator {
+    display: flex;
+    align-items: center;
+    gap: var(--hn-control-gap);
+  }
+
+  .hn-timeline-connector {
+    flex: 1;
+  }
+
+  .hn-timeline[data-orientation='vertical'] {
+    grid-template-columns: 0 auto minmax(0, 1fr);
+
+    &[data-align='end'] {
+      grid-template-columns: minmax(0, 1fr) auto 0;
+    }
+
+    &[data-opposite],
+    &[data-align='alternate'] {
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    }
+
+    > .hn-timeline-item {
+      grid-column: 1 / -1;
+      grid-template-columns: subgrid;
+
+      > .hn-timeline-separator {
+        grid-area: 1 / 2;
+        flex-direction: column;
+        padding-block-end: var(--hn-control-gap);
+
+        > .hn-timeline-connector {
+          inline-size: 1px;
+        }
+      }
+
+      > .hn-timeline-content,
+      > .hn-timeline-opposite {
+        padding-block-end: var(--hn-timeline-gap);
+      }
+
+      > .hn-timeline-content {
+        grid-area: 1 / 3;
+        padding-inline-start: var(--hn-inline-gap);
+      }
+
+      > .hn-timeline-opposite {
+        grid-area: 1 / 1;
+        padding-inline-end: var(--hn-inline-gap);
+        text-align: end;
+      }
+
+      &[data-side='end'] {
+        > .hn-timeline-content {
+          grid-column: 1;
+          padding-inline: 0 var(--hn-inline-gap);
+          text-align: end;
+        }
+
+        > .hn-timeline-opposite {
+          grid-column: 3;
+          padding-inline: var(--hn-inline-gap) 0;
+          text-align: start;
+        }
+      }
+
+      &:last-child > .hn-timeline-content,
+      &:last-child > .hn-timeline-opposite,
+      &:last-child > .hn-timeline-separator {
+        padding-block-end: 0;
+      }
+    }
+  }
+
+  .hn-timeline[data-orientation='horizontal'] {
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto auto;
+
+    > .hn-timeline-item {
+      grid-row: 1 / -1;
+      grid-template-rows: subgrid;
+
+      > .hn-timeline-separator {
+        grid-row: 2;
+        padding-inline-end: var(--hn-control-gap);
+
+        > .hn-timeline-connector {
+          block-size: 1px;
+        }
+      }
+
+      > .hn-timeline-content,
+      > .hn-timeline-opposite {
+        padding-inline-end: var(--hn-inline-gap);
+      }
+
+      > .hn-timeline-content {
+        grid-row: 3;
+        padding-block-start: var(--hn-inline-gap);
+      }
+
+      > .hn-timeline-opposite {
+        grid-row: 1;
+        padding-block-end: var(--hn-inline-gap);
+        align-self: end;
+      }
+
+      &[data-side='end'] {
+        > .hn-timeline-content {
+          grid-row: 1;
+          padding-block: 0 var(--hn-inline-gap);
+          align-self: end;
+        }
+
+        > .hn-timeline-opposite {
+          grid-row: 3;
+          padding-block: var(--hn-inline-gap) 0;
+          align-self: start;
+        }
+      }
+
+      &:last-child > .hn-timeline-content,
+      &:last-child > .hn-timeline-opposite,
+      &:last-child > .hn-timeline-separator {
+        padding-inline-end: 0;
+      }
+    }
+  }
+}

package/src/styles/tokens.css

@@ -9,6 +9,8 @@
 @import './spoiler.css';
 @import './scroll.css';
 @import './data-table.css';
+@import './timeline.css';
+@import './stepper.css';
 @import './base.css';
 
 @source '../components/**/*.vue';

package/src/styles/typography.css

@@ -63,8 +63,7 @@
     text-align: start;
   }
 
-  & th,
-  & td {
+  & :where(th, td) {
     border-block-end: 1px solid var(--hn-border);
     padding: 0.5em 0.75em;
   }