vanilla-jui 1.7.1 → 1.7.3

package/src/css/editor.css

@@ -48,9 +48,16 @@
   .j-editor h5,
   .j-editor h6 {
     outline: none;
-    font-weight: 600;
     position: relative;
+    font-weight: 600;
     color: var(--editor-heading-fg);
+    margin-bottom: var(--editor-block-space);
+  }
+
+  .j-editor h2,
+  .j-editor h3,
+  .j-editor h4 {
+    line-height: 1.33333;
   }
 
   .j-editor h1 {
@@ -63,40 +70,33 @@
   .j-editor h2 {
     font-size: 1.5em;
     letter-spacing: -0.02em;
-    padding-top: 1.5rem;
-    margin-top: 3rem;
-    margin-bottom: var(--editor-block-space);
-    line-height: 1.33333;
-    border-top: 1px solid var(--editor-border-subtle);
+    margin-top: 2.25rem;
+    /* padding-top: 1.5rem; */
+    /* border-top: 1px solid var(--editor-border-subtle); */
   }
 
   .j-editor h3 {
     font-size: 1.25em;
     letter-spacing: -0.01em;
     margin-top: 2rem;
-    margin-bottom: var(--editor-block-space);
-    line-height: 1.4;
   }
 
   .j-editor h4 {
     font-size: 1.125em;
     letter-spacing: -0.01em;
     margin-top: 1.75rem;
-    margin-bottom: var(--editor-block-space);
-    line-height: 1.33333;
   }
 
   .j-editor h5,
   .j-editor h6 {
     font-size: 1em;
     margin-top: 1.5rem;
-    margin-bottom: var(--editor-block-space);
-    line-height: 1.5;
+    line-height: 1.4;
   }
 
   .j-editor p {
     margin-block: var(--editor-block-space);
-    line-height: var(--editor-p-line-height);
+    line-height: var(--editor-line-height);
   }
 
   /* ============================================
@@ -426,6 +426,10 @@
     display: none;
   }
 
+  .code-block .code-header select:focus-visible {
+    outline: 0;
+  }
+
   .j-editor pre code[class*='language-'] {
     display: block;
     padding: 1.25em 1.5em;
@@ -672,16 +676,29 @@
 
   .j-editor progress {
     max-width: 100%;
-    height: 0.5em;
-    margin: 0.5em 0;
     border-radius: 9999px;
     overflow: hidden;
+    height: 0.625em;
+    margin-block: 0.25em;
   }
 
   .j-editor meter {
     max-width: 100%;
     height: 1em;
-    margin: 0.25em 0;
+    margin-block: 0.125em;
+  }
+
+  .j-editor progress::-webkit-progress-value,
+  .j-editor meter::-webkit-meter-optimum-value {
+    background-color: var(--tone-solid);
+    border-radius: 9999px;
+  }
+
+  .j-editor progress::-webkit-progress-bar,
+  .j-editor meter::-webkit-meter-bar {
+    background-color: var(--tone-border);
+    border: none;
+    border-radius: 9999px;
   }
 
   /* ============================================
@@ -723,4 +740,69 @@
     scrollbar-color: var(--ui-border) transparent;
     display: block;
   }
+
+  /* ============================================
+   * tasklist
+   * ========================================= */
+  .j-editor ul[data-type='taskList'] {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .j-editor ul[data-type='taskList'] li {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .j-editor ul[data-type='taskList'] li label,
+  .j-editor ul[data-type='taskList'] li div {
+    display: flex;
+  }
+
+  .j-editor ul[data-type='taskList'] li > label {
+    flex: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .j-editor ul[data-type='taskList'] li div {
+    flex: auto;
+  }
+
+  .j-editor ul[data-type='taskList'] li div p {
+    line-height: 1.5;
+  }
+
+  .j-editor input[type='checkbox'] {
+    border: 1px solid var(--ui-border);
+    border-radius: var(--radius-sm);
+    background: var(--ui-bg);
+    clear: none;
+    cursor: pointer;
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    transition: all 0.05s ease-in-out;
+  }
+
+  .j-editor input[type='checkbox']:checked {
+    background: var(--tone-solid);
+    border-color: var(--tone-solid);
+  }
+
+  .j-editor input[type='checkbox']:checked:before {
+    content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E');
+    display: inline-block;
+    margin: -0.1875rem 0 0 -0.25rem;
+    width: 1.3125rem;
+    height: 1.3125rem;
+  }
 }

package/src/css/form.css

@@ -127,7 +127,6 @@
     border-inline-end-width: 1px;
     border-radius: 0;
     border-color: var(--ui-border);
-    /* background-color: var(--ui-surface-subtle); */
     background-color: transparent;
     margin: calc(var(--space) * -2);
     font-size: var(--input-font-size);
@@ -153,6 +152,7 @@
     border-right-color: transparent;
     padding-left: 0;
     padding-right: 0;
+    border-radius: 0;
   }
 
   .j-input.is-ghost:not([type='checkbox']) {
@@ -191,7 +191,7 @@
   .j-radio label {
     display: flex;
     align-items: center;
-    gap: var(--radio-label-gap, var(--s2));
+    gap: calc(var(--space)*1.5);
     font-size: var(--font-size-md);
     padding: calc(var(--space)*2);
     border-radius: var(--radius-md);
@@ -320,7 +320,7 @@
   }
 
   .j-radio.is-group.is-sm label span.radio-text {
-    --radio-group-padding: var(--space) var(--s2);
+    --radio-group-padding: var(--space) calc(var(--space) * 2.5);
     height: var(--el-height-sm);
   }
 
@@ -329,7 +329,7 @@
   }
 
   .j-radio.is-group.is-lg label span.radio-text {
-    --radio-group-padding: var(--s3) var(--s4);
+    --radio-group-padding: var(--s3) calc(var(--space) * 3.5);
     height: var(--el-height-lg);
   }
 
@@ -442,7 +442,6 @@
     position: absolute;
     border-radius: 50%;
     background-color: #fff;
-    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); */
     transition: all 0.3s ease;
   }
 
