mnfst 0.5.188 → 0.5.189

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 (30) hide show
  1. package/lib/manifest.accordion.css +1 -1
  2. package/lib/manifest.avatar.css +4 -4
  3. package/lib/manifest.button.css +5 -5
  4. package/lib/manifest.checkbox.css +4 -4
  5. package/lib/manifest.code.css +1 -1
  6. package/lib/manifest.code.min.css +1 -1
  7. package/lib/manifest.colorpicker.css +5 -5
  8. package/lib/manifest.combobox.css +12 -2
  9. package/lib/manifest.combobox.js +24 -5
  10. package/lib/manifest.css +77 -67
  11. package/lib/manifest.d.ts +214 -30
  12. package/lib/manifest.data.js +47 -12
  13. package/lib/manifest.datepicker.css +13 -13
  14. package/lib/manifest.divider.css +1 -1
  15. package/lib/manifest.dropdown.css +4 -4
  16. package/lib/manifest.dropdowns.js +20 -2
  17. package/lib/manifest.form.css +1 -1
  18. package/lib/manifest.input.css +5 -5
  19. package/lib/manifest.integrity.json +3 -3
  20. package/lib/manifest.min.css +1 -1
  21. package/lib/manifest.range.css +4 -4
  22. package/lib/manifest.resize.css +1 -1
  23. package/lib/manifest.schema.json +29 -0
  24. package/lib/manifest.switch.css +3 -3
  25. package/lib/manifest.table.css +2 -2
  26. package/lib/manifest.theme.css +1 -1
  27. package/lib/manifest.toast.css +2 -2
  28. package/lib/manifest.typography.css +3 -3
  29. package/lib/manifest.utilities.css +5 -5
  30. package/package.json +5 -5
package/lib/manifest.accordion.css CHANGED
@@ -55,7 +55,7 @@
55
55
  order: 1;
56
56
  width: 1rem;
57
57
  height: 1rem;
58
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, oklch(43.9% 0 0)));
58
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, oklch(43.9% 0 0)));
59
59
  -webkit-mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
60
60
  mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
61
61
  -webkit-mask-repeat: no-repeat;
package/lib/manifest.avatar.css CHANGED
@@ -15,7 +15,7 @@
15
15
  text-align: center;
16
16
  text-transform: uppercase;
17
17
  color: var(--color-field-inverse, oklch(43.9% 0 0));
18
- background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
18
+ background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
19
19
  background-clip: content-box;
20
20
  background-size: cover;
21
21
  background-position: center;
@@ -47,7 +47,7 @@
47
47
  width: 9px;
48
48
  height: 9px;
49
49
  z-index: 1;
50
- background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
50
+ background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
51
51
  border: 1px solid var(--color-page, oklch(98.5% 0 0));
52
52
  border-radius: 50%
53
53
  }
@@ -59,7 +59,7 @@
59
59
  background-blend-mode: normal;
60
60
 
61
61
  &:hover {
62
- background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
62
+ background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
63
63
  background-blend-mode: multiply;
64
64
 
65
65
  & img {
@@ -111,7 +111,7 @@
111
111
  padding-inline-end: 1.5ch;
112
112
 
113
113
  &:hover .avatar {
114
- background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
114
+ background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
115
115
  transition: var(--transition, all .05s ease-in-out)
116
116
  }
117
117
  }
package/lib/manifest.button.css CHANGED
@@ -18,12 +18,12 @@
18
18
  white-space: nowrap;
19
19
  text-overflow: ellipsis;
20
20
  color: var(--color-field-inverse, oklch(43.9% 0 0));
21
- background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
21
+ background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
22
22
  border-width: 0;
23
23
  border-style: solid;
24
24
  border-color: transparent;
25
25
  border-radius: var(--radius, 0.5rem);
26
- outline-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
26
+ outline-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
27
27
  cursor: pointer;
28
28
  transition: var(--transition, all .05s ease-in-out);
29
29
  appearance: button;
@@ -52,15 +52,15 @@
52
52
  }
53
53
 
54
54
  &:hover {
55
- background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
55
+ background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
56
56
  }
57
57
 
58
58
  &:active {
59
- background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
59
+ background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
60
60
  }
61
61
 
62
62
  &:focus-visible {
63
- background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
63
+ background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
64
64
  }
65
65
  }
66
66
 
package/lib/manifest.checkbox.css CHANGED
@@ -16,13 +16,13 @@
16
16
  &:checked {
17
17
 
18
18
  &:hover {
19
- background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
20
- border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
19
+ background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
20
+ border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
21
21
  }
22
22
 
23
23
  &:active {
24
- background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
25
- border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
24
+ background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
25
+ border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
26
26
  }
27
27
  }
