@kanso-protocol/core 2.0.1 → 2.0.2

package/fesm2022/kanso-protocol-core.mjs

@@ -27,6 +27,34 @@ const KP_ICON_SIZES = {
     xl: 24,
 };
 
+/**
+ * Find the right portal target for a floating overlay (select dropdown,
+ * combobox listbox, popover panel, etc.) so it stays in the same
+ * stacking context as its trigger.
+ *
+ * Background: Kanso `<kp-dialog>` uses native `<dialog>.showModal()`
+ * which places the dialog in the browser's **top-layer**. Anything
+ * portaled to `document.body` ends up BELOW the top-layer — invisible
+ * and inert. To stay visible / interactive, overlays must portal
+ * inside the nearest open `<dialog>` ancestor instead.
+ *
+ * Outside a dialog, `document.body` is still the right target so the
+ * overlay isn't clipped by any transformed / overflow:hidden ancestor.
+ *
+ * @example
+ * const target = findPortalTarget(this.host.nativeElement, this.doc);
+ * if (target && el.parentElement !== target) target.appendChild(el);
+ */
+function findPortalTarget(host, doc) {
+    let el = host;
+    while (el) {
+        if (el.tagName === 'DIALOG' && el.open)
+            return el;
+        el = el.parentElement;
+    }
+    return doc.body;
+}
+
 // Kanso Protocol — Core
 // This file re-exports generated token constants and core utilities.
 // Generated tokens will be available after running `npm run build:tokens`