@@ -545,7 +544,7 @@
 
   /* input group */
   .input-group {
-    display: flex;
+    /* display: flex; */
     align-items: stretch;
   }
 
@@ -556,16 +555,9 @@
     min-width: 0;
   }
 
-  .input-group > .el-addon > .is-text {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
+  .input-group .el-addon .is-text {
     border-width: 1px;
     border-style: solid;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
   }
 
   /* input inner group */
@@ -573,37 +565,25 @@
   .input-inner-group {
     position: relative;
     width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .input-inner-group {
+    border: 1px solid var(--ui-border);
+    border-radius: var(--radius-md);
   }
 
-  .input-inner-group input.j-input {
+  .input-inner-group input.j-input,
+  .input-inner-group select.j-select {
     width: 100%;
     letter-spacing: 0.4px;
   }
 
   .input-inner-group .el-addon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--el-height-md);
-  }
-
-  .input-inner-group .el-addon:last-child {
-    right: 0;
-    left: auto;
-  }
-
-  .input-inner-group
-    .el-addon:first-child.inner-wrap:has(.j-button:not(.is-icon)) {
-    left: var(--space);
-  }
-
-  .input-inner-group
-    .el-addon:last-child.inner-wrap:has(.j-button:not(.is-icon)) {
-    right: var(--space);
   }
 
   .input-inner-group .el-addon svg {
@@ -611,9 +591,20 @@
     height: var(--font-size-xl);
   }
 
-  .input-inner-group .el-addon.inner-wrap {
+  .input-group .el-addon .is-text,
+  .input-inner-group .el-addon.is-text {
     display: flex;
+    align-items: center;
+    padding-inline: var(--s2);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .input-inner-group .el-addon.inner-wrap {
     gap: var(--space);
+    padding-inline: var(--space);
   }
 
   /* status active */
@@ -653,6 +644,12 @@
     outline-offset: 1px;
   }
 
+  .input-inner-group input.j-input,
+  .input-inner-group select.j-select {
+    border: 0;
+    box-shadow: none;
+  }
+
   /* status readonly */
   .j-input:not([type='file']):not(.is-line):not(.is-blank)[readonly],
   .j-textarea[readonly] {

package/src/css/themes/default/editor.css

@@ -10,7 +10,7 @@
 
   .j-editor {
     --editor-font-size: var(--font-size-lg);
-    --editor-p-line-height: 1.75;
+    --editor-line-height: 1.75;
     --editor-word-space: 0.02em;
     --editor-letter-space: 0.01em;
     --editor-block-space: 1.25rem;
@@ -36,18 +36,15 @@
 
   .j-editor.is-sm {
     --editor-font-size: var(--font-size-md);
-    --editor-p-line-height: 1.75;
   }
 
   .j-editor.is-lg {
     --editor-font-size: var(--font-size-xl);
-    --editor-p-line-height: 1.8;
     --editor-block-space: 1.5rem;
   }
 
   .j-editor.is-xl {
     --editor-font-size: var(--font-size-2xl);
-    --editor-p-line-height: 1.8;
     --editor-block-space: 1.5rem;
   }
 

package/src/css/themes/default/form.css

@@ -52,7 +52,6 @@
   .j-input[type='month'],
   .j-input[type='file'],
   .j-input[type='color'] {
-    /* --input-font-size: var(--font-size-sm); */
     --input-fg: var(--ui-fg-muted);
   }
 
@@ -83,17 +82,16 @@
     --input-font-size: var(--font-size-lg);
   }
 
-  .input-group .el-addon .j-button {
+  .input-group .j-button {
     --btn-border-color: var(--ui-border);
     --btn-fg: var(--ui-fg-muted);
     --btn-bg: var(--ui-bg-muted);
     --btn-padding: 0 var(--s2);
-    --btn-box-shadow: none;
+    /* --btn-box-shadow: none; */
   }
 
   .input-group .el-addon .is-text {
     font-size: var(--font-size-md);
-    line-height: var(--line-height);
     color: var(--ui-fg-muted);
     background-color: var(--ui-bg-muted);
     padding: var(--s2);
@@ -140,18 +138,35 @@
     --btn-box-shadow: none;
   }
 
-  .input-inner-group input.j-input:not(:last-child) {
-    padding-right: var(--el-height-md);
+  .input-inner-group .el-addon + .j-input {
+    padding-inline: var(--space);
   }
 
-  .input-inner-group input.j-input:not(:first-child) {
-    padding-left: var(--el-height-md);
+  .input-inner-group .el-addon + .j-select {
+    -webkit-padding-start: 2px;
+    padding-inline-start: 2px;
   }
 
   .input-inner-group .el-addon {
     color: var(--ui-fg-muted);
   }
 
+  .input-inner-group .el-addon .j-button:not(.is-icon) {
+    --btn-height: var(--el-height-sm);
+  }
+
+  .input-inner-group .el-addon .j-button.is-xs:not(.is-icon),
+  .input-inner-group .el-addon .j-button.is-sm:not(.is-icon) {
+    height: inherit;
+  }
+
+  .input-group .j-button:active,
+  .input-inner-group:has(input:focus),
+  .input-inner-group:has(select:focus) {
+    border-color: var(--tone-solid);
+    box-shadow: 0 0 0 4px var(--tone-ring);
+  }
+
   .mobile .j-input[type='file']::file-selector-button {
     padding: var(--s3);
     margin: calc(var(--space) * -1.7);

package/src/css/themes/default/menu.css

@@ -598,7 +598,7 @@
   .drop-menu .drop-container {
     min-width: 100px;
     max-width: 200px;
-    padding: var(--s2);
+    padding: var(--space);
     font-size: var(--font-size-md);
     background-color: var(--ui-surface-subtle);
     border-radius: var(--radius-sm);

package/src/css/themes/default/tip.css

@@ -30,14 +30,13 @@
   }
 
   .j-tip .tip-title {
-    line-height: var(--line-height-paragraph);
+    /* line-height: var(--line-height-paragraph); */
     font-weight: var(--font-medium);
   }
 
-  .j-tip .tip-content {
-    gap: var(--s2);
+  /* .j-tip .tip-content {
     line-height: var(--line-height-paragraph);
-  }
+  } */
 
   .j-tip.is-success {
     --tip-border-color: var(--state-success);

package/src/css/themes/default/toolbar.css

@@ -24,7 +24,7 @@
     align-self: center;
   }
 
-  .heading-drop-menu,
+  /* .heading-drop-menu,
   .editor-size-menu,
   .color-drop-menu,
   .editor-drop-heading,
@@ -35,14 +35,14 @@
     border: 1px solid var(--ui-border);
     border-radius: var(--radius-sm);
     font-size: var(--font-size-md);
-  }
+  } */
 
-  .editor-drop-color {
+  /* .editor-drop-color {
     padding: var(--space);
-  }
+  } */
 
   .editor-drop-color .color-panel {
-    padding: 0.5rem;
+    padding: var(--space);
     gap: 0.5rem;
   }
 
@@ -56,6 +56,11 @@
     border: 1px solid var(--ui-border);
   }
 
+  .editor-drop-color .color-panel .color-btn:last-of-type {
+    grid-column: span 5;
+    width: auto;
+  }
+
   .editor-drop-color .color-panel button.color-btn.color-btn-clear::after {
     content: '🚫';
     height: 30px;

package/src/css/tip.css

@@ -29,12 +29,13 @@
 
   .j-tip .tip-content {
     grid-column-start: 2;
-    display: grid;
-    justify-items: start;
-    margin: 0;
   }
 
-  .j-tip .tip-content > * {
-    margin: 0;
+  .j-tip .tip-content > *:first-child {
+    margin-top: 0;
+  }
+
+  .j-tip .tip-content > *:last-child {
+    margin-bottom: 0;
   }
 }

package/src/css/toolbar.css

@@ -41,9 +41,4 @@
     justify-content: center;
     align-items: center;
   }
-
-  .editor-drop-color .color-panel .color-btn:last-of-type {
-    grid-column: span 5;
-    width: auto;
-  }
 }

package/src/index.ts

@@ -7,10 +7,13 @@ export * from './utilities/id.ts';
 export * from './utilities/dom.ts';
 export * from './utilities/events.ts';
 export * from './utilities/http.ts';
-export * from './utilities/locale.ts';
+// do not export any function from locale.ts
+// export * from './utilities/locale.ts';
 export * from './utilities/object.ts';
 export * from './utilities/timer.ts';
 export * from './utilities/types.ts';
+export * from './utilities/merge.ts';
+export * from './utilities/config.ts';
 export * from './utilities/state.ts';
 export * from './utilities/refs.ts';
 export * from './utilities/validator.ts';

package/src/primitives/drop.ts

@@ -8,7 +8,7 @@ import {
 } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
-import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
 import { createLoading } from './loading.ts';
 
 type DropMode = 'hover' | 'click';
@@ -144,11 +144,8 @@ const DROP_PROPS_SCHEMA = {
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
   id: {
     default: null,
@@ -166,10 +163,10 @@ const DROP_PROPS_SCHEMA = {
   hoverIntent: { default: true, type: 'boolean' },
   onShown: { default: null, types: ['function', 'null'] },
   onHidden: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<DropProps>;
+} satisfies ConfigSchema<DropProps>;
 
 function normalizeProps(input: DropProps): ResolvedDropProps {
-  const props = resolveProps(input, DROP_PROPS_SCHEMA, 'Drop');
+  const props = resolveConfig(input, DROP_PROPS_SCHEMA, 'Drop');
   return {
     name: props.name as string | null,
     mode: props.mode as DropMode,

package/src/primitives/parabola.ts

@@ -3,7 +3,7 @@ import { insert, jsx } from 'vanilla-signal';
 import { type DOMReference, resolveElement } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { timer } from '../utilities/timer.ts';
-import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
 
 type ParabolaDirection =
   | 'center'
@@ -81,10 +81,7 @@ const PARABOLA_PROPS_SCHEMA = {
   ball: {
     default: DEFAULT_BALL,
     type: 'plainObject',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_BALL,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    merge: 'shallow',
     shape: {
       color: 'string',
       size: 'string',
@@ -92,11 +89,8 @@ const PARABOLA_PROPS_SCHEMA = {
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
   from: { default: null, ...ELEMENT_REF_RULE },
   to: { default: null, ...ELEMENT_REF_RULE },
@@ -108,10 +102,10 @@ const PARABOLA_PROPS_SCHEMA = {
   showDelay: { default: 0, type: 'number' },
   onShow: { default: null, types: ['function', 'null'] },
   onHidden: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<ParabolaProps>;
+} satisfies ConfigSchema<ParabolaProps>;
 
 function normalizeProps(input: ParabolaProps): ResolvedParabolaProps {
-  const props = resolveProps(input, PARABOLA_PROPS_SCHEMA, 'Parabola.props');
+  const props = resolveConfig(input, PARABOLA_PROPS_SCHEMA, 'Parabola.props');
   return {
     ball: props.ball as ParabolaBallProps,
     className: props.className as ParabolaClassNames,

package/src/primitives/popup.ts

@@ -1,7 +1,7 @@
 import { type ElementProps, jsx } from 'vanilla-signal';
 
 import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
-import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
 
 export interface PopupProps extends Record<string, unknown> {
   className?: string;
@@ -28,10 +28,10 @@ const POPUP_PROPS_SCHEMA = {
     default: '',
     type: 'renderable',
   },
-} satisfies ResolveSchema<PopupProps>;
+} satisfies ConfigSchema<PopupProps>;
 
 function normalizeProps(input: PopupProps): ResolvedPopupProps {
-  const props = resolveProps(input, POPUP_PROPS_SCHEMA, 'Popup');
+  const props = resolveConfig(input, POPUP_PROPS_SCHEMA, 'Popup');
 
   return {
     className: props.className as string,

package/src/primitives/sticky.ts

@@ -1,7 +1,7 @@
 import { createDeepStore, flushSync } from 'vanilla-signal';
 import { randomId } from '../utilities/id.ts';
 import { type DOMReference, all, requireContainer } from '../utilities/dom.ts';
-import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
 
 type StickyOverflow = 'destroy' | 'ignore';
 
@@ -91,10 +91,10 @@ const STICKY_PROPS_SCHEMA = {
   },
   reactive: { default: false, type: 'boolean' },
   onReBuild: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<StickyProps>;
+} satisfies ConfigSchema<StickyProps>;
 
 function normalizeProps(input: StickyProps): ResolvedStickyProps {
-  const props = resolveProps(input, STICKY_PROPS_SCHEMA, 'Sticky.props');
+  const props = resolveConfig(input, STICKY_PROPS_SCHEMA, 'Sticky.props');
   return {
     target: props.target as DOMReference,
     parent: props.parent as DOMReference,