28
28
 
package/lib/manifest.code.css CHANGED
@@ -284,7 +284,7 @@
284
284
 
285
285
  &:hover {
286
286
  color: var(--color-content-stark, oklch(43.9% 0 0));
287
- background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
287
+ background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
288
288
  }
289
289
 
290
290
  &[aria-selected="true"] {
package/lib/manifest.code.min.css CHANGED
@@ -1 +1 @@
1
- @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:1em;vertical-align:middle;width:1em;@supports (height:1lh){height:1lh;vertical-align:top}}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0));display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(oklch(20.5% 0 0) 10%,transparent));color:var(--color-content-stark,oklch(43.9% 0 0))}&[aria-selected=true]{color:var(--color-brand-content,oklch(68.1% .162 75.834));pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,oklch(43.9% 0 0))}}&:after{background-color:var(--color-content-neutral,oklch(43.9% 0 0));content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{background-color:var(--color-page,oklch(98.5% 0 0));color:var(--color-content-subtle,oklch(55.6% 0 0));display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*8 + 2ch)}:where(code){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,oklch(55.6% 0 0));cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0))}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){background:unset;border:0;box-shadow:unset;color:unset;font-family:unset;font-size:unset;font-weight:unset;line-height:unset;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}
1
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:1em;vertical-align:middle;width:1em;@supports (height:1lh){height:1lh;vertical-align:top}}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0));display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(in oklch,oklch(20.5% 0 0) 10%,transparent));color:var(--color-content-stark,oklch(43.9% 0 0))}&[aria-selected=true]{color:var(--color-brand-content,oklch(68.1% .162 75.834));pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,oklch(43.9% 0 0))}}&:after{background-color:var(--color-content-neutral,oklch(43.9% 0 0));content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{background-color:var(--color-page,oklch(98.5% 0 0));color:var(--color-content-subtle,oklch(55.6% 0 0));display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*8 + 2ch)}:where(code){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,oklch(55.6% 0 0));cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0))}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){background:unset;border:0;box-shadow:unset;color:unset;font-family:unset;font-size:unset;font-weight:unset;line-height:unset;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}
package/lib/manifest.colorpicker.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Manifest Color Picker */
2
2
 
