@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/schemas/composition/odd-checkbox.v1.json

@@ -0,0 +1,96 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://oddkin.dev/schemas/composition/odd-checkbox.v1.json",
+  "title": "odd-checkbox",
+  "description": "A checkbox that participates in forms like a native one: a native checkbox in the shadow root, drawn by the shared control-indicator module, labelled by the slotted text.",
+  "$comment": "Slots: default. A child names a slot with \"slot\"; text and children without \"slot\" go to the default slot.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "element"
+  ],
+  "properties": {
+    "element": {
+      "const": "odd-checkbox"
+    },
+    "id": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/id"
+    },
+    "slot": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/slot"
+    },
+    "attributes": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Name submitted with the form. Reflected: a form-associated element submits under its name attribute."
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Prevents interaction and submission.",
+          "default": false
+        },
+        "description": {
+          "type": "string",
+          "description": "Help text below the label.",
+          "default": ""
+        },
+        "error": {
+          "type": "string",
+          "description": "Error message; marks the field invalid (custom validity) while set.",
+          "default": ""
+        },
+        "checked": {
+          "type": "boolean",
+          "description": "Initial checkedness; the `checked` attribute, as on native checkboxes.",
+          "default": false
+        },
+        "value": {
+          "type": "string",
+          "description": "Submitted with the form while checked.",
+          "default": "on"
+        },
+        "required": {
+          "type": "boolean",
+          "description": "Must be checked to submit.",
+          "default": false
+        },
+        "indeterminate": {
+          "type": "boolean",
+          "description": "Shows the mixed state; cleared when the user toggles, as on native checkboxes.",
+          "default": false
+        }
+      }
+    },
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "checked": {
+          "type": "boolean",
+          "description": "The current checkedness. Setting it (or toggling) detaches it from `defaultChecked`."
+        }
+      }
+    },
+    "children": {
+      "type": "array",
+      "items": {
+        "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/node"
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "change": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        },
+        "input": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        }
+      }
+    }
+  }
+}

package/schemas/composition/odd-chip.v1.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://oddkin.dev/schemas/composition/odd-chip.v1.json",
+  "title": "odd-chip",
+  "description": "A compact token for a value, filter, or tag, with an explicit remove button when `removable`. The chip itself is not focusable; only its remove button is.",
+  "$comment": "Slots: default. A child names a slot with \"slot\"; text and children without \"slot\" go to the default slot.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "element"
+  ],
+  "properties": {
+    "element": {
+      "const": "odd-chip"
+    },
+    "id": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/id"
+    },
+    "slot": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/slot"
+    },
+    "attributes": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "removable": {
+          "type": "boolean",
+          "description": "Shows a remove button.",
+          "default": false
+        },
+        "selected": {
+          "type": "boolean",
+          "description": "Selection look, as for a chosen value.",
+          "default": false
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Dims the chip and disables its button.",
+          "default": false
+        }
+      }
+    },
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "strings": {
+          "type": "object",
+          "properties": {
+            "remove": {
+              "type": "string"
+            }
+          },
+          "description": "Localized string overrides."
+        }
+      }
+    },
+    "children": {
+      "type": "array",
+      "items": {
+        "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/node"
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "odd-chip-remove": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        }
+      }
+    }
+  }
+}

package/schemas/composition/odd-color-picker.v1.json

