@db-ux/core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell-ed0ed7c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/build/assets/icons/LICENCES.json +18 -0
  2. package/build/assets/icons/double_chevron_left.svg +1 -0
  3. package/build/assets/icons/double_chevron_right.svg +1 -0
  4. package/build/assets/icons/fonts/all/db-ux.woff2 +0 -0
  5. package/build/assets/icons/fonts/default/db-ux.woff2 +0 -0
  6. package/build/assets/icons/fonts/default_12/db-ux.woff2 +0 -0
  7. package/build/assets/icons/fonts/default_14/db-ux.woff2 +0 -0
  8. package/build/assets/icons/fonts/default_16/db-ux.woff2 +0 -0
  9. package/build/assets/icons/fonts/default_20/db-ux.woff2 +0 -0
  10. package/build/assets/icons/fonts/default_24/db-ux.woff2 +0 -0
  11. package/build/assets/icons/fonts/default_28/db-ux.woff2 +0 -0
  12. package/build/assets/icons/fonts/default_32/db-ux.woff2 +0 -0
  13. package/build/assets/icons/fonts/default_48/db-ux.woff2 +0 -0
  14. package/build/assets/icons/fonts/default_64/db-ux.woff2 +0 -0
  15. package/build/assets/icons/fonts/filled/db-ux.woff2 +0 -0
  16. package/build/assets/icons/fonts/filled_12/db-ux.woff2 +0 -0
  17. package/build/assets/icons/fonts/filled_14/db-ux.woff2 +0 -0
  18. package/build/assets/icons/fonts/filled_16/db-ux.woff2 +0 -0
  19. package/build/assets/icons/fonts/filled_20/db-ux.woff2 +0 -0
  20. package/build/assets/icons/fonts/filled_24/db-ux.woff2 +0 -0
  21. package/build/assets/icons/fonts/filled_28/db-ux.woff2 +0 -0
  22. package/build/assets/icons/fonts/filled_32/db-ux.woff2 +0 -0
  23. package/build/assets/icons/fonts/filled_48/db-ux.woff2 +0 -0
  24. package/build/assets/icons/fonts/filled_64/db-ux.woff2 +0 -0
  25. package/build/assets/icons/house.svg +1 -0
  26. package/build/components/accordion/accordion.css +5 -5
  27. package/build/components/button/button.scss +1 -1
  28. package/build/components/{brand/brand.css → control-panel-brand/control-panel-brand.css} +12 -6
  29. package/build/components/{brand/brand.scss → control-panel-brand/control-panel-brand.scss} +10 -1
  30. package/build/components/control-panel-desktop/control-panel-desktop.css +791 -0
  31. package/build/components/control-panel-desktop/control-panel-desktop.scss +29 -0
  32. package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.css +192 -0
  33. package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.scss +84 -0
  34. package/build/components/control-panel-meta-navigation/control-panel-meta-navigation.css +54 -0
  35. package/build/components/control-panel-meta-navigation/control-panel-meta-navigation.scss +12 -0
  36. package/build/components/control-panel-mobile/control-panel-mobile.css +716 -0
  37. package/build/components/control-panel-mobile/control-panel-mobile.scss +125 -0
  38. package/build/components/control-panel-primary-actions/control-panel-primary-actions.css +16 -0
  39. package/build/components/control-panel-primary-actions/control-panel-primary-actions.scss +8 -0
  40. package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.css +16 -0
  41. package/build/components/control-panel-secondary-actions/control-panel-secondary-actions.scss +8 -0
  42. package/build/components/custom-select/custom-select.css +4 -4
  43. package/build/components/custom-select-dropdown/custom-select-dropdown.css +12 -12
  44. package/build/components/custom-select-list-item/custom-select-list-item.css +6 -6
  45. package/build/components/divider/divider.css +6 -6
  46. package/build/components/drawer/drawer.css +6 -5
  47. package/build/components/drawer/drawer.scss +6 -26
  48. package/build/components/navigation/navigation.css +394 -123
  49. package/build/components/navigation/navigation.scss +155 -72
  50. package/build/components/navigation-item/navigation-item.css +35 -418
  51. package/build/components/navigation-item/navigation-item.scss +8 -310
  52. package/build/components/navigation-item-group/navigation-item-group-menu-popover.css +189 -0
  53. package/build/components/navigation-item-group/navigation-item-group-menu-popover.scss +105 -0
  54. package/build/components/navigation-item-group/navigation-item-group-menu-tree.css +208 -0
  55. package/build/components/navigation-item-group/navigation-item-group-menu-tree.scss +40 -0
  56. package/build/components/navigation-item-group/navigation-item-group.css +432 -0
  57. package/build/components/navigation-item-group/navigation-item-group.scss +69 -0
  58. package/build/components/shell/shell-desktop.css +548 -0
  59. package/build/components/shell/shell-desktop.scss +187 -0
  60. package/build/components/shell/shell-mobile.css +633 -0
  61. package/build/components/shell/shell-mobile.scss +107 -0
  62. package/build/components/shell/shell.css +1876 -0
  63. package/build/components/shell/shell.scss +84 -0
  64. package/build/components/shell-sub-navigation/shell-sub-navigation.css +11 -0
  65. package/build/components/shell-sub-navigation/shell-sub-navigation.scss +15 -0
  66. package/build/components/stack/stack-web-component.css +1 -0
  67. package/build/components/stack/stack.css +1 -0
  68. package/build/components/tab-item/tab-item.scss +0 -1
  69. package/build/components/tab-list/tab-list.css +1 -1
  70. package/build/components/tabs/tabs.css +106 -23
  71. package/build/components/tabs/tabs.scss +25 -70
  72. package/build/components/tag/tag.css +5 -11
  73. package/build/components/tag/tag.scss +1 -5
  74. package/build/components/textarea/textarea.css +1 -1
  75. package/build/styles/absolute.css +6 -6
  76. package/build/styles/component-animations.css +1 -1
  77. package/build/styles/index.css +5 -5
  78. package/build/styles/index.scss +11 -3
  79. package/build/styles/internal/_control-panel-desktop.scss +455 -0
  80. package/build/styles/internal/_control-panel-mobile.scss +130 -0
  81. package/build/styles/internal/_custom-elements.scss +22 -4
  82. package/build/styles/internal/_icon-passing.scss +19 -9
  83. package/build/styles/internal/{_db-puls.scss → _indicator.scss} +37 -16
  84. package/build/styles/internal/_navigation-item.scss +122 -0
  85. package/build/styles/internal/_scrollbar.scss +71 -0
  86. package/build/styles/relative.css +6 -6
  87. package/build/styles/rollup.css +6 -6
  88. package/build/styles/wc-workarounds.css +1 -1
  89. package/build/styles/wc-workarounds.scss +11 -0
  90. package/build/styles/webpack.css +6 -6
  91. package/package.json +3 -7
  92. package/agent/_instructions.md +0 -9
  93. package/build/components/header/header.css +0 -759
  94. package/build/components/header/header.scss +0 -259
  95. package/build/components/page/page.css +0 -52
  96. package/build/components/page/page.scss +0 -52
