@sentropic/design-system-vue 0.4.0 → 0.6.0

package/dist/styles.css

@@ -6800,3 +6800,193 @@
   gap: 0.5rem;
 }
 
+/* Layout system — Flex / Stack / Inline / Container / Row / Col / Hidden / Divider */
+.st-flex {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* Container */
+.st-container {
+  box-sizing: border-box;
+  inline-size: 100%;
+  margin-inline: auto;
+}
+
+.st-container--sm {
+  max-inline-size: var(--st-container-sm, 40rem);
+}
+
+.st-container--md {
+  max-inline-size: var(--st-container-md, 48rem);
+}
+
+.st-container--lg {
+  max-inline-size: var(--st-container-lg, 64rem);
+}
+
+.st-container--xl {
+  max-inline-size: var(--st-container-xl, 80rem);
+}
+
+.st-container--full {
+  max-inline-size: none;
+}
+
+.st-container--padded {
+  padding-inline: var(--st-spacing-4, 1rem);
+}
+
+/* Row */
+.st-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  inline-size: 100%;
+  min-width: 0;
+}
+
+/* Col */
+.st-col {
+  box-sizing: border-box;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.st-col--auto {
+  flex-basis: auto;
+}
+
+@media (min-width: 640px) {
+  .st-col--has-sm {
+    flex-basis: var(--st-col-sm);
+    max-inline-size: var(--st-col-sm);
+    flex-grow: 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .st-col--has-md {
+    flex-basis: var(--st-col-md);
+    max-inline-size: var(--st-col-md);
+    flex-grow: 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .st-col--has-lg {
+    flex-basis: var(--st-col-lg);
+    max-inline-size: var(--st-col-lg);
+    flex-grow: 0;
+  }
+}
+
+/* Hidden — breakpoints: sm 640 / md 768 / lg 1024 / xl 1280. */
+.st-hidden {
+  display: contents;
+}
+
+/* below: hidden when viewport < breakpoint */
+@media (max-width: 639.98px) {
+  .st-hidden--below-sm {
+    display: none !important;
+  }
+}
+@media (max-width: 767.98px) {
+  .st-hidden--below-md {
+    display: none !important;
+  }
+}
+@media (max-width: 1023.98px) {
+  .st-hidden--below-lg {
+    display: none !important;
+  }
+}
+@media (max-width: 1279.98px) {
+  .st-hidden--below-xl {
+    display: none !important;
+  }
+}
+
+/* above: hidden when viewport >= breakpoint */
+@media (min-width: 640px) {
+  .st-hidden--above-sm {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) {
+  .st-hidden--above-md {
+    display: none !important;
+  }
+}
+@media (min-width: 1024px) {
+  .st-hidden--above-lg {
+    display: none !important;
+  }
+}
+@media (min-width: 1280px) {
+  .st-hidden--above-xl {
+    display: none !important;
+  }
+}
+
+/* Divider */
+.st-divider {
+  border: 0;
+  box-sizing: border-box;
+  color: var(--st-semantic-border-subtle, #e2e8f0);
+}
+
+.st-divider--horizontal:not(.st-divider--labeled) {
+  block-size: 0;
+  border-block-start-width: 1px;
+  border-block-start-style: solid;
+  border-block-start-color: currentColor;
+  inline-size: 100%;
+}
+
+.st-divider--vertical {
+  align-self: stretch;
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: currentColor;
+  display: inline-block;
+  inline-size: 0;
+  min-block-size: 1em;
+}
+
+.st-divider--dashed.st-divider--horizontal:not(.st-divider--labeled) {
+  border-block-start-style: dashed;
+}
+
+.st-divider--dashed.st-divider--vertical {
+  border-inline-start-style: dashed;
+}
+
+.st-divider--labeled {
+  align-items: center;
+  display: flex;
+  gap: var(--st-spacing-3, 0.75rem);
+  inline-size: 100%;
+}
+
+.st-divider__line {
+  block-size: 0;
+  border-block-start-width: 1px;
+  border-block-start-style: solid;
+  border-block-start-color: currentColor;
+  flex: 1 1 0;
+}
+
+.st-divider--dashed .st-divider__line {
+  border-block-start-style: dashed;
+}
+
+.st-divider__label {
+  color: var(--st-semantic-text-secondary, inherit);
+  flex: 0 0 auto;
+  font-size: var(--st-font-size-sm, 0.875rem);
+  line-height: 1;
+  white-space: nowrap;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-vue",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Vue 3 components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {