{ "$schema": "../manifest.schema.json", "schemaVersion": "1.2.0", "name": "ds-plan", "description": "Plan/pricing display component", "docUrl": "https://design.soracom.io/design-system/web-components/plan/", "usageNotes": [ "Use a plan name with or without the plan prefix, or a registered alias, in the plan attribute or default slot, for example plan=\"US\", plan=\"plan-K\", or NA1. The plan attribute takes precedence over slotted text.", "Plan lookup lowercases the input, removes whitespace and punctuation, then strips an optional leading plan. K, plan-K, and Plan K all resolve to key k and display name plan-K without explicit aliases. Radio/checkbox input values use the short canonical key, such as k instead of plank.", "Registry keys, aliases entries, and bundles keys are stored as normalized lowercase ASCII alphanumeric strings without the plan prefix, such as usmax and 10gb. Only supplied input is normalized during lookup; display names and bundle label text are unchanged.", "01S-LDV and 01S-LOWDATAVOLUME both display the existing canonical label plan01s-LDV. A registered bundle alias such as DU-10GB resolves to plan-DU with the separate bundle label 10GB, in either the plan attribute or default slot. The radio/checkbox input value remains the canonical plan key.", "Resolve plan names in Node.js, build tooling, or browser code with `import { resolvePlan } from '@soracom/soracom-design-system/ds-plan/resolve';`. This entry supports ESM, CommonJS, and TypeScript without DOM dependencies or custom-element registration.", "`resolvePlan(input: string | null | undefined): DsResolvedPlan | null` returns a fresh object with `key`, `plan`, `name`, `background-color`, `text-color`, and optional `aliases`, `beta`, and `bundles` metadata. For example, `resolvePlan('US')` returns key `us` and name `plan-US`. A matched bundle alias also returns a `bundle` string: `resolvePlan('DU-10GB')` returns key `du`, plan `plan-DU`, bundle `10GB`, and name `plan-DU (10GB)`. Unknown or empty inputs return `null`; callers choose fallback text and handle IMSIs separately.", "The resolver plan field is the base plan label. The name field is the complete display text, including a bundle label in parentheses when present; otherwise it equals plan. Use name for plain text. The ds-plan component renders plan and bundle separately, keeping its existing appearance and bundle overrides.", "The public plans.json registry stores the base label as plan and uses bundles to map normalized bundle keys to label text, such as 10gb to 10GB. The resolver combines each bundle key with the owning plan key and every plan alias. For example, if du had alias test, du10gb and test10gb would both resolve to plan-DU with bundle 10GB. The full name is computed, not stored in the registry.", "These are display mappings only, not a bundle catalogue or availability, lifecycle, eligibility, or plan/bundle validation rules. Unregistered combinations retain the existing unknown-plan fallback.", "The bundle attribute remains free text and overrides the bundle label from an alias. An explicit empty bundle=\"\" hides that label; removing the attribute restores the alias label. A plain plan key or ordinary alias does not supply a bundle label.", "The standalone resolver CDN module is `https://assets.soracom.io/sds/{version}/ds-plan/resolve/index.mjs` for versions that include this entry. The ds-plan web component bundles the same resolver internally and needs no additional script. Keep the resolver and component on the same SDS version when using both." ], "category": "specialized", "htmlElements": [ "ds-plan" ], "isWebComponent": true, "modifiers": { "size": { "support": "subset", "values": [ "--xsmall", "--small", "--medium", "--large" ] } }, "webComponentApi": { "tagName": "ds-plan", "className": "DsPlan", "observedAttributes": [ "size", "type", "name", "plan", "bundle", "imsi", "icon", "bundle-icon", "imsi-icon" ], "slots": [ { "name": "", "description": "Plan name with or without the plan prefix, or registered alias, used when the plan attribute is omitted." } ] }, "attributes": { "plan": { "description": "SORACOM plan name with or without the plan prefix, or a registered alias, such as US, plan-K, or DU-10GB. Unknown keys render with fallback colors and a normalized label.", "allowUnknown": true, "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "bundle": { "description": "Optional free-text bundle label displayed after the plan label. Overrides any label from a bundle alias; an empty value hides it.", "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "imsi": { "description": "Optional IMSI label displayed after the bundle label.", "pattern": "^\\d{15}$", "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "icon": { "description": "Optional icon name added to the rendered ds-tag as a --icon-* modifier.", "pattern": "^((--)?icon-)?[a-z0-9]+(-[a-z0-9]+)*$", "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "bundle-icon": { "description": "Optional icon name added to the bundle label as a --icon-* modifier.", "pattern": "^((--)?icon-)?[a-z0-9]+(-[a-z0-9]+)*$", "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "imsi-icon": { "description": "Optional icon name added to the IMSI label as a --icon-* modifier.", "pattern": "^((--)?icon-)?[a-z0-9]+(-[a-z0-9]+)*$", "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "size": { "description": "Display size.", "values": [ "xsmall", "small", "medium", "large" ], "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "type": { "description": "Optional input control type.", "values": [ "checkbox", "radio" ], "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "name": { "description": "Input name used when type is radio or checkbox.", "appliesTo": [ { "elements": [ "ds-plan" ] } ] }, "css": { "description": "CSS loading mode. Global CSS is used by default; shadow loads component CSS into Shadow DOM.", "values": [ "global", "shadow" ], "default": "global", "appliesTo": [ { "elements": [ "ds-plan" ] } ] } }, "dataAttributes": [], "registries": { "plans": { "path": "./plans.json", "description": "Supported SORACOM short plan keys, base plan labels, color classes, optional alternate-name aliases, and optional bundles mapping normalized bundle keys to label text." } }, "examples": [ { "name": "basic", "html": "plan01s" }, { "name": "with-plan-attr", "html": "" }, { "name": "shortcode", "html": "US" }, { "name": "with-shortcode-attr", "html": "" }, { "name": "bundle-alias", "html": "" }, { "name": "xsmall", "html": "" }, { "name": "small", "html": "" }, { "name": "medium", "html": "" }, { "name": "large", "html": "" }, { "name": "with-bundle", "html": "" }, { "name": "with-imsi", "html": "" }, { "name": "with-icon", "html": "" }, { "name": "with-label-icons", "html": "" }, { "name": "as-checkbox", "html": "" }, { "name": "as-radio", "html": "" }, { "name": "global-css", "html": "" } ] }