@@ -17,6 +17,12 @@
17
17
  "licence": "https://lucide.dev/license#lucide-license",
18
18
  "origin": "arrow-right"
19
19
  },
20
+ {
21
+ "name": "house.svg",
22
+ "type": "lucide",
23
+ "licence": "https://lucide.dev/license#lucide-license",
24
+ "origin": "house"
25
+ },
20
26
  {
21
27
  "name": "arrow_up.svg",
22
28
  "type": "lucide",
@@ -53,6 +59,18 @@
53
59
  "licence": "https://lucide.dev/license#lucide-license",
54
60
  "origin": "chevron-up"
55
61
  },
62
+ {
63
+ "name": "double_chevron_left.svg",
64
+ "type": "lucide",
65
+ "licence": "https://lucide.dev/license#lucide-license",
66
+ "origin": "chevrons_left"
67
+ },
68
+ {
69
+ "name": "double_chevron_right.svg",
70
+ "type": "lucide",
71
+ "licence": "https://lucide.dev/license#lucide-license",
72
+ "origin": "chevrons-right"
73
+ },
56
74
  {
57
75
  "name": "clock.svg",
58
76
  "type": "lucide",
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left-icon lucide-chevrons-left"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-right-icon lucide-chevrons-right"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
@@ -81,14 +81,14 @@ The spacings are not part of the styling of the accordion items themselves.
81
81
  block-size: var(--db-border-width-3xs);
82
82
  inset-block-start: 0;
83
83
  inset-inline: 0;
84
+ /* stylelint-disable-next-line db-ux/use-border-color */
84
85
  /* stylelint-disable-next-line at-rule-empty-line-before */
85
86
  }
