@pure-ds/storybook 0.4.16 → 0.4.17

package/public/assets/pds/styles/pds-components.css

@@ -35,6 +35,36 @@
   height: 0;
 }
 
+/* Labeled horizontal rule: <hr data-content="OR"> */
+:where(hr[data-content]) {
+  position: relative;
+  border: none;
+  text-align: center;
+  height: auto;
+  overflow: visible;
+  
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--color-border), transparent);
+  }
+  
+  &::after {
+    content: attr(data-content);
+    position: relative;
+    display: inline-block;
+    padding: 0 var(--spacing-3);
+    background-color: var(--color-surface-base);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    line-height: var(--font-line-height-normal);
+  }
+}
+
 :where(dl) {
   margin: 0 0 var(--spacing-4) 0;
 }
@@ -62,6 +92,11 @@
   width: 100%;
 }
 
+/* Headings within header elements have tight spacing for intro content */
+:where(header) > :where(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+}
+
 :where(article), :where(section), :where(aside) {
   display: block;
   margin-bottom: var(--spacing-6);
@@ -168,7 +203,7 @@ form {
 }
 
 fieldset {
-  margin: 0 0 var(--spacing-2) 0;
+  margin: 0;
   padding: var(--spacing-5);
   width: 100%;
   background-color: color-mix(in oklab, var(--color-surface-subtle) 50%, transparent 50%);
@@ -243,7 +278,6 @@ fieldset fieldset fieldset > legend { font-size: var(--font-size-sm); }
 
 label {
   display: block;
-  margin-bottom: var(--spacing-3);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
   font-size: var(--font-size-sm);
@@ -947,16 +981,7 @@ a.btn-working {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background-color: var(--color-surface-base);
-
-  fieldset {
-    background-color: transparent;
-    margin-bottom: var(--spacing-3);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
+  
   .array-controls {
     padding-top: var(--spacing-3);
     border-top: 1px solid var(--color-border);
@@ -1104,82 +1129,30 @@ a.btn-working {
   vertical-align: middle;
   background-color: var(--color-gray-200);
   color: var(--color-gray-800);
-  border-radius: var(--radius-full);
-}
-
-.badge-primary {
-  background-color: var(--color-primary-600);
-  color: white;
-}
-
-.badge-secondary {
-  background-color: var(--color-secondary-600);
-  color: white;
-}
-
-.badge-success {
-  background-color: var(--color-success-600);
-  color: white;
-}
-
-.badge-info {
-  background-color: var(--color-info-600);
-  color: white;
-}
-
-.badge-warning {
-  background-color: var(--color-warning-600);
-  color: white;
 }
 
-.badge-danger {
-  background-color: var(--color-danger-600);
-  color: white;
-}
+.badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
+.badge-primary { background-color: var(--color-primary-600); }
+.badge-secondary { background-color: var(--color-secondary-600); }
+.badge-success { background-color: var(--color-success-600); }
+.badge-info { background-color: var(--color-info-600); }
+.badge-warning { background-color: var(--color-warning-600); }
+.badge-danger { background-color: var(--color-danger-600); }
 
 .badge-outline {
   background-color: transparent;
   border: 1px solid currentColor;
-
-  &.badge-primary {
-    color: var(--color-text-primary);
-  }
-
-  &.badge-secondary {
-    color: var(--color-secondary-600);
-  }
-
-  &.badge-success {
-    color: var(--color-success-600);
-  }
-
-  &.badge-info {
-    color: var(--color-info-600);
-  }
-
-  &.badge-warning {
-    color: var(--color-warning-600);
-  }
-
-  &.badge-danger {
-    color: var(--color-danger-600);
-  }
-}
-
-.badge-sm {
-  padding: 2px var(--spacing-1);
-  font-size: 10px;
+  &.badge-primary { color: var(--color-text-primary); }
+  &.badge-secondary { color: var(--color-secondary-600); }
+  &.badge-success { color: var(--color-success-600); }
+  &.badge-info { color: var(--color-info-600); }
+  &.badge-warning { color: var(--color-warning-600); }
+  &.badge-danger { color: var(--color-danger-600); }
 }
 
-.badge-lg {
-  padding: var(--spacing-2) var(--spacing-3);
-  font-size: var(--font-size-sm);
-}
-
-.pill {
-  padding: var(--spacing-1) var(--spacing-3);
-  border-radius: var(--radius-full);
-}
+.badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }
+.badge-lg { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
+.pill { padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); }
 
 
 
@@ -1213,8 +1186,7 @@ dialog {
     overlay 0.2s ease allow-discrete,
     display 0.2s ease allow-discrete;
   
-  /* Overflow handling */
-  overflow: hidden;
+  
 }
 
 /* Open state */
@@ -1316,7 +1288,7 @@ dialog {
   form > article,
   .dialog-body {
     flex: 1;
-    padding: var(--spacing-6);
+    padding: var(--spacing-3) var(--spacing-6);
     overflow-y: auto;
     overflow-x: hidden;
   }
@@ -1336,50 +1308,20 @@ dialog {
 }
 
 /* Dialog size modifiers */
-dialog.dialog-sm {
-  max-width: min(400px, calc(100vw - var(--spacing-8)));
-}
-
-dialog.dialog-lg {
-  max-width: min(800px, calc(100vw - var(--spacing-8)));
-}
-
-dialog.dialog-xl {
-  max-width: min(1200px, calc(100vw - var(--spacing-8)));
-}
-
-dialog.dialog-full {
-  max-width: calc(100vw - var(--spacing-8));
-  max-height: calc(100vh - var(--spacing-8));
-}
+dialog.dialog-sm { max-width: min(400px, calc(100vw - var(--spacing-8))); }
+dialog.dialog-lg { max-width: min(800px, calc(100vw - var(--spacing-8))); }
+dialog.dialog-xl { max-width: min(1200px, calc(100vw - var(--spacing-8))); }
+dialog.dialog-full { max-width: calc(100vw - var(--spacing-8)); max-height: calc(100vh - var(--spacing-8)); }
 
 /* Mobile responsiveness */
 @media (max-width: 639px) {
-  dialog {
-    max-width: 100vw;
-    max-height: 100vh;
-    border-radius: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0;
-  }
-  
-  dialog header,
-  dialog form > header,
-  dialog article,
-  dialog form > article,
-  dialog footer,
-  dialog form > footer {
-    padding: var(--spacing-4);
-  }
+  dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; top: 50%; transform: translateY(-50%); margin: 0; }
+  dialog header, dialog form > header, dialog article, dialog form > article, dialog footer, dialog form > footer { padding: var(--spacing-4); }
 }
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  dialog,
-  dialog::backdrop {
-    transition-duration: 0.01s !important;
-  }
+  dialog, dialog::backdrop { transition-duration: 0.01s !important; }
 }
 
 
@@ -1702,30 +1644,15 @@ pds-tabstrip {
 }
 
 @keyframes tabFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 /* Mobile responsive */
 @media (max-width: 639px) {
-  pds-tabstrip > nav {
-    gap: var(--spacing-1);
-  }
-
-  pds-tabstrip > nav > a {
-    padding: var(--spacing-2) var(--spacing-3);
-    font-size: var(--font-size-sm);
-  }
-
-  pds-tabstrip > pds-tabpanel[data-tabpanel] {
-    padding: var(--spacing-3) 0;
-  }
+  pds-tabstrip > nav { gap: var(--spacing-1); }
+  pds-tabstrip > nav > a { padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
+  pds-tabstrip > pds-tabpanel[data-tabpanel] { padding: var(--spacing-3) 0; }
 }
 
 
@@ -1839,106 +1766,41 @@ tbody {
 }
 
 /* Custom Scrollbars */
-
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
+::-webkit-scrollbar { width: 12px; height: 12px; }
+::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
   background: var(--color-secondary-300);
   border-radius: var(--radius-full);
   border: 3px solid transparent;
   background-clip: padding-box;
   transition: background-color var(--transition-fast);
-  
-  &:hover {
-    background: var(--color-secondary-400);
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-  
-  &:active {
-    background: var(--color-secondary-500);
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-  
+  &:hover { background: var(--color-secondary-400); border: 2px solid transparent; background-clip: padding-box; }
+  &:active { background: var(--color-secondary-500); border: 2px solid transparent; background-clip: padding-box; }
   @media (prefers-color-scheme: dark) {
     background: var(--color-secondary-600);
-    
-    &:hover {
-      background: var(--color-secondary-500);
-    }
-    
-    &:active {
-      background: var(--color-secondary-400);
-    }
+    &:hover { background: var(--color-secondary-500); }
+    &:active { background: var(--color-secondary-400); }
   }
 }
 
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--color-secondary-300) transparent;
-  
-  @media (prefers-color-scheme: dark) {
-    scrollbar-color: var(--color-secondary-600) transparent;
-  }
-}
-
-/* Hover effect for scrollable containers */
-*:hover {
-  scrollbar-color: var(--color-secondary-400) transparent;
-}
-
-@media (prefers-color-scheme: dark) {
-  *:hover {
-    scrollbar-color: var(--color-secondary-500) transparent;
-  }
+  @media (prefers-color-scheme: dark) { scrollbar-color: var(--color-secondary-600) transparent; }
 }
+*:hover { scrollbar-color: var(--color-secondary-400) transparent; }
+@media (prefers-color-scheme: dark) { *:hover { scrollbar-color: var(--color-secondary-500) transparent; } }
 
 
 
 /* Alert dark mode adjustments */
-html[data-theme="dark"] .alert-success {
-  background-color: var(--color-success-50);
-  border-color: var(--color-success-500);
-  color: var(--color-success-900);
-}
-
-html[data-theme="dark"] .alert-info {
-  background-color: var(--color-info-50);
-  border-color: var(--color-info-500);
-  color: var(--color-info-900);
-}
-
-html[data-theme="dark"] .alert-warning {
-  background-color: var(--color-warning-50);
-  border-color: var(--color-warning-500);
-  color: var(--color-warning-900);
-}
-
-html[data-theme="dark"] .alert-danger,
-html[data-theme="dark"] .alert-error {
-  background-color: var(--color-danger-50);
-  border-color: var(--color-danger-500);
-  color: var(--color-danger-900);
-}
-
-/* Dim images in dark mode */
-html[data-theme="dark"] img, 
-html[data-theme="dark"] video {
-  opacity: 0.8;
-  transition: opacity var(--transition-normal);
-}
-
-html[data-theme="dark"] img:hover, 
-html[data-theme="dark"] video:hover {
-  opacity: 1;
+html[data-theme="dark"] {
+  .alert-success { background-color: var(--color-success-50); border-color: var(--color-success-500); color: var(--color-success-900); }
+  .alert-info { background-color: var(--color-info-50); border-color: var(--color-info-500); color: var(--color-info-900); }
+  .alert-warning { background-color: var(--color-warning-50); border-color: var(--color-warning-500); color: var(--color-warning-900); }
+  .alert-danger, .alert-error { background-color: var(--color-danger-50); border-color: var(--color-danger-500); color: var(--color-danger-900); }
+  img, video { opacity: 0.8; transition: opacity var(--transition-normal); }
+  img:hover, video:hover { opacity: 1; }
 }
 
 }