@@ -0,0 +1,126 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://oddkin.dev/schemas/composition/odd-color-picker.v1.json",
+  "title": "odd-color-picker",
+  "description": "One colour, typed as hex or chosen in a popup: a saturation-and-brightness area, a hue slider, hex and opacity entry, the RGB values, and suggested swatches, applied or cancelled. The value is a native colour input's: `#rrggbb`, or with `alpha`, the CSS form color(srgb r g b / a); it is always a colour (black by default).",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "element"
+  ],
+  "properties": {
+    "element": {
+      "const": "odd-color-picker"
+    },
+    "id": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/id"
+    },
+    "slot": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/slot"
+    },
+    "attributes": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Name submitted with the form. Reflected: a form-associated element submits under its name attribute."
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Prevents interaction and submission.",
+          "default": false
+        },
+        "description": {
+          "type": "string",
+          "description": "Help text below the label.",
+          "default": ""
+        },
+        "error": {
+          "type": "string",
+          "description": "Error message; marks the field invalid (custom validity) while set.",
+          "default": ""
+        },
+        "label": {
+          "type": "string",
+          "description": "Visible label; names the field.",
+          "default": ""
+        },
+        "value": {
+          "type": "string",
+          "description": "Initial colour; the `value` attribute, as on a native colour input.",
+          "default": ""
+        },
+        "alpha": {
+          "type": "boolean",
+          "description": "The colour takes an opacity, as HTML’s `alpha` on a colour input.",
+          "default": false
+        }
+      }
+    },
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "strings": {
+          "type": "object",
+          "properties": {
+            "choose": {
+              "type": "string"
+            },
+            "change": {
+              "type": "string"
+            },
+            "invalid": {
+              "type": "string"
+            },
+            "area": {
+              "type": "string"
+            },
+            "areaValue": {
+              "type": "string"
+            },
+            "hue": {
+              "type": "string"
+            },
+            "hex": {
+              "type": "string"
+            },
+            "opacity": {
+              "type": "string"
+            },
+            "rgb": {
+              "type": "string"
+            },
+            "swatches": {
+              "type": "string"
+            },
+            "cancel": {
+              "type": "string"
+            },
+            "apply": {
+              "type": "string"
+            }
+          },
+          "description": "Localized string overrides: `choose`, `change` (`{color}`), `invalid`, `area`, `areaValue` (`{saturation}`, `{brightness}`), `hue`, `hex`, `opacity`, `rgb` (`{r}`, `{g}`, `{b}`), `swatches`, `cancel`, `apply`."
+        },
+        "value": {
+          "type": "string",
+          "description": "The colour: `#rrggbb`, or with `alpha`, color(srgb r g b / a). Setting it detaches it from `defaultValue`."
+        }
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "change": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        },
+        "input": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        }
+      }
+    }
+  }
+}

package/schemas/composition/odd-combobox.v1.json

@@ -0,0 +1,202 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://oddkin.dev/schemas/composition/odd-combobox.v1.json",
+  "title": "odd-combobox",
+  "description": "An editable input with a popup listbox (APG combobox, list autocomplete): typing filters the options and the first match becomes active; Enter or a click chooses. With `multiple`, chosen values are chips in the field, collapsed to \"+N\" while the field is not in use. Options come from `<option>` and `<optgroup>` children, written as for a native select, or from `options`.",
+  "$comment": "Slots: \"empty\", \"status\". A child names a slot with \"slot\"; text and children without \"slot\" go to the default slot.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "element"
+  ],
+  "properties": {
+    "element": {
+      "const": "odd-combobox"
+    },
+    "id": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/id"
+    },
+    "slot": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/slot"
+    },
+    "attributes": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Name submitted with the form. Reflected: a form-associated element submits under its name attribute."
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Prevents interaction and submission.",
+          "default": false
+        },
+        "description": {
+          "type": "string",
+          "description": "Help text below the label.",
+          "default": ""
+        },
+        "error": {
+          "type": "string",
+          "description": "Error message; marks the field invalid (custom validity) while set.",
+          "default": ""
+        },
+        "label": {
+          "type": "string",
+          "description": "Visible label; names the control.",
+          "default": ""
+        },
+        "value": {
+          "type": "string",
+          "description": "Value of the selected option; the `value` attribute sets the default.",
+          "default": ""
+        },
+        "multiple": {
+          "type": "boolean",
+          "description": "Several options can be selected.",
+          "default": false
+        },
+        "required": {
+          "type": "boolean",
+          "description": "An option must be selected to submit.",
+          "default": false
+        },
+        "loading": {
+          "type": "boolean",
+          "description": "Shows a busy row and marks the options busy.",
+          "default": false
+        },
+        "view": {
+          "enum": [
+            "text",
+            "chips",
+            "count",
+            "auto",
+            "expandable",
+            "avatars",
+            "grouped"
+          ],
+          "description": "With `multiple`, how the chosen values show in the field: chips (\"+N\" for those that do not fit), a count, a sentence (`text`), chips up to four and then the count (`auto`), two rows of chips with Show all (`expandable`), initials (`avatars`), or a count per group (`grouped`).",
+          "default": "chips"
+        },
+        "select-all": {
+          "type": "boolean",
+          "description": "With `multiple` and options, a \"Select all\" check box above them: it chooses every usable option shown, or clears them when all are chosen.",
+          "default": false
+        },
+        "review": {
+          "type": "boolean",
+          "description": "With `multiple`, the open popup starts with the chosen values: \"Selected (N)\", a disclosure of the first three, each removable, and View N more.",
+          "default": false
+        },
+        "readonly": {
+          "type": "boolean",
+          "description": "The value shows but cannot be changed; it is still submitted.",
+          "default": false
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Text shown in the empty input.",
+          "default": ""
+        },
+        "no-filter": {
+          "type": "boolean",
+          "description": "The element does not filter: listen to `odd-query-change` and replace `options` with the matches.",
+          "default": false
+        }
+      }
+    },
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "values": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "description": "Values of the selected options with `multiple`."
+        },
+        "strings": {
+          "type": "object",
+          "properties": {
+            "loading": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            },
+            "clear": {
+              "type": "string"
+            },
+            "remove": {
+              "type": "string"
+            },
+            "selected": {
+              "type": "string"
+            },
+            "more": {
+              "type": "string"
+            },
+            "count": {
+              "type": "string"
+            },
+            "others": {
+              "type": "string"
+            },
+            "othersOne": {
+              "type": "string"
+            },
+            "group": {
+              "type": "string"
+            },
+            "total": {
+              "type": "string"
+            },
+            "showAll": {
+              "type": "string"
+            },
+            "showLess": {
+              "type": "string"
+            },
+            "selectAll": {
+              "type": "string"
+            },
+            "clearAll": {
+              "type": "string"
+            },
+            "selectedCount": {
+              "type": "string"
+            },
+            "viewMore": {
+              "type": "string"
+            }
+          },
+          "description": "Localized string overrides; `remove` takes `{label}` and `more` takes `{count}`."
+        }
+      }
+    },
+    "children": {
+      "type": "array",
+      "items": {
+        "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/node"
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "change": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        },
+        "input": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        },
+        "odd-query-change": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        }
+      }
+    }
+  }
+}