86
87
  @media (forced-colors: active) {
87
- .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item,
88
- .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item,
89
- .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item {
90
- /* stylelint-disable-next-line db-ux/use-border-color */
91
- border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
88
+ .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
89
+ .db-accordion[data-variant=divider] .db-accordion-item + .db-accordion-item::before, .db-accordion:not([data-variant]) db-accordion-item + db-accordion-item .db-accordion-item::before,
90
+ .db-accordion:not([data-variant]) .db-accordion-item + .db-accordion-item::before {
91
+ border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
92
92
  }
93
93
  }
94
94
  .db-accordion[data-variant=divider] db-accordion-item + db-accordion-item .db-accordion-item::before,
@@ -110,7 +110,7 @@
110
110
  opacity: variables.$db-opacity-md;
111
111
  }
112
112
 
113
- // Workaround for current stencil implementation for header
113
+ // Workaround for current stencil implementation for control-panel-desktop
114
114
  &:has(> .db-button) {
115
115
  margin: 0;
116
116
  padding: 0;
@@ -75,12 +75,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
75
75
 
76
76
  @layer variables {}
77
77
 
78
- .db-brand {
78
+ .db-control-panel-brand {
79
79
  font: var(--db-type-body-md);
80
80
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
81
81
  }
82
82
  @layer variables {
83
- .db-brand {
83
+ .db-control-panel-brand {
84
84
  /* Those variables are only for components to calculate heights and change icons */
85
85
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
86
86
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -113,21 +113,27 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
113
113
 
114
114
  @layer variables {}
115
115
 
116
- .db-brand {
116
+ .db-control-panel-brand {
117
117
  display: flex;
118
118
  gap: var(--db-spacing-fixed-sm);
119
119
  align-items: center;
120
120
  font-weight: 700;
121
+ grid-area: brand;
122
+ block-size: var(--db-sizing-md);
123
+ min-block-size: var(--db-sizing-md);
121
124
  }
122
- .db-brand::before {
125
+ .db-control-panel-brand::before {
123
126
  --db-icon-font-size: var(--db-sizing-md);
124
127
  --db-icon-margin-end: 0;
125
128
  --db-icon-color: var(--db-brand-origin-default);
126
129
  }
127
- .db-brand img {
130
+ .db-control-panel-brand:has(img, svg)::before {
131
+ content: none;
132
+ }
133
+ .db-control-panel-brand img {
128
134
  inline-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
129
135
  max-block-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
130
136
  }
131
- .db-brand a {
137
+ .db-control-panel-brand a {
132
138
  text-decoration: none;
133
139
  }
@@ -2,13 +2,16 @@
2
2
  @use "@db-ux/core-foundations/build/styles/colors";
3
3
  @use "@db-ux/core-foundations/build/styles/fonts";
4
4
 
5
- .db-brand {
5
+ .db-control-panel-brand {
6
6
  @extend %db-overwrite-font-size-md;
7
7
 
8
8
  display: flex;
9
9
  gap: variables.$db-spacing-fixed-sm;
10
10
  align-items: center;
11
11
  font-weight: 700;
12
+ grid-area: brand;
13
+ block-size: variables.$db-sizing-md;
14
+ min-block-size: variables.$db-sizing-md;
12
15
 
13
16
  &::before {
14
17
  --db-icon-font-size: #{variables.$db-sizing-md};
@@ -16,6 +19,12 @@
16
19
  --db-icon-color: #{colors.$db-brand-origin-default};
17
20
  }
18
21
 
22
+ &:has(img, svg) {
23
+ &::before {
24
+ content: none;
25
+ }
26
+ }
27
+
19
28
  img {
20
29
  $logo-size: calc(
21
30
  #{variables.$db-sizing-md} - #{variables.$db-sizing-3xs}