@@ -36,5 +64,5 @@ const KP_ICON_SIZES = {
  * Generated bundle index. Do not edit.
  */
 
-export { KP_ICON_SIZES, KP_RADII, KP_SIZES };
+export { KP_ICON_SIZES, KP_RADII, KP_SIZES, findPortalTarget };
 //# sourceMappingURL=kanso-protocol-core.mjs.map

package/fesm2022/kanso-protocol-core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kanso-protocol-core.mjs","sources":["../../../../packages/core/src/lib/types.ts","../../../../packages/core/src/index.ts","../../../../packages/core/src/kanso-protocol-core.ts"],"sourcesContent":["/**\n * Kanso Protocol — Core Types\n *\n * These types define the shared API contract for all components.\n * Every interactive component MUST use these types consistently.\n */\n\n/** Component size scale */\nexport type KpSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Visual variant */\nexport type KpVariant = 'default' | 'subtle' | 'outline' | 'ghost';\n\n/** Color role */\nexport type KpColorRole = 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'neutral';\n\n/** Interactive component states (for documentation/testing) */\nexport type KpState = 'rest' | 'hover' | 'active' | 'focus' | 'disabled' | 'loading' | 'error';\n\n/** Size-to-value mappings */\nexport const KP_SIZES: Record<KpSize, number> = {\n  xs: 24,\n  sm: 28,\n  md: 36,\n  lg: 44,\n  xl: 52,\n};\n\nexport const KP_RADII: Record<KpSize, number> = {\n  xs: 8,\n  sm: 10,\n  md: 12,\n  lg: 14,\n  xl: 16,\n};\n\nexport const KP_ICON_SIZES: Record<KpSize, number> = {\n  xs: 14,\n  sm: 16,\n  md: 18,\n  lg: 22,\n  xl: 24,\n};\n","// Kanso Protocol — Core\n// This file re-exports generated token constants and core utilities.\n\n// Generated tokens will be available after running `npm run build:tokens`\n// import { kpColorPrimaryDefaultBgRest } from './_generated/tokens';\n\nexport * from './lib/types';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;;;;AAKG;AAcH;AACO,MAAM,QAAQ,GAA2B;AAC9C,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;;AAGD,MAAM,QAAQ,GAA2B;AAC9C,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;;AAGD,MAAM,aAAa,GAA2B;AACnD,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;;;ACzCR;AACA;AAEA;AACA;;ACJA;;AAEG;;;;"}
+{"version":3,"file":"kanso-protocol-core.mjs","sources":["../../../../packages/core/src/lib/types.ts","../../../../packages/core/src/lib/portal.ts","../../../../packages/core/src/index.ts","../../../../packages/core/src/kanso-protocol-core.ts"],"sourcesContent":["/**\n * Kanso Protocol — Core Types\n *\n * These types define the shared API contract for all components.\n * Every interactive component MUST use these types consistently.\n */\n\n/** Component size scale */\nexport type KpSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Visual variant */\nexport type KpVariant = 'default' | 'subtle' | 'outline' | 'ghost';\n\n/** Color role */\nexport type KpColorRole = 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'neutral';\n\n/** Interactive component states (for documentation/testing) */\nexport type KpState = 'rest' | 'hover' | 'active' | 'focus' | 'disabled' | 'loading' | 'error';\n\n/** Size-to-value mappings */\nexport const KP_SIZES: Record<KpSize, number> = {\n  xs: 24,\n  sm: 28,\n  md: 36,\n  lg: 44,\n  xl: 52,\n};\n\nexport const KP_RADII: Record<KpSize, number> = {\n  xs: 8,\n  sm: 10,\n  md: 12,\n  lg: 14,\n  xl: 16,\n};\n\nexport const KP_ICON_SIZES: Record<KpSize, number> = {\n  xs: 14,\n  sm: 16,\n  md: 18,\n  lg: 22,\n  xl: 24,\n};\n","/**\n * Find the right portal target for a floating overlay (select dropdown,\n * combobox listbox, popover panel, etc.) so it stays in the same\n * stacking context as its trigger.\n *\n * Background: Kanso `<kp-dialog>` uses native `<dialog>.showModal()`\n * which places the dialog in the browser's **top-layer**. Anything\n * portaled to `document.body` ends up BELOW the top-layer — invisible\n * and inert. To stay visible / interactive, overlays must portal\n * inside the nearest open `<dialog>` ancestor instead.\n *\n * Outside a dialog, `document.body` is still the right target so the\n * overlay isn't clipped by any transformed / overflow:hidden ancestor.\n *\n * @example\n * const target = findPortalTarget(this.host.nativeElement, this.doc);\n * if (target && el.parentElement !== target) target.appendChild(el);\n */\nexport function findPortalTarget(host: HTMLElement, doc: Document): HTMLElement {\n  let el: HTMLElement | null = host;\n  while (el) {\n    if (el.tagName === 'DIALOG' && (el as HTMLDialogElement).open) return el;\n    el = el.parentElement;\n  }\n  return doc.body;\n}\n","// Kanso Protocol — Core\n// This file re-exports generated token constants and core utilities.\n\n// Generated tokens will be available after running `npm run build:tokens`\n// import { kpColorPrimaryDefaultBgRest } from './_generated/tokens';\n\nexport * from './lib/types';\nexport * from './lib/portal';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;;;;AAKG;AAcH;AACO,MAAM,QAAQ,GAA2B;AAC9C,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;;AAGD,MAAM,QAAQ,GAA2B;AAC9C,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;;AAGD,MAAM,aAAa,GAA2B;AACnD,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;;;ACzCR;;;;;;;;;;;;;;;;;AAiBG;AACG,SAAU,gBAAgB,CAAC,IAAiB,EAAE,GAAa,EAAA;IAC/D,IAAI,EAAE,GAAuB,IAAI;IACjC,OAAO,EAAE,EAAE;QACT,IAAI,EAAE,CAAC,OAAO,KAAK,QAAQ,IAAK,EAAwB,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;AACxE,QAAA,EAAE,GAAG,EAAE,CAAC,aAAa;IACvB;IACA,OAAO,GAAG,CAAC,IAAI;AACjB;;ACzBA;AACA;AAEA;AACA;;ACJA;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-protocol/core",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Kanso Protocol — core design tokens (CSS/SCSS variables + generated TS constants).",
   "license": "MIT",
   "author": "GregNBlack",

package/types/kanso-protocol-core.d.ts

@@ -17,5 +17,25 @@ declare const KP_SIZES: Record<KpSize, number>;
 declare const KP_RADII: Record<KpSize, number>;
 declare const KP_ICON_SIZES: Record<KpSize, number>;
 
-export { KP_ICON_SIZES, KP_RADII, KP_SIZES };
+/**
+ * Find the right portal target for a floating overlay (select dropdown,
+ * combobox listbox, popover panel, etc.) so it stays in the same
+ * stacking context as its trigger.
+ *
+ * Background: Kanso `<kp-dialog>` uses native `<dialog>.showModal()`
+ * which places the dialog in the browser's **top-layer**. Anything
+ * portaled to `document.body` ends up BELOW the top-layer — invisible
+ * and inert. To stay visible / interactive, overlays must portal
+ * inside the nearest open `<dialog>` ancestor instead.
+ *
+ * Outside a dialog, `document.body` is still the right target so the
+ * overlay isn't clipped by any transformed / overflow:hidden ancestor.
+ *
+ * @example
+ * const target = findPortalTarget(this.host.nativeElement, this.doc);
+ * if (target && el.parentElement !== target) target.appendChild(el);
+ */
+declare function findPortalTarget(host: HTMLElement, doc: Document): HTMLElement;
+
+export { KP_ICON_SIZES, KP_RADII, KP_SIZES, findPortalTarget };
 export type { KpColorRole, KpSize, KpState, KpVariant };