package/schemas/composition/odd-command-palette.v1.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://oddkin.dev/schemas/composition/odd-command-palette.v1.json",
+  "title": "odd-command-palette",
+  "description": "A command palette: a modal dialog with a search input and the matching commands below it (APG combobox with a listbox popup that is always shown). Typing filters the commands by label and makes the first match active; Enter or a click runs it (`odd-action`) and closes the palette; Escape or a press on the backdrop closes it, and focus returns to where it was.",
+  "$comment": "Slots: \"empty\", \"status\". A child names a slot with \"slot\"; text and children without \"slot\" go to the default slot.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "element"
+  ],
+  "properties": {
+    "element": {
+      "const": "odd-command-palette"
+    },
+    "id": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/id"
+    },
+    "slot": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/slot"
+    },
+    "attributes": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Names the dialog. Required.",
+          "default": ""
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Text shown in the empty search input.",
+          "default": ""
+        },
+        "open": {
+          "type": "boolean",
+          "description": "Whether it is open.",
+          "default": false
+        },
+        "loading": {
+          "type": "boolean",
+          "description": "Shows a busy row and marks the results busy.",
+          "default": false
+        },
+        "no-filter": {
+          "type": "boolean",
+          "description": "The element does not filter: listen to `odd-query-change` and replace `items` with the matches.",
+          "default": false
+        }
+      }
+    },
+    "properties": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "strings": {
+          "type": "object",
+          "properties": {
+            "search": {
+              "type": "string"
+            },
+            "empty": {
+              "type": "string"
+            },
+            "loading": {
+              "type": "string"
+            },
+            "navigate": {
+              "type": "string"
+            },
+            "choose": {
+              "type": "string"
+            },
+            "close": {
+              "type": "string"
+            }
+          },
+          "description": "Localized string overrides."
+        }
+      }
+    },
+    "children": {
+      "type": "array",
+      "items": {
+        "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/node"
+      }
+    },
+    "actions": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "odd-action": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        },
+        "odd-query-change": {
+          "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/action"
+        }
+      }
+    }
+  }
+}

package/schemas/composition/odd-container.v1.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://oddkin.dev/schemas/composition/odd-container.v1.json",
+  "title": "odd-container",
+  "description": "A content measure and an inline-size container: container queries and layout recipe conditions inside it resolve against its width, not the viewport's. `measure=\"constrained\"` (the default) centres it with the theme's `layout.measure` as its maximum inline size; `fluid` fills the space. Insets are the page's: put an `.odd-box` inside or around it.",
+  "$comment": "Slots: default. A child names a slot with \"slot\"; text and children without \"slot\" go to the default slot.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "element"
+  ],
+  "properties": {
+    "element": {
+      "const": "odd-container"
+    },
+    "id": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/id"
+    },
+    "slot": {
+      "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/slot"
+    },
+    "attributes": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "measure": {
+          "enum": [
+            "constrained",
+            "fluid"
+          ],
+          "description": "Constrained: centred, at most the measure wide. Fluid: the full width.",
+          "default": "constrained"
+        }
+      }
+    },
+    "children": {
+      "type": "array",
+      "items": {
+        "$ref": "https://oddkin.dev/schemas/composition/composition.v1.json#/$defs/node"
+      }
+    }
+  }
+}