lutra 0.1.69 → 0.1.73

package/dist/css/1-props.css

@@ -122,7 +122,7 @@
 @property --link-color-disabled        { syntax: "*"; inherits: true; initial-value: #cccccc; }
 @property --link-color-loading         { syntax: "*"; inherits: true; initial-value: #7c3aed; }
 
-@property --link-icon-size             { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --link-icon-size             { syntax: "*"; inherits: true; initial-value: 24px; }
 @property --link-icon-order            { syntax: "<number>"; inherits: true; initial-value: 1; }
 
 /**
@@ -196,175 +196,190 @@
 @property --field-background-interest  { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
 @property --field-background-loading   { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
 
-@property --field-border-color          { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --field-border-color-active    { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-inactive  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --field-border-color-disabled  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --field-border-color-focus     { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-invalid   { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-border-color-valid     { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-border-color-success   { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-border-color-danger    { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-border-color-warn      { syntax: "*"; inherits: true; initial-value: #ca8a04; }
-@property --field-border-color-info      { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-selected  { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-border-color-interest  { syntax: "*"; inherits: true; initial-value: #7c3aed; }
-@property --field-border-color-loading   { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --field-border-color          { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-active    { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-inactive  { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-disabled  { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-focus     { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-invalid   { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-valid     { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-success   { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-danger    { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-warn      { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --field-border-color-info      { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-selected  { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-interest  { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+@property --field-border-color-loading   { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 @property --field-border-size          { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --field-border-style         { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --field-border-radius        { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
-@property --field-color                { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
-@property --field-color-active         { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-inactive       { syntax: "*"; inherits: true; initial-value: #666666; }
-@property --field-color-disabled       { syntax: "*"; inherits: true; initial-value: #cccccc; }
-@property --field-color-focus          { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-invalid        { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-color-valid          { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-color-success        { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --field-color-danger         { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --field-color-warn           { syntax: "*"; inherits: true; initial-value: #ca8a04; }
-@property --field-color-info           { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-selected       { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --field-color-interest       { syntax: "*"; inherits: true; initial-value: #7c3aed; }
-@property --field-color-loading        { syntax: "*"; inherits: true; initial-value: #7c3aed; }
-
-@property --field-label-color          { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --field-label-font-size      { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --field-color                { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+@property --field-color-active         { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-inactive       { syntax: "<color>"; inherits: true; initial-value: #666666; }
+@property --field-color-disabled       { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
+@property --field-color-focus          { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-invalid        { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-color-valid          { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-color-success        { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-color-danger         { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-color-warn           { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --field-color-info           { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-selected       { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-interest       { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+@property --field-color-loading        { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+
+@property --field-label-color          { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --field-label-font-size      { syntax: "*"; inherits: true; initial-value: 16px; }
 @property --field-label-font-weight    { syntax: "<number>"; inherits: true; initial-value: 600; }
 
-@property --field-placeholder-color    { syntax: "*"; inherits: true; initial-value: #999999; }
-@property --field-padding-inline       { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --field-padding-block        { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --field-placeholder-color    { syntax: "<color>"; inherits: true; initial-value: #999999; }
+@property --field-padding-inline       { syntax: "*"; inherits: true; initial-value: 8px; }
+@property --field-padding-block        { syntax: "*"; inherits: true; initial-value: 8px; }
 
-@property --field-icon-size            { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --field-icon-size            { syntax: "*"; inherits: true; initial-value: 24px; }
 @property --field-icon-order           { syntax: "<number>"; inherits: true; initial-value: 1; }
+@property --field-group-gap            { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 /**
  * Checkbox and Radio
  */
 
-@property --checkbox-size { syntax: "<length>"; inherits: true; initial-value: 18px; }
-@property --checkbox-border-radius { syntax: "<length>"; inherits: true; initial-value: 4px; }
+@property --checkbox-size { syntax: "*"; inherits: true; initial-value: 18px; }
+@property --checkbox-border-radius { syntax: "*"; inherits: true; initial-value: 4px; }
 @property --checkbox-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --checkbox-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
-@property --checkbox-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --checkbox-border-color-checked { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --checkbox-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --checkbox-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
 @property --checkbox-indicator-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 
+/**
+ * Toggle
+ */
+
+@property --toggle-width { syntax: "*"; inherits: true; initial-value: 44px; }
+@property --toggle-height { syntax: "*"; inherits: true; initial-value: 24px; }
+@property --toggle-background { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --toggle-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --toggle-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --toggle-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --toggle-thumb-size { syntax: "*"; inherits: true; initial-value: 18px; }
+@property --toggle-thumb-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --toggle-thumb-shadow { syntax: "*"; inherits: true; initial-value: 0 1px 3px rgba(0, 0, 0, 0.2); }
+
 /**
  * Button Component
  */
 
-@property --button-base-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-base-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-base-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-base-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 
 /* primary */
 
-@property --button-submit-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-submit-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-submit-color-disabled { syntax: "*"; inherits: true; initial-value: #cccccc; }
-@property --button-submit-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-submit-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-disabled { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
+@property --button-submit-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
-@property --button-submit-background { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-background-hover { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
-@property --button-submit-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-submit-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
+@property --button-submit-background { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-submit-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
 
-@property --button-submit-border-color { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-border-color-hover { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
-@property --button-submit-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --button-submit-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-submit-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-submit-border-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-submit-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 /* action */
-@property --button-action-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-disabled { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-focus { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-action-color-loading { syntax: "*"; inherits: true; initial-value: #ffffff; }
-
-@property --button-action-background { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-background-hover { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-action-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-action-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
-
-@property --button-action-border-color { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-border-color-hover { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-border-color-disabled { syntax: "*"; inherits: true; initial-value: #111111; }
-@property --button-action-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-action-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-action-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-disabled { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-focus { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-loading { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+
+@property --button-action-background { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-background-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-action-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-action-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-action-border-color { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-action-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 /* danger */
-@property --button-danger-color { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-disabled { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-focus { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-color-loading { syntax: "*"; inherits: true; initial-value: #dc2626; }
-
-@property --button-danger-background { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-background-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-danger-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-danger-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
-
-@property --button-danger-border-color { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-border-color-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
-@property --button-danger-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --button-danger-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-danger-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-danger-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-disabled { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-focus { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-loading { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+
+@property --button-danger-background { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-danger-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-danger-border-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-danger-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 /* success */
-@property --button-success-color { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-disabled { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-focus { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-color-loading { syntax: "*"; inherits: true; initial-value: #16a34a; }
-
-@property --button-success-background { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-background-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --button-success-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-success-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
-
-@property --button-success-border-color { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-border-color-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
-@property --button-success-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --button-success-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --button-success-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --button-success-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-disabled { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-focus { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-loading { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+
+@property --button-success-background { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-success-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-success-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-success-border-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-success-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-success-border-color-loading { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
 @property --button-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --button-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --button-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
-@property --button-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
-@property --button-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --button-padding-inline { syntax: "*"; inherits: true; initial-value: 16px; }
+@property --button-padding-block { syntax: "*"; inherits: true; initial-value: 8px; }
 @property --button-padding { syntax: "*"; inherits: true; initial-value: 8px; }
 @property --button-border { syntax: "*"; inherits: true; initial-value: none; }
 
 @property --button-font-weight { syntax: "<number>"; inherits: true; initial-value: 500; }
 
-@property --button-icon-size { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --button-icon-size { syntax: "*"; inherits: true; initial-value: 24px; }
 @property --button-icon-order { syntax: "<number>"; inherits: true; initial-value: 1; }
 
 /**
  * Shadows
  */
 
-@property --shadow-color { syntax: "*"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
+@property --shadow-color { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
 @property --shadow-base { syntax: "*"; inherits: true; initial-value: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
 
 /**
  * Code
  */
 
-@property --code-background { syntax: "*"; inherits: true; initial-value: #f8fafc; }
-@property --code-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
-@property --code-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --code-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+@property --code-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+@property --code-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --code-border-size { syntax: "<length>"; inherits: true; initial-value: 0; }
 @property --code-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --code-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
@@ -376,18 +391,18 @@
  * Backgrounds
  */
 
-@property --background-body { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --background-main { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --background-main-subtle { syntax: "*"; inherits: true; initial-value: #f8fafc; }
-
-@property --background-active { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --background-inactive { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
-@property --background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --background-invalid { syntax: "*"; inherits: true; initial-value: #fef2f2; }
-@property --background-valid { syntax: "*"; inherits: true; initial-value: #dcfce7; }
-@property --background-success { syntax: "*"; inherits: true; initial-value: #dcfce7; }
-@property --background-danger { syntax: "*"; inherits: true; initial-value: #fef2f2; }
+@property --background-body { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --background-main { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --background-main-subtle { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+
+@property --background-active { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --background-inactive { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --background-invalid { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
+@property --background-valid { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --background-success { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --background-danger { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
 @property --background-warn { syntax: "<color>"; inherits: true; initial-value: #fefce8; }
 @property --background-info { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
 @property --background-selected { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
@@ -417,8 +432,8 @@
 
 @property --focus-ring { syntax: "*"; inherits: true; initial-value: 2px solid #2563eb; }
 @property --focus-ring-size { syntax: "<length>"; inherits: true; initial-value: 2px; }
-@property --focus-ring-color { syntax: "*"; inherits: true; initial-value: #2563eb; }
-@property --focus-ring-color-invalid { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --focus-ring-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --focus-ring-color-invalid { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
 @property --focus-ring-offset { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 /**
@@ -435,7 +450,7 @@
  */
 
 @property --tooltip-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
-@property --tooltip-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --tooltip-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
 @property --tooltip-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --tooltip-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 8px rgba(0, 0, 0, 0.15); }
@@ -485,21 +500,27 @@
 @property --table-cell-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 @property --table-header-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
-@property --table-header-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-header-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
 @property --table-header-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
 
 @property --table-row-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
 @property --table-row-background-even { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
 @property --table-row-background-hover { syntax: "<color>"; inherits: true; initial-value: #f1f5f9; }
 
-@property --table-cell-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-cell-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+
+/**
+ * Data List
+ */
+
+@property --data-list-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
 
 /**
  * Modal
  */
 
 @property --modal-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
-@property --modal-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --modal-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --modal-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --modal-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
@@ -509,12 +530,12 @@
 @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-width { syntax: "*"; inherits: true; initial-value: fit-content; }
 @property --modal-min-width { syntax: "*"; inherits: true; initial-value: auto; }
-@property --modal-max-width { syntax: "*"; inherits: true; initial-value: 640px; }
-@property --modal-max-height { syntax: "*"; inherits: true; initial-value: 600px; }
+@property --modal-max-width { syntax: "<length>"; inherits: true; initial-value: 640px; }
+@property --modal-max-height { syntax: "<length>"; inherits: true; initial-value: 600px; }
 @property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 @property --modal-actions-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
-@property --modal-actions-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-actions-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --modal-actions-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --modal-actions-padding-block { syntax: "<length>"; inherits: true; initial-value: 16px; }
 

package/dist/css/2-init.css

@@ -106,7 +106,7 @@
     --link-color-disabled: #cccccc;
     --link-color-loading: #7c3aed;
 
-    --link-icon-size: 24px;
+    --link-icon-size: 1.5em;
     --link-icon-order: 1;
 
     /* Borders */
@@ -210,25 +210,38 @@
     --field-label-font-weight: 600;
 
     --field-placeholder-color: #999999;
-    --field-padding-inline: 8px;
-    --field-padding-block: 8px;
+    --field-padding-inline: 0.5em;
+    --field-padding-block: 0.5em;
 
-    --field-icon-size: 24px;
+    --field-icon-size: 1.5em;
     --field-icon-order: 1;
+    --field-group-gap: var(--space-xs);
 
     /* Shorthand compound: field */
     --field-padding: var(--field-padding-block) var(--field-padding-inline);
     --field-border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
 
     /* Checkbox and Radio */
-    --checkbox-size: 18px;
-    --checkbox-border-radius: 4px;
+    --checkbox-size: 1.125em;
+    --checkbox-border-radius: 0.25em;
     --checkbox-background: #ffffff;
     --checkbox-background-checked: #2563eb;
     --checkbox-border-color: #d1d5db;
     --checkbox-border-color-checked: #2563eb;
     --checkbox-indicator-color: #ffffff;
 
+    /* Toggle */
+    --toggle-width: 2.75em;
+    --toggle-height: 1.5em;
+    --toggle-background: #d1d5db;
+    --toggle-background-checked: #2563eb;
+    --toggle-border-color: #d1d5db;
+    --toggle-border-color-checked: #2563eb;
+    --toggle-thumb-size: 1.125em;
+    --toggle-thumb-color: #ffffff;
+    --toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --toggle-thumb-offset: calc((var(--toggle-height) - var(--toggle-thumb-size)) / 2 - var(--field-border-size));
+
     /* Button Component */
     --button-base-color: #ffffff;
     --button-base-color-hover: #ffffff;
@@ -314,8 +327,8 @@
     --button-border-radius: var(--border-radius-base);
     --button-border-color: var(--border-color);
 
-    --button-padding-inline: 16px;
-    --button-padding-block: 8px;
+    --button-padding-inline: 1em;
+    --button-padding-block: 0.5em;
 
     --button-font-weight: 500;
 
@@ -341,10 +354,10 @@
     --code-border-color: #d1d5db;
     --code-border-size: 0;
     --code-border-style: solid;
-    --code-border-radius: 8px;
+    --code-border-radius: 0.5em;
 
-    --code-padding-inline: 16px;
-    --code-padding-block: 8px;
+    --code-padding-inline: 1em;
+    --code-padding-block: 0.5em;
 
     /* Backgrounds */
     --background-body: #ffffff;
@@ -402,7 +415,7 @@
     /* Toast */
     --toast-background: #ffffff;
     --toast-border: 1px solid #d1d5db;
-    --toast-border-radius: 8px;
+    --toast-border-radius: 0.5em;
     --toast-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     --toast-padding-inline: 1rem;
     --toast-padding-block: 0.75rem;
@@ -423,16 +436,16 @@
     --menu-border-color: #cccccc;
     --menu-border-size: 1px;
     --menu-border-style: solid;
-    --menu-border-radius: 8px;
+    --menu-border-radius: 0.5em;
 
     /* Table */
     --table-border-color: #d1d5db;
     --table-border-size: 1px;
     --table-border-style: solid;
-    --table-border-radius: 8px;
+    --table-border-radius: 0.5em;
 
-    --table-cell-padding-inline: 12px;
-    --table-cell-padding-block: 8px;
+    --table-cell-padding-inline: 0.75em;
+    --table-cell-padding-block: 0.5em;
 
     --table-header-background: #f8fafc;
     --table-header-color: #1a1a1a;
@@ -448,16 +461,19 @@
     --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
     --table-cell-padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
 
+    /* Data List */
+    --data-list-gap: var(--space-sm);
+
     /* Modal */
     --modal-background: #ffffff;
     --modal-border-color: #d1d5db;
     --modal-border-size: 1px;
     --modal-border-style: solid;
-    --modal-border-radius: 8px;
+    --modal-border-radius: 0.5em;
     --modal-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 
-    --modal-padding-inline: 24px;
-    --modal-padding-block: 24px;
+    --modal-padding-inline: 1.5em;
+    --modal-padding-block: 1.5em;
     --modal-width: fit-content;
     --modal-min-width: auto;
     --modal-max-width: 40rem;
@@ -466,8 +482,8 @@
 
     --modal-actions-background: #f8fafc;
     --modal-actions-border-color: #d1d5db;
-    --modal-actions-padding-inline: 16px;
-    --modal-actions-padding-block: 16px;
+    --modal-actions-padding-inline: 1em;
+    --modal-actions-padding-block: 1em;
 
     /* Shorthand compound: modal */
     --modal-border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
@@ -477,13 +493,13 @@
     /* Shared Surface System */
     --surface-background: #ffffff;
     --surface-border: 1px solid #d1d5db;
-    --surface-border-radius: 8px;
+    --surface-border-radius: 0.5em;
     --surface-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 
     /* Popover Component */
     --popover-background: #ffffff;
     --popover-border: 1px solid #d1d5db;
-    --popover-border-radius: 8px;
+    --popover-border-radius: 0.5em;
     --popover-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     --popover-width: max-content;
     --popover-max-width: calc(100vw - 2rem);

package/dist/css/themes/DefaultTheme.css

@@ -172,6 +172,16 @@
         --checkbox-border-color-checked: var(--button-submit-base-color);
         --checkbox-indicator-color: light-dark(#ffffff, #ffffff);
 
+        /**
+         * Toggle
+         */
+
+        --toggle-background: var(--border-color);
+        --toggle-background-checked: var(--checkbox-background-checked);
+        --toggle-border-color: var(--toggle-background);
+        --toggle-border-color-checked: var(--toggle-background-checked);
+        --toggle-thumb-color: var(--checkbox-indicator-color);
+
         --field-label-color: var(--text-color-p);
 
         --form-background: var(--background-body);

package/dist/form/Button.svelte

@@ -18,7 +18,7 @@
         href,
         type = 'button',
         class: className,
-        size = 'md',
+        scale = 'md',
         kind = 'default',
         disabled = false,
         icon,
@@ -32,7 +32,7 @@
         /** Visual style variant. */
         kind?: 'default' | 'outlined' | 'secondary' | 'warn';
         /** Size variant. */
-        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         /** Additional CSS class names. */
         class?: string;
         /** Whether the button is disabled. Also disabled automatically when the parent form is loading. */
@@ -51,14 +51,14 @@
 </script>
 
 {#if href}
-    <a class="Button Link button {size} {kind} {className} {align}" {href} {onclick}>
+    <a class="Button Link button {scale} {kind} {className} {align}" {href} {onclick}>
         {#if icon}
             <Icon {icon} />
         {/if}
         {@render children()}
     </a>
 {:else}
-    <button class="Button button {size} {kind} {className} {align}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
+    <button class="Button button {scale} {kind} {className} {align}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
         {#if icon}
             <Icon {icon} />
         {/if}