@neovici/cosmoz-dropdown 7.6.1 → 7.7.1

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 (3) hide show
  1. package/README.md +20 -0
  2. package/dist/next/cosmoz-dropdown-next.js +19 -16
  3. package/package.json +3 -16
package/README.md CHANGED
@@ -32,6 +32,8 @@ Modern dropdown using the Popover API and CSS Anchor Positioning.
32
32
  | Property | Type | Default | Description |
33
33
  | --------------- | --------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------ |
34
34
  | `placement` | `string` | `'bottom span-right'` | CSS anchor `position-area` value. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position-area) for options. |
35
+ | `disabled` | `boolean` | `false` | Prevents the dropdown from opening. |
36
+ | `passthrough` | `boolean` | `false` | When `disabled` + `passthrough`, render default slot content inline instead of inside the popover. |
35
37
  | `open-on-hover` | `boolean` | `false` | Open on pointer hover. |
36
38
  | `open-on-focus` | `boolean` | `false` | Open when the trigger receives focus. |
37
39
 
@@ -65,6 +67,24 @@ When auto-open is enabled:
65
67
  - When `open-on-focus` is active, clicking the button only opens (does not toggle)
66
68
  - Otherwise, click works as a toggle
67
69
 
70
+ #### Disabled + Passthrough
71
+
72
+ When `disabled` and `passthrough` are both set, the default slot content renders in normal document flow (outside the popover). This enables using the dropdown as a conditional wrapper — popover mode when enabled, inline mode when disabled:
73
+
74
+ ```html
75
+ <!-- Dropdown mode (enabled) -->
76
+ <cosmoz-dropdown-next placement="bottom span-right">
77
+ <button slot="button">Menu</button>
78
+ <div>Popover content</div>
79
+ </cosmoz-dropdown-next>
80
+
81
+ <!-- Inline mode (disabled + passthrough) -->
82
+ <cosmoz-dropdown-next disabled passthrough>
83
+ <button slot="button">Menu</button>
84
+ <div>Rendered inline, not inside a popover</div>
85
+ </cosmoz-dropdown-next>
86
+ ```
87
+
68
88
  #### Slots
69
89
 
70
90
  | Slot | Description |
package/dist/next/cosmoz-dropdown-next.js CHANGED
@@ -85,7 +85,7 @@ const style = css `
85
85
  }
86
86
  `;
87
87
  const CosmozDropdownNext = (host) => {
88
- const { placement = 'bottom span-right', disabled, openOnHover, openOnFocus, } = host;
88
+ const { placement = 'bottom span-right', disabled, passthrough, openOnHover, openOnFocus, } = host;
89
89
  const popoverRef = useRef();
90
90
  const [opened, setOpened] = useProperty('opened', false);
91
91
  // Call showPopover/hidePopover synchronously so the browser associates
@@ -95,11 +95,11 @@ const CosmozDropdownNext = (host) => {
95
95
  if (disabled)
96
96
  return;
97
97
  setOpened(true);
98
- popoverRef.current?.showPopover();
98
+ popoverRef.current?.showPopover?.();
99
99
  }, [disabled]);
100
100
  const close = useCallback(() => {
101
101
  setOpened(false);
102
- popoverRef.current?.hidePopover();
102
+ popoverRef.current?.hidePopover?.();
103
103
  }, []);
104
104
  const toggle = useCallback(() => {
105
105
  if (disabled)
@@ -116,9 +116,9 @@ const CosmozDropdownNext = (host) => {
116
116
  if (!popover)
117
117
  return;
118
118
  if (opened)
119
- popover.showPopover();
119
+ popover.showPopover?.();
120
120
  else
121
- popover.hidePopover();
121
+ popover.hidePopover?.();
122
122
  }, [opened]);
123
123
  useEffect(() => {
124
124
  host.toggleAttribute('opened', !!opened);
@@ -146,17 +146,19 @@ const CosmozDropdownNext = (host) => {
146
146
  }, []);
147
147
  return html `
148
148
  <slot name="button" @click=${handleClick}></slot>
149
- <div
150
- popover
151
- style="position-area: ${placement}"
152
- @toggle=${onToggle}
153
- @select=${close}
154
- @focusout=${scheduleClose}
155
- @focusin=${cancelClose}
156
- ${ref((el) => el && (popoverRef.current = el))}
157
- >
158
- <slot></slot>
159
- </div>
149
+ ${disabled && passthrough
150
+ ? html `<slot></slot>`
151
+ : html `<div
152
+ popover
153
+ style="position-area: ${placement}"
154
+ @toggle=${onToggle}
155
+ @select=${close}
156
+ @focusout=${scheduleClose}
157
+ @focusin=${cancelClose}
158
+ ${ref((el) => el && (popoverRef.current = el))}
159
+ >
160
+ <slot></slot>
161
+ </div>`}
160
162
  `;
161
163
  };
162
164
  customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
@@ -164,6 +166,7 @@ customElements.define('cosmoz-dropdown-next', component(CosmozDropdownNext, {
164
166
  observedAttributes: [
165
167
  'placement',
166
168
  'disabled',
169
+ 'passthrough',
167
170
  'open-on-hover',
168
171
  'open-on-focus',
169
172
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-dropdown",
3
- "version": "7.6.1",
3
+ "version": "7.7.1",
4
4
  "description": "A simple dropdown web component",
5
5
  "keywords": [
6
6
  "lit-html",
@@ -33,20 +33,9 @@
33
33
  "storybook:build": "storybook build",
34
34
  "storybook:deploy": "storybook-to-ghpages",
35
35
  "storybook:preview": "npm run storybook:build && http-server -d ./storybook-static/",
36
+ "changeset": "changeset",
36
37
  "prepare": "husky"
37
38
  },
38
- "release": {
39
- "plugins": [
40
- "@semantic-release/commit-analyzer",
41
- "@semantic-release/release-notes-generator",
42
- "@semantic-release/changelog",
43
- "@semantic-release/github",
44
- "@semantic-release/npm",
45
- "@semantic-release/git"
46
- ],
47
- "branch": "master",
48
- "preset": "conventionalcommits"
49
- },
50
39
  "publishConfig": {
51
40
  "access": "public"
52
41
  },
@@ -81,6 +70,7 @@
81
70
  "lit-html": "^3.1.2"
82
71
  },
83
72
  "devDependencies": {
73
+ "@changesets/cli": "^2.27.0",
84
74
  "@commitlint/cli": "^20.0.0",
85
75
  "@commitlint/config-conventional": "^20.0.0",
86
76
  "@neovici/cfg": "^2.13.0",
@@ -88,8 +78,6 @@
88
78
  "@neovici/cosmoz-tokens": "^3.2.1",
89
79
  "@open-wc/testing": "^4.0.0",
90
80
  "@playwright/test": "1.60.0",
91
- "@semantic-release/changelog": "^6.0.0",
92
- "@semantic-release/git": "^10.0.0",
93
81
  "@storybook/addon-docs": "^10.0.0",
94
82
  "@storybook/addon-vitest": "^10.2.4",
95
83
  "@storybook/web-components-vite": "^10.0.0",
@@ -103,7 +91,6 @@
103
91
  "lint-staged": "^16.2.7",
104
92
  "playwright": "1.60.0",
105
93
  "rollup-plugin-esbuild": "^6.1.1",
106
- "semantic-release": "^25.0.0",
107
94
  "shadow-dom-testing-library": "^1.13.1",
108
95
  "sinon": "^21.0.0",
109
96
  "storybook": "^10.0.0",