@dbcdk/react-components 0.0.101 → 0.0.102

package/dist/index.css

@@ -197,12 +197,6 @@
 .Button_icon {
   display: inline-flex;
 }
-.Button_button.Button_xs {
-  height: var(--component-size-xs);
-  min-block-size: var(--component-size-xs);
-  padding-inline: var(--spacing-xs);
-  font-size: var(--font-size-xs);
-}
 .Button_button.Button_sm {
   height: var(--component-size-sm);
   min-block-size: var(--component-size-sm);
@@ -317,6 +311,17 @@
 .Button_inline.Button_active:hover {
   color: var(--button-bg-primary-hover);
 }
+.Button_button.Button_xs {
+  height: auto;
+  min-block-size: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+.Button_button.Button_xs svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
 
 /* src/components/button-select/ButtonSelect.module.css */
 .ButtonSelect_group {
@@ -414,7 +419,7 @@
   border-top: var(--border-width-thin) solid var(--color-border-subtle);
   padding-top: var(--spacing-xs);
 }
-@media (max-width: 640px) {
+@media (max-width: 1024px) {
   .NavBar_container {
     flex-wrap: nowrap;
     overflow: hidden;
@@ -813,7 +818,7 @@
   padding: var(--spacing-xxs);
   z-index: var(--z-popover);
   overflow: auto;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), var(--shadow-sm);
+  box-shadow: var(--shadow-md);
 }
 .Popover_content[hidden] {
   display: none;
@@ -1207,7 +1212,6 @@
 .InputContainer_inputContainer[data-modified] label:not(.InputContainer_label) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
   border-radius: var(--border-radius-default);
-  padding: 2px 6px;
 }
 
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
@@ -1389,6 +1393,8 @@
     background-color var(--transition-fast) var(--ease-standard),
     border-color var(--transition-fast) var(--ease-standard);
 }
+.Tabs_active .Tabs_tabButton {
+}
 .Tabs_tabButton:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
@@ -1427,18 +1433,20 @@
 .Tabs_filled {
   gap: 0;
 }
+.Tabs_tabs.Tabs_filled {
+  border-radius: var(--border-radius-md);
+  background: var(--color-bg-surface);
+  overflow: hidden;
+}
 .Tabs_filled .Tabs_tabList {
-  border-start-start-radius: var(--border-radius-default);
-  border-start-end-radius: var(--border-radius-default);
-  inline-size: fit-content;
+  border-block-end: 1px solid var(--color-border-subtle);
+  background: var(--color-bg-surface);
+  inline-size: 100%;
 }
 .Tabs_filled .Tabs_tab {
-  border: var(--border-width-thin) solid transparent;
-  border-block-end: 0;
+  border: 1px solid transparent;
   color: var(--color-fg-muted);
-  z-index: 3;
-  border-start-start-radius: var(--border-radius-default);
-  border-start-end-radius: var(--border-radius-default);
+  position: relative;
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard),
@@ -1449,16 +1457,25 @@
 }
 .Tabs_filled .Tabs_tab.Tabs_active {
   background: var(--opac-bg-brand);
+  border-inline-color: var(--color-border-subtle);
+  border-block-start-color: var(--color-border-subtle);
+  border-block-end-color: var(--opac-bg-brand);
+  border-start-start-radius: var(--border-radius-md);
+  border-start-end-radius: var(--border-radius-md);
+  margin-block-end: -1px;
+  z-index: 1;
   color: var(--color-brand);
-  border-color: var(--opac-bg-dark);
 }
 .Tabs_filled .Tabs_tabContent {
-  border: var(--border-width-thin) solid var(--opac-bg-dark);
   background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-block-start: none;
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+  box-shadow: var(--shadow-xs);
   padding: var(--spacing-lg);
 }
 .Tabs_outlined {
-  gap: var(--spacing-md);
+  gap: var(--spacing-lg);
 }
 .Tabs_outlined .Tabs_tab {
   color: var(--color-fg-muted);
@@ -1496,17 +1513,18 @@
     padding-block: var(--spacing-sm);
     padding-inline: var(--spacing-xs);
   }
+  .Tabs_tabs.Tabs_filled {
+    border-radius: 0;
+    border-inline: 0;
+    box-shadow: none;
+  }
   .Tabs_filled .Tabs_tabList {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
     inline-size: 100%;
   }
   .Tabs_filled .Tabs_tabContent,
   .Tabs_panelStyle.Tabs_outlined .Tabs_tabContent {
     padding-block: var(--spacing-md);
-    padding-inline: 0;
-    border: 0;
-    border-radius: 0;
+    padding-inline: var(--spacing-md);
   }
   .Tabs_panelStyle .Tabs_tabList {
     border: 0;
@@ -2495,6 +2513,7 @@
   border: var(--border-width-thin) solid var(--color-border-subtle);
   border-radius: var(--border-radius-md);
   background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-md);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -2527,11 +2546,23 @@
 }
 .Card_container {
   height: 100%;
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--border-radius-md);
   box-sizing: border-box;
   border: 1px solid var(--color-border-subtle);
   background-clip: padding-box;
 }
