@kanso-protocol/theme-toggle 0.1.0 → 0.5.2
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.
|
@@ -109,7 +109,7 @@ class KpThemeToggleComponent {
|
|
|
109
109
|
this.closeMenu();
|
|
110
110
|
}
|
|
111
111
|
get hostClasses() {
|
|
112
|
-
return `kp-theme-toggle kp-theme-toggle--${this.variant} kp-theme-toggle--${this.size}`;
|
|
112
|
+
return `kp-theme-toggle kp-theme-toggle--${this.variant} kp-theme-toggle--${this.size} kp-theme-toggle--theme-${this.currentTheme}`;
|
|
113
113
|
}
|
|
114
114
|
cycle() {
|
|
115
115
|
const idx = THEMES.indexOf(this.currentTheme);
|
|
@@ -145,6 +145,7 @@ class KpThemeToggleComponent {
|
|
|
145
145
|
<span class="kp-theme-toggle__label">Theme</span>
|
|
146
146
|
}
|
|
147
147
|
<div class="kp-theme-toggle__segments" role="tablist" aria-label="Theme">
|
|
148
|
+
<span class="kp-theme-toggle__pill" aria-hidden="true"></span>
|
|
148
149
|
@for (t of themes; track t) {
|
|
149
150
|
<button
|
|
150
151
|
type="button"
|
|
@@ -198,7 +199,7 @@ class KpThemeToggleComponent {
|
|
|
198
199
|
}
|
|
199
200
|
</div>
|
|
200
201
|
}
|
|
201
|
-
`, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:8px;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-theme-toggle__label{font-size:14px;color:var(--kp-color-
|
|
202
|
+
`, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:8px;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-theme-toggle__label{font-size:14px;color:var(--kp-color-text-default)}:host .ti{font-size:var(--kp-theme-glyph, 18px);line-height:1}:host .ti.kp-theme-toggle__chevron{font-size:14px;color:var(--kp-color-text-muted)}.kp-theme-toggle__icon-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;width:var(--kp-theme-btn, 36px);height:var(--kp-theme-btn, 36px);border-radius:8px;color:var(--kp-color-text-muted);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-theme-toggle__icon-btn:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-theme-toggle__segments{position:relative;display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--kp-color-border-default);border-radius:8px;background:var(--kp-color-surface-subtle)}.kp-theme-toggle__pill{position:absolute;top:2px;left:2px;width:var(--kp-theme-seg, 28px);height:var(--kp-theme-seg, 28px);border-radius:6px;background:var(--kp-color-surface-base);box-shadow:var(--kp-elevation-raised);transform:translate(var(--kp-theme-pill-x, 0));transition:transform .24s cubic-bezier(.32,.72,0,1);pointer-events:none;z-index:0}:host(.kp-theme-toggle--theme-light){--kp-theme-pill-x: 0}:host(.kp-theme-toggle--theme-dark){--kp-theme-pill-x: calc(var(--kp-theme-seg, 28px) + 2px)}:host(.kp-theme-toggle--theme-system){--kp-theme-pill-x: calc((var(--kp-theme-seg, 28px) + 2px) * 2)}.kp-theme-toggle__segment{all:unset;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--kp-theme-seg, 28px);height:var(--kp-theme-seg, 28px);border-radius:6px;color:var(--kp-color-text-muted);cursor:pointer;transition:color .12s ease}.kp-theme-toggle__segment:hover,.kp-theme-toggle__segment--selected{color:var(--kp-color-text-strong)}.kp-theme-toggle__dropdown{all:unset;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--kp-color-text-default);font-size:13px;font-weight:500;cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-theme-toggle__dropdown:hover,.kp-theme-toggle__dropdown--open{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-theme-toggle__dropdown-label{min-width:44px;text-align:start}.kp-theme-toggle__dropdown-wrap{position:relative;display:inline-block}.kp-theme-toggle__menu{position:fixed;display:flex;flex-direction:column;padding:4px;border-radius:10px;background:var(--kp-color-surface-base);border:1px solid var(--kp-color-border-default);box-shadow:var(--kp-elevation-overlay);z-index:1000;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-theme-toggle__option{all:unset;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--kp-color-text-default);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-theme-toggle__option:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-theme-toggle__option--selected{color:var(--kp-color-text-strong);font-weight:500}.kp-theme-toggle__option-check{margin-inline-start:auto;color:var(--kp-color-accent-primary-fg)}.kp-theme-toggle__menu .ti{font-size:18px;line-height:1}.kp-theme-toggle__menu--sm .ti{font-size:16px}.kp-theme-toggle__menu--md .ti{font-size:18px}.kp-theme-toggle__menu--lg .ti{font-size:20px}.kp-theme-toggle__menu .ti.kp-theme-toggle__option-check{font-size:14px}:host(.kp-theme-toggle--sm){--kp-theme-btn: 28px;--kp-theme-seg: 24px;--kp-theme-glyph: 16px}:host(.kp-theme-toggle--md){--kp-theme-btn: 36px;--kp-theme-seg: 28px;--kp-theme-glyph: 18px}:host(.kp-theme-toggle--lg){--kp-theme-btn: 44px;--kp-theme-seg: 36px;--kp-theme-glyph: 20px}\n"], dependencies: [{ kind: "component", type: KpIconComponent, selector: "kp-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
202
203
|
}
|
|
203
204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KpThemeToggleComponent, decorators: [{
|
|
204
205
|
type: Component,
|
|
@@ -217,6 +218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
217
218
|
<span class="kp-theme-toggle__label">Theme</span>
|
|
218
219
|
}
|
|
219
220
|
<div class="kp-theme-toggle__segments" role="tablist" aria-label="Theme">
|
|
221
|
+
<span class="kp-theme-toggle__pill" aria-hidden="true"></span>
|
|
220
222
|
@for (t of themes; track t) {
|
|
221
223
|
<button
|
|
222
224
|
type="button"
|
|
@@ -270,7 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
|
|
|
270
272
|
}
|
|
271
273
|
</div>
|
|
272
274
|
}
|
|
273
|
-
`, styles: [":host{display:inline-flex;align-items:center;gap:8px;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-theme-toggle__label{font-size:14px;color:var(--kp-color-
|
|
275
|
+
`, styles: [":host{display:inline-flex;align-items:center;gap:8px;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-theme-toggle__label{font-size:14px;color:var(--kp-color-text-default)}:host .ti{font-size:var(--kp-theme-glyph, 18px);line-height:1}:host .ti.kp-theme-toggle__chevron{font-size:14px;color:var(--kp-color-text-muted)}.kp-theme-toggle__icon-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;width:var(--kp-theme-btn, 36px);height:var(--kp-theme-btn, 36px);border-radius:8px;color:var(--kp-color-text-muted);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-theme-toggle__icon-btn:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-theme-toggle__segments{position:relative;display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--kp-color-border-default);border-radius:8px;background:var(--kp-color-surface-subtle)}.kp-theme-toggle__pill{position:absolute;top:2px;left:2px;width:var(--kp-theme-seg, 28px);height:var(--kp-theme-seg, 28px);border-radius:6px;background:var(--kp-color-surface-base);box-shadow:var(--kp-elevation-raised);transform:translate(var(--kp-theme-pill-x, 0));transition:transform .24s cubic-bezier(.32,.72,0,1);pointer-events:none;z-index:0}:host(.kp-theme-toggle--theme-light){--kp-theme-pill-x: 0}:host(.kp-theme-toggle--theme-dark){--kp-theme-pill-x: calc(var(--kp-theme-seg, 28px) + 2px)}:host(.kp-theme-toggle--theme-system){--kp-theme-pill-x: calc((var(--kp-theme-seg, 28px) + 2px) * 2)}.kp-theme-toggle__segment{all:unset;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--kp-theme-seg, 28px);height:var(--kp-theme-seg, 28px);border-radius:6px;color:var(--kp-color-text-muted);cursor:pointer;transition:color .12s ease}.kp-theme-toggle__segment:hover,.kp-theme-toggle__segment--selected{color:var(--kp-color-text-strong)}.kp-theme-toggle__dropdown{all:unset;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--kp-color-text-default);font-size:13px;font-weight:500;cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-theme-toggle__dropdown:hover,.kp-theme-toggle__dropdown--open{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-theme-toggle__dropdown-label{min-width:44px;text-align:start}.kp-theme-toggle__dropdown-wrap{position:relative;display:inline-block}.kp-theme-toggle__menu{position:fixed;display:flex;flex-direction:column;padding:4px;border-radius:10px;background:var(--kp-color-surface-base);border:1px solid var(--kp-color-border-default);box-shadow:var(--kp-elevation-overlay);z-index:1000;font-family:var(--kp-font-family-sans, \"Onest\", system-ui, sans-serif)}.kp-theme-toggle__option{all:unset;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--kp-color-text-default);cursor:pointer;transition:background var(--kp-motion-duration-fast) ease,color .12s ease}.kp-theme-toggle__option:hover{background:var(--kp-color-surface-muted);color:var(--kp-color-text-strong)}.kp-theme-toggle__option--selected{color:var(--kp-color-text-strong);font-weight:500}.kp-theme-toggle__option-check{margin-inline-start:auto;color:var(--kp-color-accent-primary-fg)}.kp-theme-toggle__menu .ti{font-size:18px;line-height:1}.kp-theme-toggle__menu--sm .ti{font-size:16px}.kp-theme-toggle__menu--md .ti{font-size:18px}.kp-theme-toggle__menu--lg .ti{font-size:20px}.kp-theme-toggle__menu .ti.kp-theme-toggle__option-check{font-size:14px}:host(.kp-theme-toggle--sm){--kp-theme-btn: 28px;--kp-theme-seg: 24px;--kp-theme-glyph: 16px}:host(.kp-theme-toggle--md){--kp-theme-btn: 36px;--kp-theme-seg: 28px;--kp-theme-glyph: 18px}:host(.kp-theme-toggle--lg){--kp-theme-btn: 44px;--kp-theme-seg: 36px;--kp-theme-glyph: 20px}\n"] }]
|
|
274
276
|
}], propDecorators: { variant: [{
|
|
275
277
|
type: Input
|
|
276
278
|
}], size: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanso-protocol-theme-toggle.mjs","sources":["../../../../../packages/patterns/theme-toggle/src/theme-toggle.component.ts","../../../../../packages/patterns/theme-toggle/src/kanso-protocol-theme-toggle.ts"],"sourcesContent":["import {\n AfterViewChecked,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n Output,\n ViewChild,\n inject,\n signal,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { KpIconComponent } from '@kanso-protocol/icon';\n\nexport type KpThemeToggleVariant = 'icon' | 'segmented' | 'dropdown';\nexport type KpThemeToggleSize = 'sm' | 'md' | 'lg';\nexport type KpThemeValue = 'light' | 'dark' | 'system';\n\nconst THEMES: KpThemeValue[] = ['light', 'dark', 'system'];\n\n/**\n * Kanso Protocol — ThemeToggle\n *\n * Three presentations for switching between light / dark / system\n * themes:\n * - `icon` — single icon button that cycles\n * - `segmented` — three inline icon segments, one selected\n * - `dropdown` — ghost button showing the current theme label; opens a menu\n *\n * The component emits `themeChange` when the user selects a value;\n * keeping the chosen theme (including `system`) up to the consumer.\n *\n * @example\n * <kp-theme-toggle\n * variant=\"segmented\"\n * [showLabel]=\"true\"\n * [currentTheme]=\"theme()\"\n * (themeChange)=\"theme.set($event)\"\n * />\n */\n@Component({\n selector: 'kp-theme-toggle',\n imports: [KpIconComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (variant === 'icon') {\n <button\n type=\"button\"\n class=\"kp-theme-toggle__icon-btn\"\n [attr.aria-label]=\"'Toggle theme (current: ' + currentTheme + ')'\"\n (click)=\"cycle()\"\n >\n <kp-icon [name]=\"iconName(currentTheme)\" />\n </button>\n } @else if (variant === 'segmented') {\n @if (showLabel) {\n <span class=\"kp-theme-toggle__label\">Theme</span>\n }\n <div class=\"kp-theme-toggle__segments\" role=\"tablist\" aria-label=\"Theme\">\n @for (t of themes; track t) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"kp-theme-toggle__segment\"\n [class.kp-theme-toggle__segment--selected]=\"currentTheme === t\"\n [attr.aria-selected]=\"currentTheme === t\"\n [attr.aria-label]=\"t\"\n (click)=\"select(t)\"\n >\n <kp-icon [name]=\"iconName(t)\" />\n </button>\n }\n </div>\n } @else {\n @if (showLabel) {\n <span class=\"kp-theme-toggle__label\">Theme</span>\n }\n <div class=\"kp-theme-toggle__dropdown-wrap\">\n <button\n type=\"button\"\n class=\"kp-theme-toggle__dropdown\"\n [class.kp-theme-toggle__dropdown--open]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n (click)=\"toggleOpen()\"\n >\n <kp-icon [name]=\"iconName(currentTheme)\" />\n <span class=\"kp-theme-toggle__dropdown-label\">{{ themeLabel(currentTheme) }}</span>\n <kp-icon name=\"chevron-down\" class=\"kp-theme-toggle__chevron\" />\n </button>\n @if (isOpen()) {\n <div #menu class=\"kp-theme-toggle__menu\" role=\"listbox\" aria-label=\"Theme\">\n @for (t of themes; track t) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"kp-theme-toggle__option\"\n [class.kp-theme-toggle__option--selected]=\"currentTheme === t\"\n [attr.aria-selected]=\"currentTheme === t\"\n (click)=\"selectFromMenu(t)\"\n >\n <kp-icon [name]=\"iconName(t)\" />\n <span>{{ themeLabel(t) }}</span>\n @if (currentTheme === t) {\n <kp-icon name=\"check\" class=\"kp-theme-toggle__option-check\" />\n }\n </button>\n }\n </div>\n }\n </div>\n }\n `,\n styles: [`\n :host {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-theme-toggle__label {\n font-size: 14px;\n color: var(--kp-color-gray-700, var(--kp-color-gray-700));\n }\n\n :host .ti {\n font-size: var(--kp-theme-glyph, 18px);\n line-height: 1;\n }\n :host .ti.kp-theme-toggle__chevron {\n font-size: 14px;\n color: var(--kp-color-gray-500, var(--kp-color-gray-500));\n }\n\n /* Icon variant */\n .kp-theme-toggle__icon-btn {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kp-theme-btn, 36px);\n height: var(--kp-theme-btn, 36px);\n border-radius: 8px;\n color: var(--kp-color-gray-600, var(--kp-color-gray-600));\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-theme-toggle__icon-btn:hover { background: var(--kp-color-gray-100, var(--kp-color-gray-100)); color: var(--kp-color-gray-900, var(--kp-color-gray-900)); }\n\n /* Segmented variant */\n .kp-theme-toggle__segments {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 2px;\n border: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n border-radius: 8px;\n background: var(--kp-color-gray-50, var(--kp-color-gray-50));\n }\n .kp-theme-toggle__segment {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kp-theme-seg, 28px);\n height: var(--kp-theme-seg, 28px);\n border-radius: 6px;\n color: var(--kp-color-gray-500, var(--kp-color-gray-500));\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-theme-toggle__segment:hover { color: var(--kp-color-gray-900, var(--kp-color-gray-900)); }\n .kp-theme-toggle__segment--selected {\n background: var(--kp-color-white, var(--kp-color-white));\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n box-shadow: var(--kp-elevation-raised);\n }\n\n /* Dropdown variant */\n .kp-theme-toggle__dropdown {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n border-radius: 8px;\n color: var(--kp-color-gray-700, var(--kp-color-gray-700));\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-theme-toggle__dropdown:hover,\n .kp-theme-toggle__dropdown--open {\n background: var(--kp-color-gray-100, var(--kp-color-gray-100));\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n }\n .kp-theme-toggle__dropdown-label { min-width: 44px; text-align: start; }\n\n .kp-theme-toggle__dropdown-wrap {\n position: relative;\n display: inline-block;\n }\n .kp-theme-toggle__menu {\n position: fixed;\n display: flex;\n flex-direction: column;\n padding: 4px;\n border-radius: 10px;\n background: var(--kp-color-white, var(--kp-color-white));\n border: 1px solid var(--kp-color-gray-200, var(--kp-color-gray-200));\n box-shadow: var(--kp-elevation-overlay);\n z-index: 1000;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n .kp-theme-toggle__option {\n all: unset;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 7px 10px;\n border-radius: 6px;\n font-size: 13px;\n color: var(--kp-color-gray-700, var(--kp-color-gray-700));\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-theme-toggle__option:hover {\n background: var(--kp-color-gray-100, var(--kp-color-gray-100));\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n }\n .kp-theme-toggle__option--selected {\n color: var(--kp-color-gray-900, var(--kp-color-gray-900));\n font-weight: 500;\n }\n .kp-theme-toggle__option-check {\n margin-inline-start: auto;\n color: var(--kp-color-blue-600, var(--kp-color-blue-600));\n }\n\n /* Menu icons — match trigger size. Scoped by size class instead of :host\n because the menu is portaled to <body> and escapes the host context. */\n .kp-theme-toggle__menu .ti { font-size: 18px; line-height: 1; }\n .kp-theme-toggle__menu--sm .ti { font-size: 16px; }\n .kp-theme-toggle__menu--md .ti { font-size: 18px; }\n .kp-theme-toggle__menu--lg .ti { font-size: 20px; }\n .kp-theme-toggle__menu .ti.kp-theme-toggle__option-check { font-size: 14px; }\n\n /* Sizes */\n :host(.kp-theme-toggle--sm) {\n --kp-theme-btn: 28px;\n --kp-theme-seg: 24px;\n --kp-theme-glyph: 16px;\n }\n :host(.kp-theme-toggle--md) {\n --kp-theme-btn: 36px;\n --kp-theme-seg: 28px;\n --kp-theme-glyph: 18px;\n }\n :host(.kp-theme-toggle--lg) {\n --kp-theme-btn: 44px;\n --kp-theme-seg: 36px;\n --kp-theme-glyph: 20px;\n }\n `],\n})\nexport class KpThemeToggleComponent implements AfterViewChecked, OnDestroy {\n @Input() variant: KpThemeToggleVariant = 'icon';\n @Input() size: KpThemeToggleSize = 'md';\n @Input() currentTheme: KpThemeValue = 'light';\n @Input() showLabel = false;\n\n @Output() themeChange = new EventEmitter<KpThemeValue>();\n @Output() dropdownClick = new EventEmitter<void>();\n\n readonly themes = THEMES;\n readonly isOpen = signal(false);\n\n @ViewChild('menu') menuEl?: ElementRef<HTMLElement>;\n\n private readonly hostRef = inject(ElementRef<HTMLElement>);\n private readonly doc = inject(DOCUMENT);\n private portaledMenu: HTMLElement | null = null;\n\n ngAfterViewChecked(): void {\n if (!this.isOpen()) return;\n const menu = this.menuEl?.nativeElement;\n // Portal menu to <body> so transformed/clipped ancestors can't clip it.\n if (menu && this.doc?.body && menu.parentElement !== this.doc.body) {\n // Tag the menu with the current size so size-scoped CSS applies after portal\n menu.classList.add(`kp-theme-toggle__menu--${this.size}`);\n this.doc.body.appendChild(menu);\n this.portaledMenu = menu;\n window.addEventListener('scroll', this.reposition, true);\n window.addEventListener('resize', this.reposition);\n }\n this.positionMenu();\n }\n\n ngOnDestroy(): void {\n this.cleanupMenu();\n }\n\n private cleanupMenu(): void {\n window.removeEventListener('scroll', this.reposition, true);\n window.removeEventListener('resize', this.reposition);\n if (this.portaledMenu && this.portaledMenu.parentElement === this.doc?.body) {\n this.portaledMenu.remove();\n }\n this.portaledMenu = null;\n }\n\n private closeMenu(): void {\n if (!this.isOpen()) return;\n this.cleanupMenu();\n this.isOpen.set(false);\n }\n\n private readonly reposition = () => this.positionMenu();\n\n private positionMenu(): void {\n const menu = this.menuEl?.nativeElement;\n const trigger = this.hostRef.nativeElement.querySelector('.kp-theme-toggle__dropdown') as HTMLElement | null;\n if (!menu || !trigger) return;\n const rect = trigger.getBoundingClientRect();\n menu.style.top = `${rect.bottom + 6}px`;\n menu.style.left = `${rect.left}px`;\n menu.style.right = 'auto';\n menu.style.width = `${rect.width}px`;\n }\n\n @HostListener('document:click', ['$event'])\n onDocClick(event: Event): void {\n if (!this.isOpen()) return;\n const target = event.target as Node;\n const host = this.hostRef.nativeElement;\n const portaled = this.portaledMenu;\n const insideHost = host && host.contains(target);\n const insideMenu = portaled && portaled.contains(target);\n if (!insideHost && !insideMenu) this.closeMenu();\n }\n\n @HostListener('document:keydown.escape')\n onEsc(): void {\n this.closeMenu();\n }\n\n toggleOpen(): void {\n if (this.isOpen()) {\n this.closeMenu();\n } else {\n this.isOpen.set(true);\n this.dropdownClick.emit();\n }\n }\n\n selectFromMenu(t: KpThemeValue): void {\n this.select(t);\n this.closeMenu();\n }\n\n get hostClasses(): string {\n return `kp-theme-toggle kp-theme-toggle--${this.variant} kp-theme-toggle--${this.size}`;\n }\n\n cycle(): void {\n const idx = THEMES.indexOf(this.currentTheme);\n const next = THEMES[(idx + 1) % THEMES.length];\n this.currentTheme = next;\n this.themeChange.emit(next);\n }\n\n select(t: KpThemeValue): void {\n if (t === this.currentTheme) return;\n this.currentTheme = t;\n this.themeChange.emit(t);\n }\n\n themeLabel(t: KpThemeValue): string {\n return t === 'light' ? 'Light' : t === 'dark' ? 'Dark' : 'System';\n }\n\n iconName(t: KpThemeValue): string {\n return t === 'light' ? 'sun-high' : t === 'dark' ? 'moon' : 'device-desktop';\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kanso-protocol-theme-toggle.mjs","sources":["../../../../../packages/patterns/theme-toggle/src/theme-toggle.component.ts","../../../../../packages/patterns/theme-toggle/src/kanso-protocol-theme-toggle.ts"],"sourcesContent":["import {\n AfterViewChecked,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n Output,\n ViewChild,\n inject,\n signal,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { KpIconComponent } from '@kanso-protocol/icon';\n\nexport type KpThemeToggleVariant = 'icon' | 'segmented' | 'dropdown';\nexport type KpThemeToggleSize = 'sm' | 'md' | 'lg';\nexport type KpThemeValue = 'light' | 'dark' | 'system';\n\nconst THEMES: KpThemeValue[] = ['light', 'dark', 'system'];\n\n/**\n * Kanso Protocol — ThemeToggle\n *\n * Three presentations for switching between light / dark / system\n * themes:\n * - `icon` — single icon button that cycles\n * - `segmented` — three inline icon segments, one selected\n * - `dropdown` — ghost button showing the current theme label; opens a menu\n *\n * The component emits `themeChange` when the user selects a value;\n * keeping the chosen theme (including `system`) up to the consumer.\n *\n * @example\n * <kp-theme-toggle\n * variant=\"segmented\"\n * [showLabel]=\"true\"\n * [currentTheme]=\"theme()\"\n * (themeChange)=\"theme.set($event)\"\n * />\n */\n@Component({\n selector: 'kp-theme-toggle',\n imports: [KpIconComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses' },\n template: `\n @if (variant === 'icon') {\n <button\n type=\"button\"\n class=\"kp-theme-toggle__icon-btn\"\n [attr.aria-label]=\"'Toggle theme (current: ' + currentTheme + ')'\"\n (click)=\"cycle()\"\n >\n <kp-icon [name]=\"iconName(currentTheme)\" />\n </button>\n } @else if (variant === 'segmented') {\n @if (showLabel) {\n <span class=\"kp-theme-toggle__label\">Theme</span>\n }\n <div class=\"kp-theme-toggle__segments\" role=\"tablist\" aria-label=\"Theme\">\n <span class=\"kp-theme-toggle__pill\" aria-hidden=\"true\"></span>\n @for (t of themes; track t) {\n <button\n type=\"button\"\n role=\"tab\"\n class=\"kp-theme-toggle__segment\"\n [class.kp-theme-toggle__segment--selected]=\"currentTheme === t\"\n [attr.aria-selected]=\"currentTheme === t\"\n [attr.aria-label]=\"t\"\n (click)=\"select(t)\"\n >\n <kp-icon [name]=\"iconName(t)\" />\n </button>\n }\n </div>\n } @else {\n @if (showLabel) {\n <span class=\"kp-theme-toggle__label\">Theme</span>\n }\n <div class=\"kp-theme-toggle__dropdown-wrap\">\n <button\n type=\"button\"\n class=\"kp-theme-toggle__dropdown\"\n [class.kp-theme-toggle__dropdown--open]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n (click)=\"toggleOpen()\"\n >\n <kp-icon [name]=\"iconName(currentTheme)\" />\n <span class=\"kp-theme-toggle__dropdown-label\">{{ themeLabel(currentTheme) }}</span>\n <kp-icon name=\"chevron-down\" class=\"kp-theme-toggle__chevron\" />\n </button>\n @if (isOpen()) {\n <div #menu class=\"kp-theme-toggle__menu\" role=\"listbox\" aria-label=\"Theme\">\n @for (t of themes; track t) {\n <button\n type=\"button\"\n role=\"option\"\n class=\"kp-theme-toggle__option\"\n [class.kp-theme-toggle__option--selected]=\"currentTheme === t\"\n [attr.aria-selected]=\"currentTheme === t\"\n (click)=\"selectFromMenu(t)\"\n >\n <kp-icon [name]=\"iconName(t)\" />\n <span>{{ themeLabel(t) }}</span>\n @if (currentTheme === t) {\n <kp-icon name=\"check\" class=\"kp-theme-toggle__option-check\" />\n }\n </button>\n }\n </div>\n }\n </div>\n }\n `,\n styles: [`\n :host {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n\n .kp-theme-toggle__label {\n font-size: 14px;\n color: var(--kp-color-text-default);\n }\n\n :host .ti {\n font-size: var(--kp-theme-glyph, 18px);\n line-height: 1;\n }\n :host .ti.kp-theme-toggle__chevron {\n font-size: 14px;\n color: var(--kp-color-text-muted);\n }\n\n /* Icon variant */\n .kp-theme-toggle__icon-btn {\n all: unset;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kp-theme-btn, 36px);\n height: var(--kp-theme-btn, 36px);\n border-radius: 8px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-theme-toggle__icon-btn:hover { background: var(--kp-color-surface-muted); color: var(--kp-color-text-strong); }\n\n /* Segmented variant — same sliding-pill pattern as\n SegmentedControl: one pill element sits behind the 3 segments\n and translates between them on selection change. The segments\n themselves only swap text color. */\n .kp-theme-toggle__segments {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 2px;\n border: 1px solid var(--kp-color-border-default);\n border-radius: 8px;\n background: var(--kp-color-surface-subtle);\n }\n .kp-theme-toggle__pill {\n position: absolute;\n top: 2px;\n left: 2px;\n width: var(--kp-theme-seg, 28px);\n height: var(--kp-theme-seg, 28px);\n border-radius: 6px;\n background: var(--kp-color-surface-base);\n box-shadow: var(--kp-elevation-raised);\n transform: translateX(var(--kp-theme-pill-x, 0));\n transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);\n pointer-events: none;\n z-index: 0;\n }\n /* Pill stride = segment width + gap (2px). */\n :host(.kp-theme-toggle--theme-light) { --kp-theme-pill-x: 0; }\n :host(.kp-theme-toggle--theme-dark) { --kp-theme-pill-x: calc(var(--kp-theme-seg, 28px) + 2px); }\n :host(.kp-theme-toggle--theme-system) { --kp-theme-pill-x: calc((var(--kp-theme-seg, 28px) + 2px) * 2); }\n\n .kp-theme-toggle__segment {\n all: unset;\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--kp-theme-seg, 28px);\n height: var(--kp-theme-seg, 28px);\n border-radius: 6px;\n color: var(--kp-color-text-muted);\n cursor: pointer;\n transition: color 120ms ease;\n }\n .kp-theme-toggle__segment:hover { color: var(--kp-color-text-strong); }\n .kp-theme-toggle__segment--selected { color: var(--kp-color-text-strong); }\n\n /* Dropdown variant */\n .kp-theme-toggle__dropdown {\n all: unset;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n border-radius: 8px;\n color: var(--kp-color-text-default);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-theme-toggle__dropdown:hover,\n .kp-theme-toggle__dropdown--open {\n background: var(--kp-color-surface-muted);\n color: var(--kp-color-text-strong);\n }\n .kp-theme-toggle__dropdown-label { min-width: 44px; text-align: start; }\n\n .kp-theme-toggle__dropdown-wrap {\n position: relative;\n display: inline-block;\n }\n .kp-theme-toggle__menu {\n position: fixed;\n display: flex;\n flex-direction: column;\n padding: 4px;\n border-radius: 10px;\n background: var(--kp-color-surface-base);\n border: 1px solid var(--kp-color-border-default);\n box-shadow: var(--kp-elevation-overlay);\n z-index: 1000;\n font-family: var(--kp-font-family-sans, 'Onest', system-ui, sans-serif);\n }\n .kp-theme-toggle__option {\n all: unset;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 7px 10px;\n border-radius: 6px;\n font-size: 13px;\n color: var(--kp-color-text-default);\n cursor: pointer;\n transition: background var(--kp-motion-duration-fast) ease, color 120ms ease;\n }\n .kp-theme-toggle__option:hover {\n background: var(--kp-color-surface-muted);\n color: var(--kp-color-text-strong);\n }\n .kp-theme-toggle__option--selected {\n color: var(--kp-color-text-strong);\n font-weight: 500;\n }\n .kp-theme-toggle__option-check {\n margin-inline-start: auto;\n color: var(--kp-color-accent-primary-fg);\n }\n\n /* Menu icons — match trigger size. Scoped by size class instead of :host\n because the menu is portaled to <body> and escapes the host context. */\n .kp-theme-toggle__menu .ti { font-size: 18px; line-height: 1; }\n .kp-theme-toggle__menu--sm .ti { font-size: 16px; }\n .kp-theme-toggle__menu--md .ti { font-size: 18px; }\n .kp-theme-toggle__menu--lg .ti { font-size: 20px; }\n .kp-theme-toggle__menu .ti.kp-theme-toggle__option-check { font-size: 14px; }\n\n /* Sizes */\n :host(.kp-theme-toggle--sm) {\n --kp-theme-btn: 28px;\n --kp-theme-seg: 24px;\n --kp-theme-glyph: 16px;\n }\n :host(.kp-theme-toggle--md) {\n --kp-theme-btn: 36px;\n --kp-theme-seg: 28px;\n --kp-theme-glyph: 18px;\n }\n :host(.kp-theme-toggle--lg) {\n --kp-theme-btn: 44px;\n --kp-theme-seg: 36px;\n --kp-theme-glyph: 20px;\n }\n `],\n})\nexport class KpThemeToggleComponent implements AfterViewChecked, OnDestroy {\n @Input() variant: KpThemeToggleVariant = 'icon';\n @Input() size: KpThemeToggleSize = 'md';\n @Input() currentTheme: KpThemeValue = 'light';\n @Input() showLabel = false;\n\n @Output() themeChange = new EventEmitter<KpThemeValue>();\n @Output() dropdownClick = new EventEmitter<void>();\n\n readonly themes = THEMES;\n readonly isOpen = signal(false);\n\n @ViewChild('menu') menuEl?: ElementRef<HTMLElement>;\n\n private readonly hostRef = inject(ElementRef<HTMLElement>);\n private readonly doc = inject(DOCUMENT);\n private portaledMenu: HTMLElement | null = null;\n\n ngAfterViewChecked(): void {\n if (!this.isOpen()) return;\n const menu = this.menuEl?.nativeElement;\n // Portal menu to <body> so transformed/clipped ancestors can't clip it.\n if (menu && this.doc?.body && menu.parentElement !== this.doc.body) {\n // Tag the menu with the current size so size-scoped CSS applies after portal\n menu.classList.add(`kp-theme-toggle__menu--${this.size}`);\n this.doc.body.appendChild(menu);\n this.portaledMenu = menu;\n window.addEventListener('scroll', this.reposition, true);\n window.addEventListener('resize', this.reposition);\n }\n this.positionMenu();\n }\n\n ngOnDestroy(): void {\n this.cleanupMenu();\n }\n\n private cleanupMenu(): void {\n window.removeEventListener('scroll', this.reposition, true);\n window.removeEventListener('resize', this.reposition);\n if (this.portaledMenu && this.portaledMenu.parentElement === this.doc?.body) {\n this.portaledMenu.remove();\n }\n this.portaledMenu = null;\n }\n\n private closeMenu(): void {\n if (!this.isOpen()) return;\n this.cleanupMenu();\n this.isOpen.set(false);\n }\n\n private readonly reposition = () => this.positionMenu();\n\n private positionMenu(): void {\n const menu = this.menuEl?.nativeElement;\n const trigger = this.hostRef.nativeElement.querySelector('.kp-theme-toggle__dropdown') as HTMLElement | null;\n if (!menu || !trigger) return;\n const rect = trigger.getBoundingClientRect();\n menu.style.top = `${rect.bottom + 6}px`;\n menu.style.left = `${rect.left}px`;\n menu.style.right = 'auto';\n menu.style.width = `${rect.width}px`;\n }\n\n @HostListener('document:click', ['$event'])\n onDocClick(event: Event): void {\n if (!this.isOpen()) return;\n const target = event.target as Node;\n const host = this.hostRef.nativeElement;\n const portaled = this.portaledMenu;\n const insideHost = host && host.contains(target);\n const insideMenu = portaled && portaled.contains(target);\n if (!insideHost && !insideMenu) this.closeMenu();\n }\n\n @HostListener('document:keydown.escape')\n onEsc(): void {\n this.closeMenu();\n }\n\n toggleOpen(): void {\n if (this.isOpen()) {\n this.closeMenu();\n } else {\n this.isOpen.set(true);\n this.dropdownClick.emit();\n }\n }\n\n selectFromMenu(t: KpThemeValue): void {\n this.select(t);\n this.closeMenu();\n }\n\n get hostClasses(): string {\n return `kp-theme-toggle kp-theme-toggle--${this.variant} kp-theme-toggle--${this.size} kp-theme-toggle--theme-${this.currentTheme}`;\n }\n\n cycle(): void {\n const idx = THEMES.indexOf(this.currentTheme);\n const next = THEMES[(idx + 1) % THEMES.length];\n this.currentTheme = next;\n this.themeChange.emit(next);\n }\n\n select(t: KpThemeValue): void {\n if (t === this.currentTheme) return;\n this.currentTheme = t;\n this.themeChange.emit(t);\n }\n\n themeLabel(t: KpThemeValue): string {\n return t === 'light' ? 'Light' : t === 'dark' ? 'Dark' : 'System';\n }\n\n iconName(t: KpThemeValue): string {\n return t === 'light' ? 'sun-high' : t === 'dark' ? 'moon' : 'device-desktop';\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-protocol/theme-toggle",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@angular/core": "^18.0.0",
|
|
7
7
|
"@angular/common": "^18.0.0",
|
|
8
|
-
"@kanso-protocol/core": "
|
|
8
|
+
"@kanso-protocol/core": ">=0.5.2"
|
|
9
9
|
},
|
|
10
10
|
"description": "Kanso Protocol — theme-toggle (pattern).",
|
|
11
11
|
"author": "GregNBlack",
|