@dbcdk/react-components 0.0.49 → 0.0.51

package/dist/components/interval-select/IntervalSelect.js

@@ -90,8 +90,8 @@ id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval',
                     }, size: size, type: "button", "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { id: listboxId, onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = opt.minutesAgo === selectedValue;
                         const isActive = index === activeIndex;
-                        return (_jsx(Menu.Item, { active: isActive, 
+                        return (_jsx(Menu.Item, { active: isActive, selected: isSelected, 
                             // IMPORTANT: listbox uses role="option"
-                            itemRole: "option", "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
+                            itemRole: "option", children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, "aria-selected": isSelected, onClick: () => handleCommit(opt), onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, opt.minutesAgo));
                     }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
 }

package/dist/components/menu/Menu.module.css

@@ -9,10 +9,6 @@
   flex-direction: column;
 }
 
-.container > li + li {
-  margin-block-start: var(--spacing-xxs);
-}
-
 .row {
   display: block;
 }
@@ -28,7 +24,7 @@
   text-decoration: none;
 
   /* choose your density */
-  padding-block: var(--spacing-xxs);
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
 
   background: transparent;
@@ -69,10 +65,10 @@
   display: flex;
   align-items: flex-start;
   inline-size: 100%;
-  padding-block: 2px;
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
   border-radius: var(--border-radius-sm);
-  cursor: default;
+  cursor: pointer;
 }
 
 /* NEW: let Checkbox/Radio consume full width so the hover area feels right */
@@ -88,41 +84,46 @@
   align-items: center;
   gap: var(--spacing-sm);
   inline-size: 100%;
-  cursor: default;
+  cursor: pointer;
 }
 
 .row :global(.label) {
   flex: 1 1 auto;
-  cursor: default;
+  cursor: pointer;
 }
 
 .row :global(.label) * {
-  cursor: default;
+  cursor: pointer;
+}
+
+.row + .row .interactive,
+.row + .row > .interactiveChild {
+  box-shadow: inset 0 1px 0 var(--color-border-subtle);
 }
 
 /* Hover: support both cases (interactive element, or wrapper child) */
 .interactive:hover:not(.selected),
 .row:hover > .interactiveChild:not(.selected) {
-  background-color: var(--color-bg-toolbar-hover);
+  background-color: var(--color-bg-hover-subtle);
 }
 
 /* Focus ring: support both cases */
 .interactive:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
 /* If wrapper contains a focusable element, show ring when any child is focused */
 .row:focus-within > .interactiveChild {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
 /* Keyboard active/current item */
 .active,
 .interactive.active,
 .row > .interactiveChild.active {
-  background-color: var(--color-bg-toolbar-hover);
+  background-color: var(--color-bg-hover-subtle);
 }
 
 /* Selected item */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -56,11 +56,8 @@
     "changeset": "changeset",
     "version-packages": "changeset version",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "pack-it": "rimraf ./*.tgz && npm run build && npm pack",
-    "postbuild": "cpy \"src/**/*.css\" dist --parents && cpy \"src/styles/styles.css\" dist && cpy \"src/styles/fonts/**/*\" dist/styles/fonts",
-    "yalc:publish": "npm run build && yalc publish --push",
-    "yalc:push": "npm run build && yalc push --scripts --changed",
-    "yalc:watch": "chokidar 'src/**/*' -c 'npm run yalc:push'"
+    "pack:local": "rimraf ./*.tgz && npm run build && npm pack",
+    "postbuild": "cpy \"src/**/*.css\" dist --parents && cpy \"src/styles/styles.css\" dist && cpy \"src/styles/fonts/**/*\" dist/styles/fonts"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.21.3",