+.Card_elevationNone {
+  box-shadow: none;
+}
+.Card_elevationXs {
+  border: 1px solid var(--color-border-default);
+}
+.Card_elevationSm {
+  box-shadow: var(--shadow-sm);
+}
+.Card_elevationMd {
+  box-shadow: var(--shadow-md);
+}
 .Card_variantDefault {
   background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
 }
@@ -2698,15 +2729,17 @@
   flex-wrap: wrap;
   gap: var(--spacing-md);
   --card-container-gap: var(--spacing-md);
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--border-radius-md);
 }
 .CardContainer_container.CardContainer_default {
   background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
   padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
 }
 .CardContainer_container.CardContainer_subtle {
   background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle, var(--color-bg-surface)));
   padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
 }
 .CardContainer_container.CardContainer_strong {
   background-color: var( --card-bg-strong, var(--color-bg-surface-strong, var(--color-surface-strong)) );
@@ -2768,6 +2801,7 @@
   display: flex;
   align-items: flex-start;
   padding: var(--spacing-lg) 0;
+  padding-block-end: var(--spacing-xl);
   gap: var(--spacing-md);
   min-width: 0;
   flex: 0 0 auto;
@@ -2796,16 +2830,17 @@
 .Page_documentScrolling .Page_content {
   overflow: visible;
 }
-.Page_content:not(.Page_disableContentBox) {
+.Page_contentBox {
   padding: var(--spacing-lg);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-md);
 }
 @media (max-width: 767px) {
   .Page_headerContainer {
     padding-block: var(--spacing-md);
   }
-  .Page_content:not(.Page_disableContentBox) {
+  .Page_contentBox {
     padding-block: var(--spacing-md);
     padding-inline: 0;
     border: 0;
@@ -4230,17 +4265,24 @@
   align-items: center;
 }
 .SegmentedProgressBar_progressBar {
-  --progress-radius: 10px;
   --progress-separator: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
+  --progress-track: color-mix(in srgb, var(--color-fg-default) 10%, var(--color-bg-surface-subtle));
+  --progress-fill-done: color-mix(in srgb, var(--color-fg-default) 18%, transparent);
+  --progress-fill-progress: color-mix(in srgb, var(--color-fg-default) 6%, transparent);
+  --progress-fill-missing: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
+  --progress-fill-neutral: color-mix(in srgb, var(--color-fg-default) 8%, transparent);
+  --progress-fill-success: color-mix(in srgb, var(--color-status-success) 32%, transparent);
+  --progress-fill-info: color-mix(in srgb, var(--color-status-info) 32%, transparent);
+  --progress-fill-warning: color-mix(in srgb, var(--color-status-warning) 32%, transparent);
+  --progress-fill-error: color-mix(in srgb, var(--color-status-error) 32%, transparent);
   position: relative;
   width: 100%;
   min-width: 0;
   display: flex;
   align-items: stretch;
   overflow: hidden;
-  border-radius: var(--progress-radius);
-  background: var(--color-bg-surface-subtle);
-  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
+  border-radius: calc(var(--progress-height, 30px) / 2);
+  background: var(--progress-track);
 }
 .SegmentedProgressBar_progressBar[data-rounded=false] {
   border-radius: 0;
@@ -4273,28 +4315,28 @@
   pointer-events: none;
 }
 .SegmentedProgressBar_progressSegment[data-severity=done] {
-  background: color-mix(in srgb, var(--color-fg-default) 25%, var(--color-bg-surface));
+  background: var(--progress-fill-done);
 }
 .SegmentedProgressBar_progressSegment[data-severity=progress] {
-  background: color-mix(in srgb, var(--color-fg-subtle) 5%, var(--color-bg-surface));
+  background: var(--progress-fill-progress);
 }
 .SegmentedProgressBar_progressSegment[data-severity=missing] {
-  background: color-mix(in srgb, var(--color-fg-subtle) 2.5%, var(--color-bg-surface));
+  background: var(--progress-fill-missing);
 }
 .SegmentedProgressBar_progressSegment[data-severity=neutral] {
-  background: var(--color-bg-surface-strong);
+  background: var(--progress-fill-neutral);
 }
 .SegmentedProgressBar_progressSegment[data-severity=success] {
-  background: color-mix(in srgb, var(--color-status-success) 50%, var(--color-bg-surface));
+  background: var(--progress-fill-success);
 }
 .SegmentedProgressBar_progressSegment[data-severity=info] {
-  background: color-mix(in srgb, var(--color-status-info) 50%, var(--color-bg-surface));
+  background: var(--progress-fill-info);
 }
 .SegmentedProgressBar_progressSegment[data-severity=warning] {
-  background: color-mix(in srgb, var(--color-status-warning) 50%, var(--color-bg-surface));
+  background: var(--progress-fill-warning);
 }
 .SegmentedProgressBar_progressSegment[data-severity=error] {
-  background: color-mix(in srgb, var(--color-status-error) 50%, var(--color-bg-surface));
+  background: var(--progress-fill-error);
 }
 .SegmentedProgressBar_progressCenter {
   position: absolute;
@@ -5497,7 +5539,7 @@
 }
 .SidePanel_detailsCol {
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-md);
+  border-radius: var(--border-radius-md);
   overflow: hidden;
   background: var(--color-bg-surface);
 }
@@ -5601,20 +5643,32 @@
   overflow: hidden;
   gap: var(--spacing-xs);
 }
+.Accordion_outlined {
+  background-color: transparent;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  gap: 0;
+  --acc-trigger-bg: transparent;
+  --acc-content-px: var(--acc-trigger-px);
+  --acc-item-separator: 1px solid var(--color-border-subtle);
+}
 .Accordion_sm {
   --acc-trigger-py: var(--spacing-xs);
   --acc-trigger-px: var(--spacing-sm);
   --acc-content-py: var(--spacing-sm);
+  --acc-font-size: var(--font-size-sm);
 }
 .Accordion_md {
   --acc-trigger-py: var(--spacing-sm);
   --acc-trigger-px: var(--spacing-md);
   --acc-content-py: var(--spacing-md);
+  --acc-font-size: var(--font-size-md);
 }
 .Accordion_lg {
   --acc-trigger-py: var(--spacing-md);
   --acc-trigger-px: var(--spacing-md);
   --acc-content-py: var(--spacing-md);
+  --acc-font-size: var(--font-size-md);
 }
 
 /* src/components/accordion/components/AccordionRow.module.css */
@@ -5628,8 +5682,9 @@
   gap: var(--spacing-sm);
   cursor: pointer;
   user-select: none;
+  font-size: var(--acc-font-size);
   padding: var(--acc-trigger-py) var(--acc-trigger-px);
-  background: var(--color-bg-contextual-subtle);
+  background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
   min-width: 0;
 }
 .AccordionRow_trigger:focus-visible {
@@ -5682,7 +5737,13 @@
   transition: none;
 }
 .AccordionRow_content {
-  padding: var(--acc-content-py) 0;
+  padding: var(--acc-content-py) var(--acc-content-px, 0);
+}
+.AccordionRow_item {
+  border-bottom: var(--acc-item-separator, none);
+}
+.AccordionRow_item:last-child {
+  border-bottom: none;
 }
 @media (prefers-reduced-motion: reduce) {
   .AccordionRow_panel {
@@ -5817,6 +5878,85 @@
   --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
 }
 
+/* src/components/inline-status/InlineStatus.module.css */
+.InlineStatus_container {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: var(--color-border-subtle);
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  max-inline-size: 100%;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border: 1px solid var(--inline-status-border);
+  border-radius: var(--border-radius-default);
+  background: var(--inline-status-bg);
+  color: var(--inline-status-fg);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+}
+.InlineStatus_fullWidth {
+  display: flex;
+  inline-size: 100%;
+}
+.InlineStatus_leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding-block-start: 1px;
+}
+.InlineStatus_leading svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+.InlineStatus_body {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+.InlineStatus_sm {
+  font-size: var(--font-size-xs);
+}
+.InlineStatus_md {
+  font-size: var(--font-size-sm);
+}
+.InlineStatus_neutral {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: transparent;
+}
+.InlineStatus_success {
+  --inline-status-bg: var(--color-status-success-bg);
+  --inline-status-fg: var(--color-status-success-fg);
+  --inline-status-border: var(--color-status-success-border);
+}
+.InlineStatus_warning {
+  --inline-status-bg: var(--color-status-warning-bg);
+  --inline-status-fg: var(--color-status-warning-fg);
+  --inline-status-border: var(--color-status-warning-border);
+}
+.InlineStatus_error {
+  --inline-status-bg: var(--color-status-error-bg);
+  --inline-status-fg: var(--color-status-error-fg);
+  --inline-status-border: var(--color-status-error-border);
+}
+.InlineStatus_info {
+  --inline-status-bg: var(--color-status-info-bg);
+  --inline-status-fg: var(--color-status-info-fg);
+  --inline-status-border: var(--color-status-info-border);
+}
+.InlineStatus_brand {
+  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --inline-status-fg: var(--color-brand);
+  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}
+
 /* src/components/table/components/column-resizer/ColumnResizer.module.css */
 .ColumnResizer_resizer {
   position: absolute;
@@ -6013,12 +6153,6 @@
 .Button_icon2 {
   display: inline-flex;
 }
-.Button_button2.Button_xs2 {
-  height: var(--component-size-xs);
-  min-block-size: var(--component-size-xs);
-  padding-inline: var(--spacing-xs);
-  font-size: var(--font-size-xs);
-}
 .Button_button2.Button_sm2 {
   height: var(--component-size-sm);
   min-block-size: var(--component-size-sm);
@@ -6133,6 +6267,17 @@
 .Button_inline2.Button_active2:hover {
   color: var(--button-bg-primary-hover);
 }
+.Button_button2.Button_xs2 {
+  height: auto;
+  min-block-size: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+.Button_button2.Button_xs2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
 
 /* src/components/menu/Menu.module.css */
 .Menu_container2 {
@@ -6444,7 +6589,6 @@
 .InputContainer_inputContainer2[data-modified] label:not(.InputContainer_label2) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
   border-radius: var(--border-radius-default);
-  padding: 2px 6px;
 }
 
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
@@ -6585,7 +6729,7 @@
   padding: var(--spacing-xxs);
   z-index: var(--z-popover);
   overflow: auto;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), var(--shadow-sm);
+  box-shadow: var(--shadow-md);
 }
 .Popover_content2[hidden] {
   display: none;

package/dist/index.d.ts

@@ -79,3 +79,4 @@ export * from './components/copy-button/CopyButton';
 export * from './components/divider/Divider';
 export * from './components/grid/Grid';
 export * from './components/alert/Alert';
+export * from './components/inline-status/InlineStatus';