3
3
  :root {
4
- --color-picker-swatch: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
4
+ --color-picker-swatch: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
5
5
  --icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");
6
6
  --icon-color-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-blend-icon lucide-blend'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");
7
7
  --icon-color-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-swatch-book-icon lucide-swatch-book'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");
@@ -83,7 +83,7 @@
83
83
  display: flex;
84
84
  width: 100%;
85
85
  padding: 2px;
86
- border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
86
+ border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
87
87
 
88
88
  /* Distribute button widths equally */
89
89
  & button {
@@ -258,7 +258,7 @@
258
258
 
259
259
  /* Gradient layers */
260
260
  & :where(.layer-options-wrapper) {
261
- border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
261
+ border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
262
262
 
263
263
  /* Layer options inputs */
264
264
  & :where(.layer-options-inputs) {
@@ -308,7 +308,7 @@
308
308
  margin-inline-end: 0.5rem;
309
309
  border-radius: 1rem;
310
310
  cursor: pointer;
311
- background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
311
+ background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
312
312
 
313
313
  /* Stop handle */
314
314
  & :where(.stop-handle) {
@@ -397,7 +397,7 @@
397
397
 
398
398
  /* Only apply border to all except last library-group */
399
399
  &:not(:last-child) {
400
- border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
400
+ border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
401
401
  }
402
402
 
403
403
  /* Palette wrapper */
package/lib/manifest.combobox.css CHANGED
@@ -35,9 +35,19 @@
35
35
  padding-inline: calc(var(--spacing, 0.25rem) * 1.25)
36
36
  }
37
37
 
38
- &:has(> :where(input, textarea):disabled) {
38
+ /* Plugin-set from render(), so it tracks any editor type — including a
39
+ <button> editor, which the old :has(> input:disabled) rule missed. */
40
+ &[data-disabled] {
39
41
  opacity: .5;
40
- pointer-events: none
42
+ pointer-events: none;
43
+ cursor: default;
44
+
45
+ /* The × stays (layout), inert — the field is already dimmed as a whole,
46
+ so don't let the global :disabled dimming stack on top of it. */
47
+ .combobox-chip>button:disabled {
48
+ opacity: 1;
49
+ cursor: default
50
+ }
41
51
  }
42
52
 
43
53
  /* Inner typing surface */
package/lib/manifest.combobox.js CHANGED
@@ -337,6 +337,12 @@ function initializeComboboxPlugin() {
337
337
  let lockedSet = computeLocked();
338
338
  const isLocked = (v) => lockedSet.has(String(v).toLowerCase());
339
339
 
340
+ // ----- Disabled -----
341
+ // Native `disabled` on the editor (input/textarea/button), live so `:disabled`
342
+ // tracks. Chips drop their × entirely — CSS pointer-events can't stop keyboard
343
+ // activation, and an .unstyle field has no CSS at all.
344
+ const isDisabled = () => !!el.disabled;
345
+
340
346
  // ----- Reactive model (x-model), owned here -----
341
347
  // Preserve the author's shape (array or CSV; array default for .multiple). Chips
342
348
  // show labels, the model carries values. Read/effect/set wired near mount.
@@ -617,7 +623,7 @@ function initializeComboboxPlugin() {
617
623
  announce(label + ' added');
618
624
  }
619
625
  function removeValue(value) {
620
- if (isLocked(value)) return; // locked chips stay put
626
+ if (isLocked(value) || isDisabled()) return; // locked/disabled chips stay put
621
627
  const i = selected.findIndex(s => String(s.value).toLowerCase() === String(value).toLowerCase());
622
628
  if (i < 0) return;
623
629
  const [g] = selected.splice(i, 1);
@@ -685,16 +691,19 @@ function initializeComboboxPlugin() {
685
691
  t.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
686
692
  });
687
693
  }
688
- // Add/drop the × to match locked state. Re-run from render() so a reactive
689
- // `locked` change toggles existing chips too.
694
+ // Add/drop the × to match locked/disabled state. Re-run from render() so a
695
+ // reactive `locked` or `:disabled` change toggles existing chips too.
690
696
  function applyLock(chip, value, label) {
691
697
  const locked = isLocked(value);
692
698
  chip.toggleAttribute('data-locked', locked);
693
699
  const btn = chip.querySelector(':scope > button');
694
- if (locked) { if (btn) btn.remove(); return; }
695
- if (btn) return;
700
+ if (locked) { if (btn) btn.remove(); return; } // locked drops the × by design
701
+ // Disabled keeps the × for layout but makes it inert: a disabled button is
702
+ // out of the tab order and can't be activated by mouse or keyboard.
703
+ if (btn) { btn.disabled = isDisabled(); return; }
696
704
  const x = document.createElement('button');
697
705
  x.type = 'button';
706
+ x.disabled = isDisabled();
698
707
  x.setAttribute('aria-label', 'Remove ' + (label || (chip.querySelector(':scope > span') || {}).textContent || value));
699
708
  x.textContent = '×';
700
709
  x.addEventListener('click', () => removeValue(value));
@@ -705,11 +714,15 @@ function initializeComboboxPlugin() {
705
714
  h.type = 'hidden';
706
715
  h.name = name;
707
716
  h.value = value;
717
+ h.disabled = isDisabled(); // native: a disabled field doesn't submit
708
718
  h.setAttribute('data-cb', '');
709
719
  return h;
710
720
  }
711
721
 
712
722
  function render() {
723
+ // Styling hook — CSS keys off this, not :has(:disabled), so a <button>
724
+ // editor dims too.
725
+ wrap.toggleAttribute('data-disabled', isDisabled());
713
726
  if (chips) {
714
727
  // Incremental: keep existing chip nodes, add/drop/refresh only. Recreating
715
728
  // all re-inserts next to the focused editor, collapsing them in WebKit.
@@ -867,6 +880,12 @@ function initializeComboboxPlugin() {
867
880
  // as a stale duplicate. Authored/adopted menus go with their container.
868
881
  if (cleanup && generatedMenu) cleanup(() => { if (generatedMenu.isConnected) generatedMenu.remove(); });
869
882
 
883
+ // `:disabled` is written straight onto the editor by Alpine — observe it so
884
+ // toggling re-renders (chips regain their × when re-enabled).
885
+ const disabledObserver = new MutationObserver(() => { closeMenu(); render(); });
886
+ disabledObserver.observe(el, { attributes: true, attributeFilter: ['disabled'] });
887
+ if (cleanup) cleanup(() => disabledObserver.disconnect());
888
+
870
889
  // ----- Reactive model (x-model) -----
871
890
  // Render chips from the bound value on init and external change; write back on
872
891
  // add/remove. Read inside an Alpine effect so $x / nested state stay reactive.