@dbcdk/react-components 0.0.101 → 0.0.103

package/dist/index.css

@@ -171,12 +171,16 @@
 .Button_button:disabled,
 .Button_button[aria-disabled=true] {
   cursor: not-allowed;
-  pointer-events: none;
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
   opacity: 0.5;
 }
+.Button_button:is(:disabled, [aria-disabled=true]):hover {
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+}
 .Button_link {
   text-decoration: none;
   font-size: var(--font-size-sm);
@@ -197,12 +201,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 +315,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 +423,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 +822,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 +1216,85 @@
 .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/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;
+  block-size: 1lh;
+}
+.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/forms/radio-buttons/RadioButtons.module.css */
@@ -1389,6 +1476,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 +1516,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 +1540,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 +1596,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;
@@ -2008,6 +2109,17 @@
   outline: 2px solid var(--color-brand);
   outline-offset: 2px;
 }
+.Hyperlink_link:is(.Hyperlink_disabled, :disabled, [aria-disabled=true]) {
+  color: var(--color-disabled-fg);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.Hyperlink_link:is(.Hyperlink_disabled, :disabled, [aria-disabled=true]):hover {
+  color: var(--color-disabled-fg);
+}
+.Hyperlink_link:is(.Hyperlink_disabled, :disabled, [aria-disabled=true])::after {
+  display: none;
+}
 .Hyperlink_icon {
   display: flex;
   align-items: center;
@@ -2495,6 +2607,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 +2640,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 +2823,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 +2895,7 @@
   display: flex;
   align-items: flex-start;
   padding: var(--spacing-lg) 0;
+  padding-block-end: var(--spacing-lg);
   gap: var(--spacing-md);
   min-width: 0;
   flex: 0 0 auto;
@@ -2796,16 +2924,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 +4359,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 +4409,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 +5633,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 +5737,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 +5776,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 +5831,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 {
@@ -5987,12 +6142,16 @@
 .Button_button2:disabled,
 .Button_button2[aria-disabled=true] {
   cursor: not-allowed;
-  pointer-events: none;
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
   opacity: 0.5;
 }
+.Button_button2:is(:disabled, [aria-disabled=true]):hover {
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+}
 .Button_link2 {
   text-decoration: none;
   font-size: var(--font-size-sm);
@@ -6013,12 +6172,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 +6286,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 +6608,116 @@
 .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/inline-status/InlineStatus.module.css */
+.InlineStatus_container2 {
+  --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_fullWidth2 {
+  display: flex;
+  inline-size: 100%;
+}
+.InlineStatus_leading2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  block-size: 1lh;
+}
+.InlineStatus_leading2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+.InlineStatus_body2 {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+.InlineStatus_sm2 {
+  font-size: var(--font-size-xs);
+}
+.InlineStatus_md2 {
+  font-size: var(--font-size-sm);
+}
+.InlineStatus_neutral2 {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: transparent;
+}
+.InlineStatus_success2 {
+  --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_warning2 {
+  --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_error2 {
+  --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_info2 {
+  --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_brand2 {
+  --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/icon/Icon.module.css */
+.Icon_container2 {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+}
+.Icon_icon2 {
+  display: flex;
+}
+.Icon_icon2 svg {
+  height: var(--icon-size-md);
+}
+.Icon_success2 {
+  color: var(--color-status-success);
+}
+.Icon_error2 {
+  color: var(--color-status-error);
+}
+.Icon_warning2 {
+  color: var(--color-status-warning);
+}
+.Icon_info2 {
+  color: var(--color-status-info);
+}
+.Icon_brand2 {
+  color: var(--color-fg-on-brand);
 }
 
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
@@ -6585,7 +6858,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';