{"id":24053020,"url":"https://github.com/au-z/cam-el","last_synced_at":"2026-06-17T07:32:36.688Z","repository":{"id":45502794,"uuid":"307274306","full_name":"au-z/cam-el","owner":"au-z","description":"Foundational Web Components with Smooth Character","archived":false,"fork":false,"pushed_at":"2023-05-16T14:55:57.000Z","size":3767,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-24T23:01:39.147Z","etag":null,"topics":["components","hybridsjs","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/au-z.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-10-26T05:55:19.000Z","updated_at":"2022-12-07T21:17:53.000Z","dependencies_parsed_at":"2023-02-16T16:45:42.522Z","dependency_job_id":"ae8c1079-9ae4-4955-be60-4f727e3c89dc","html_url":"https://github.com/au-z/cam-el","commit_stats":null,"previous_names":["auzmartist/cam-el"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/au-z/cam-el","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/au-z%2Fcam-el","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/au-z%2Fcam-el/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/au-z%2Fcam-el/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/au-z%2Fcam-el/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/au-z","download_url":"https://codeload.github.com/au-z/cam-el/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/au-z%2Fcam-el/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34439296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-17T02:00:05.408Z","response_time":127,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","hybridsjs","web"],"created_at":"2025-01-09T02:21:52.860Z","updated_at":"2026-06-17T07:32:36.672Z","avatar_url":"https://github.com/au-z.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cam-el\n\n\u003e Foundational Web Components with Smooth Character\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"240\" height=\"240\" src=\"https://i.imgur.com/9b3r9LK.png\"\u003e\n\u003c/p\u003e\n\nThese components should help with boilerplate html layout. They're built to be modern, maximally helpful, and minimally intrusive.\n\n## Usage\n\n```bash\nnpm i @auzmartist/cam-el\n```\n\n```js\nimport { CamBox, CamInput } from '@auzmartist/cam-el'\n```\n\n# Components\n\nAs per the web components spec, all components are hyphenated. All `cam-el` components are prefixed with `cam-`.\n\n## Layout\n\n### `\u003ccam-box\u003e`\n\nA flex-sensible div replacer. Layout everything with cam-box.\n\nExample:\n\n```html\n\u003ccam-box m=\"2\" flex=\"space-evenly center\"\u003e\n  \u003ccam-box p=\"2 4\"\u003eFoo\u003c/cam-box\u003e\n  \u003ccam-box p=\"2 4\"\u003eBar\u003c/cam-box\u003e\n\u003c/cam-box\u003e\n```\n\n![cam-box](https://i.imgur.com/Kd3quCq.png)\n\n#### Attributes\n\n- **m**: margin `\"xy | x y\"`\n- **p**: padding `\"xy | x y\"`\n- **flex**: sets the flex justify-content and align-items properties `\"justify/align | justify align\"`\n- **inline** if set, display with be inline-flex or inline-block\n- **dir**: sets the flex-direction\n- **wrap**: the flex-wrap rule value\n\n## Forms\n\n### `\u003ccam-input\u003e`\n\nAn unopinionated input element which adds useful functionality and smooths over browser quirks.\n\n#### General Attributes\n\n- **m**: margin `\"xy | x y\"`\n- **p**: padding `\"xy | x y\"`\n- **disabled**: disables the input\n- **slot**: An optional slot on the left of the input for a label or other content\n- **value**: the current value of the input\n\n#### General Events\n\n- **onupdate**: CustomEvent wherein the detail is the current value of the input. This event may be more uniform and useful than the 'input' or 'changed' event. But these default events are still propagated.\n\n#### Text\n\nProxies the text input.\n\n```html\n\u003ccam-input type=\"text\" placeholder=\"hint\" label\u003e\u003c/cam-input\u003e\n```\n\n#### Number Input\n\nProxies the number input and adds features for wraparound value nudging and value clamping. Great for scientific or visualization heavy applications where\n\nExamples:\n\n```html\n\u003ccam-input type=\"number\" min=\"0\" max=\"1\" step=\"0.01\" wrap\u003e\u003c/cam-input\u003e\n```\n\n#### Attributes\n\n- **min**: minimum value\n- **max**: maximum value\n- **step**: step value\n- **wrap**: determines if the min and max should \"wrap around\"\n\n#### Checkbox/Toggle Input\n\n```html\n\u003ccam-input type=\"checkbox\"\u003e\u003c/cam-input\u003e \u003ccam-input type=\"checkbox\" toggle\u003e\u003c/cam-input\u003e\n```\n\n#### Attributes\n\n- **toggle**: An alternate UI resembling a horizontal slider\n- **checked**: Indicates if the checkbox is checked or toggle is on\n\n#### Radio Input\n\nBecause inputs do not share a \"name\" attribute across shadow DOMs, it's recommended to wrap groups of these in \u003ccam-radio-group\u003e to enforce mutual exclusion and subscribe to the group element's `onupdate` event.\n\n```html\n\u003ccam-radio-group name=\"contact\"\u003e\n  \u003ccam-input type=\"radio\" label=\"email\" value=\"email\"\u003e\u003c/cam-input\u003e\n  \u003ccam-input type=\"radio\" label=\"phone\" value=\"phone\"\u003e\u003c/cam-input\u003e\n  \u003ccam-input type=\"radio\" label=\"text\" value=\"text\"\u003e\u003c/cam-input\u003e\n\u003c/cam-radio-group\u003e\n```\n\n#### Email\n\nProxies the email input\n\n#### Password\n\nProxies the password input\n\nOne could make `\u003cinput\u003e` element work their full time job. Other `\u003cinput\u003e` variants and improved browser/accessibility support are in development as-needed. Submit an issue if there's something missing you'd like to use.\n\n## Typography\n\n### `\u003ccam-icon\u003e`\n\nA dead simple way to use Material Icon ligature fonts.\n\n```html\n\u003c!-- IMPORTANT - this prerequisite stylesheet is required --\u003e\n\u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\" /\u003e\n\n\u003ccam-icon\u003eface\u003c/cam-icon\u003e\n\u003c!--renders a face - no joke :) --\u003e\n```\n\n## Color\n\n### `\u003ccam-swatch\u003e`\n\nRender a color swatch in RGB, HSL, or hexadecimal format.\nPerfect for presenting a color in UI.\n\n```html\n\u003ccam-swatch r=\"3\" g=\"25\" b=\"38\"\u003e\u003c/cam-swatch\u003e\n\u003ccam-swatch h=\"175\" s=\"20\" l=\"68\" hide-label\u003e\u003c/cam-swatch\u003e\n\u003ccam-swatch hex=\"F4E9CD\"\u003e\u003c/cam-swatch\u003e\n```\n\n### `\u003ccam-hsl\u003e`\n\nRender an editable HSL color generator.\n\n```html\n\u003ccam-hsl h=\"175\" s=\"20\" l=\"68\" a=\"0.5\"\u003e\u003c/cam-hsl\u003e\n```\n\n## Canvas\n\n### `\u003ccam-vas\u003e`\n\nRenders a canvas behind all the slotted content.\n\n```html\n\u003ccam-vas\u003e Hello \u003c/cam-vas\u003e\n```\n\n#### Properties\n\n- **run:** (ctx: CanvasRenderingContext2D) =\u003e void\n  - re-renders this function each time\n- **throttle:** throttles the rendering to every n milliseconds\n\n#### Events:\n\n- change: {h, s, l, hex}\n\n## Interaction\n\n### `\u003ccam-draggable\u003e`\n\nTouch and mouse support for draggable slotted content.\n\n```html\n\u003c!-- A draggable red color swatch --\u003e\n\u003ccam-draggable\u003e\u003ccam-swatch hex=\"ff0000\"\u003e\u003c/cam-swatch\u003e\u003c/cam-draggable\u003e\n```\n\nIf you'd prefer to work with the raw eventListeners (`draggableStart`, `draggableDrag`, and `draggableEnd`), you can `import {Draggable} from 'cam-el'` into your project as function getters.\n\n## Miscellaneous / Advanced\n\nThese components are much less helpful in isolation, but can be used to supercharge further development with Hybrids JS web components.\n\n### `CamRef`\n\nUsed in conjunction with other renderable Hybrids components to provide a reference into a Custom Element's shadow DOM.\n\n#### Usage\n\n```js\nexport const MyComponent = {\n  ...CamRef('.some-class'),\n  render: () =\u003e html`\u003csome-child onref=\"${onRef}\"\u003e \u003c/some-child\u003e `,\n}\n\nfunction onRef(host, e) {\n  /* e.detail will be child component's .some-class element */\n}\n```\n\n---\n\n## ::part() styles\n\nThe library supports style bindings using the ::part() CSS selector modifier for a high degree of customization.\n\nExample\n\n```html\n\u003ccam-input label=\"Label\" /\u003e\n\u003cstyle\u003e\n  cam-input::part(input) {\n    border-radius: 0;\n  }\n  cam-input::part(label) {\n    font-family: 'Arial', sans-serif;\n  }\n\u003c/style\u003e\n```\n\n## CSS Variables\n\n- `var(--cam-font, sans-serif)`: the font for all elements\n- `var(--cam-unit, 8px)`: the size of a margin and padding unit\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fau-z%2Fcam-el","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fau-z%2Fcam-el","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fau-z%2Fcam-el/lists"}