{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/SevenSegment.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "SevenSegment",
          "members": [
            {
              "kind": "field",
              "name": "#canvas",
              "privacy": "private",
              "type": {
                "text": "HTMLCanvasElement"
              },
              "default": "this.#shadow.querySelector('canvas')!"
            },
            {
              "kind": "field",
              "name": "#style",
              "privacy": "private",
              "type": {
                "text": "HTMLStyleElement"
              },
              "default": "this.#shadow.querySelector('style')!"
            },
            {
              "kind": "field",
              "name": "#shadow",
              "privacy": "private",
              "type": {
                "text": "ShadowRoot"
              }
            },
            {
              "kind": "field",
              "name": "#format",
              "privacy": "private",
              "type": {
                "text": "string"
              },
              "default": "'#####'"
            },
            {
              "kind": "field",
              "name": "#mask",
              "privacy": "private",
              "type": {
                "text": "number[]"
              },
              "default": "[]"
            },
            {
              "kind": "field",
              "name": "RESIZE_DEBOUNCE_MS",
              "type": {
                "text": "number"
              },
              "static": true,
              "default": "100"
            },
            {
              "kind": "field",
              "name": "count",
              "readonly": true
            },
            {
              "kind": "method",
              "name": "render",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "setMask",
              "parameters": [
                {
                  "name": "mask",
                  "type": {
                    "text": "number[]"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "setText",
              "parameters": [
                {
                  "name": "val",
                  "type": {
                    "text": "string"
                  }
                }
              ]
            },
            {
              "kind": "method",
              "name": "setNumber",
              "parameters": [
                {
                  "name": "val",
                  "type": {
                    "text": "number"
                  }
                }
              ]
            },
            {
              "kind": "field",
              "name": "innerHTML",
              "default": "` <style> :host { display: flex; width: 100%; aspect-ratio: ${this.count} / 1.75; box-sizing: border-box; user-select: none; background: var(${Token.segmentBackground}, ${tokenDefaults[Token.segmentBackground]}); } canvas { width: 100%; height: 100%; background: var(${Token.segmentBackground}, ${tokenDefaults[Token.segmentBackground]}); } </style> <canvas></canvas> `"
            }
          ],
          "superclass": {
            "name": "HTMLElement"
          },
          "tagName": "seven-segment",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "SevenSegment",
          "declaration": {
            "name": "SevenSegment",
            "module": "src/SevenSegment.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/index.ts",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "SevenSegment",
          "declaration": {
            "name": "SevenSegment",
            "module": "./SevenSegment.js"
          }
        },
        {
          "kind": "js",
          "name": "*",
          "declaration": {
            "name": "*",
            "package": "./utils"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/seven-segment.ts",
      "declarations": [],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "seven-segment",
          "declaration": {
            "name": "SevenSegment",
            "module": "/src/SevenSegment"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/_s1_playground.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "default": "{ title: 'Playground', render: () => `<seven-segment></seven-segment>`, args: {}, } satisfies Meta<DartboardProps>"
        },
        {
          "kind": "variable",
          "name": "Playground",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Playground', args: { format: '########', displayText: 'hello', [Token.segmentBackground]: tokenDefaults[Token.segmentBackground], [Token.fillOn]: tokenDefaults[Token.fillOn], [Token.fillOff]: tokenDefaults[Token.fillOff], [Token.strokeWidth]: parseFloat(tokenDefaults[Token.strokeWidth]), [Token.strokeOn]: null, [Token.strokeOff]: tokenDefaults[Token.strokeOff], [Token.shear]: parseFloat(tokenDefaults[Token.shear]), [Token.elementPadding]: parseFloat(tokenDefaults[Token.elementPadding]), [Token.elementSpacing]: parseFloat(tokenDefaults[Token.elementSpacing]), [Token.segmentWidth]: parseFloat(tokenDefaults[Token.segmentWidth]), [Token.segmentInterval]: parseFloat(tokenDefaults[Token.segmentInterval]), [Token.bevelWidth]: parseFloat(tokenDefaults[Token.bevelWidth]), [Token.sideBevelEnabled]: tokenDefaults[Token.sideBevelEnabled] === '1', }, argTypes: { [Token.fillOn]: { description: 'Color of the segment when turned on', control: { type: 'color' }, defaultValue: tokenDefaults[Token.fillOn], }, [Token.fillOff]: { description: 'Color of the segment when turned off', control: { type: 'color' }, defaultValue: tokenDefaults[Token.fillOff], }, [Token.shear]: { description: 'Shear angle of the segments', control: { type: 'range', min: -180, max: 180, step: 1 }, defaultValue: tokenDefaults[Token.shear], }, [Token.elementPadding]: { description: 'Padding around the segments', control: { type: 'range', min: 0, max: 20, step: 0.5 }, defaultValue: tokenDefaults[Token.elementPadding], }, [Token.elementSpacing]: { description: 'Spacing between the segments', control: { type: 'range', min: 0, max: 20, step: 0.5 }, defaultValue: tokenDefaults[Token.elementSpacing], }, [Token.strokeOn]: { description: 'Stroke color of the segment when turned on', control: { type: 'color' }, defaultValue: tokenDefaults[Token.strokeOn], }, [Token.strokeOff]: { description: 'Stroke color of the segment when turned off', control: { type: 'color' }, defaultValue: tokenDefaults[Token.strokeOff], }, [Token.strokeWidth]: { description: 'Stroke width of the segments', control: { type: 'range', min: 0, max: 40, step: 1 }, defaultValue: tokenDefaults[Token.strokeWidth], }, [Token.segmentBackground]: { description: 'Background color of the segments', control: { type: 'color' }, defaultValue: tokenDefaults[Token.segmentBackground], }, [Token.segmentWidth]: { description: 'Width of the segments', control: { type: 'range', min: 0, max: 100, step: 1 }, defaultValue: tokenDefaults[Token.segmentWidth], }, [Token.segmentInterval]: { description: 'Interval between the segments', control: { type: 'range', min: 0, max: 10, step: 0.1 }, defaultValue: tokenDefaults[Token.segmentInterval], }, [Token.bevelWidth]: { description: 'Width of the bevel on the segments', control: { type: 'range', min: 0, max: 1, step: 0.01 }, defaultValue: tokenDefaults[Token.bevelWidth], }, [Token.sideBevelEnabled]: { description: 'Enable or disable side bevel on the segments', control: { type: 'boolean' }, defaultValue: tokenDefaults[Token.sideBevelEnabled] === '1', }, }, render: (params, { id }) => { const style = ` .story-playground { seven-segment { ${Token.fillOn}: ${params[Token.fillOn]}; ${Token.fillOff}: ${params[Token.fillOff]}; ${Token.shear}: ${params[Token.shear]}; ${Token.elementPadding}: ${params[Token.elementPadding]}; ${Token.elementSpacing}: ${params[Token.elementSpacing]}; ${Token.strokeOn}: ${params[Token.strokeOn]}; ${Token.strokeOff}: ${params[Token.strokeOff]}; ${Token.strokeWidth}: ${params[Token.strokeWidth]}; ${Token.segmentBackground}: ${params[Token.segmentBackground]}; ${Token.segmentWidth}: ${params[Token.segmentWidth]}; ${Token.segmentInterval}: ${params[Token.segmentInterval]}; ${Token.bevelWidth}: ${params[Token.bevelWidth]}; ${Token.sideBevelEnabled}: ${params[Token.sideBevelEnabled] ? '1' : '0'}; } } `; const template = ` <style> ${style} </style> <div id=\"${id}\" class=\"story-playground\"> <seven-segment displayText=\"${params.displayText}\" format=\"${params.format}\"></seven-segment> </div> `; return template; }, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/_s1_playground.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Playground",
          "declaration": {
            "name": "Playground",
            "module": "stories/_s1_playground.stories.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/_s2_resize.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "default": "{ title: 'Resize', decorators: [baseDecorator, themeDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta"
        },
        {
          "kind": "variable",
          "name": "Dimensions",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-dimensions', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { border: .1em dashed #0002; } } </style> <style> #${id} { seven-segment:nth-child(1) { width: 8em; height: 18em; } seven-segment:nth-child(2) { width: 18em; height: 10em; } seven-segment:nth-child(3) { width: 10em; height: 12em; } } </style> <div id=\"${id}\"> <seven-segment></seven-segment> <seven-segment></seven-segment> <seven-segment></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Dynamic",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Resize', decorators: [], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { border: 2px dashed #0002; display: flex; width: 100%; overflow: auto; seven-segment { width 100%; height: 100%; --dartbot-element-spacing: 1; --dartbot-element-padding: 1; --dartbot-segment-width: 6; } } </style> <style> #${id} { resize: both; } </style> <pre>Click and drag the bottom right corner to resize</pre> <div id=\"${id}\"> <seven-segment format=\"###########################\" displayText=\"a man a plan a canal panama\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Width",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-width', tags: ['hidden'], decorators: [], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { border: 2px dashed #0002; } } </style> <style> #${id} { seven-segment:nth-child(1) { width: 30em; } seven-segment:nth-child(2) { width: 20em; } seven-segment:nth-child(3) { width: 10em; } } </style> <div id=\"${id}\"> <seven-segment></seven-segment> <seven-segment></seven-segment> <seven-segment></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "AspectRatio",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-aspect', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { border: 2px dashed #0002; } } </style> <style> #${id} { seven-segment:nth-child(1) { aspect-ratio: 1 / 1; width: 20em; } seven-segment:nth-child(2) { aspect-ratio: 21 / 9; width: 20em; } } </style> <div id=\"${id}\"> <seven-segment></seven-segment> <seven-segment></seven-segment> </div> `, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/_s2_resize.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Dimensions",
          "declaration": {
            "name": "Dimensions",
            "module": "stories/_s2_resize.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Dynamic",
          "declaration": {
            "name": "Dynamic",
            "module": "stories/_s2_resize.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Width",
          "declaration": {
            "name": "Width",
            "module": "stories/_s2_resize.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "AspectRatio",
          "declaration": {
            "name": "AspectRatio",
            "module": "stories/_s2_resize.stories.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/colors.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "default": "{ title: 'Components/Colors', decorators: [baseDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta<DartboardProps>"
        },
        {
          "kind": "variable",
          "name": "Default",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'color-pallets', tags: ['hidden'], render: () => `<seven-segment></seven-segment>`, }"
        },
        {
          "kind": "variable",
          "name": "SegmentColor",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'segment-color', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-fill-on: #f00; --dartbot-fill-off: #322; } seven-segment:nth-child(2) { --dartbot-fill-on: #ddd; --dartbot-fill-off: #444; } seven-segment:nth-child(3) { --dartbot-fill-on: #f0f; --dartbot-fill-off: #154; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "StrokeColors",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'stroke-colors', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}: transparent; ${Token.fillOff}: transparent; ${Token.strokeWidth}: 4; ${Token.segmentInterval}: 2; } seven-segment:nth-child(1) { ${Token.strokeOn}:rgb(255, 255, 255); ${Token.strokeOff}:rgb(48, 48, 48); } seven-segment:nth-child(2) { ${Token.strokeOn}: gold; ${Token.strokeOff}: orangered; } seven-segment:nth-child(3) { ${Token.strokeOn}: #00f0ff; ${Token.strokeOff}: #5b5b5b; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "BackgroundColors",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'background-colors', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}: red; ${Token.fillOff}: #500; } seven-segment:nth-child(1) { ${Token.segmentBackground}: #000; } seven-segment:nth-child(2) { ${Token.segmentBackground}: orange; } seven-segment:nth-child(3) { ${Token.segmentBackground}: transparent; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/colors.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Default",
          "declaration": {
            "name": "Default",
            "module": "stories/colors.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "SegmentColor",
          "declaration": {
            "name": "SegmentColor",
            "module": "stories/colors.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "StrokeColors",
          "declaration": {
            "name": "StrokeColors",
            "module": "stories/colors.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "BackgroundColors",
          "declaration": {
            "name": "BackgroundColors",
            "module": "stories/colors.stories.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/css.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "default": "{ title: 'Components/Dartboard', decorators: [baseDecorator, themeDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta"
        },
        {
          "kind": "variable",
          "name": "Padding",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-padding', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { column-gap: 2px; seven-segment { border: 2px dashed #0002; background: #d0e2cc; --dartbot-element-spacing:1; } } </style> <style> #${id} { seven-segment:nth-child(1) { padding: 0em; } seven-segment:nth-child(2) { padding: .5em; } seven-segment:nth-child(3) { padding: 1em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"pad 1\"></seven-segment> <seven-segment displayText=\"pad 2\"></seven-segment> <seven-segment displayText=\"pad 3\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Margin",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-margin', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { background: #f443; seven-segment { background: #d0e2cc; --dartbot-canvas-bg: #fff; } } </style> <style> #${id} { seven-segment:nth-child(1) { margin: 0em; } seven-segment:nth-child(2) { margin: .5em; } seven-segment:nth-child(3) { margin: 1em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"mar 1\"></seven-segment> <seven-segment displayText=\"mar 2\"></seven-segment> <seven-segment displayText=\"mar 3\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Border",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-border', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { column-gap: .25em; } </style> <style> #${id} { seven-segment { border: 0 dashed orange; } seven-segment:nth-child(1) { border-width: 0em; } seven-segment:nth-child(2) { border-width: .5em; } seven-segment:nth-child(3) { border-width: 1em; } } </style> <div id=\"${id}\"> <seven-segment displayText=\"b1\"></seven-segment> <seven-segment displayText=\"b2\"></seven-segment> <seven-segment displayText=\"b3\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Filters",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-filters', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { seven-segment { transition: filter .5s; } } </style> <style> #${id} { seven-segment { --dartbot-element-spacing:1 } seven-segment:hover { filter: unset!important; } seven-segment:nth-child(1) { filter: drop-shadow(2px 2px 10px black); } seven-segment:nth-child(2) { filter: opacity(.2); } seven-segment:nth-child(3) { filter: invert(1); } } </style> <div id=\"${id}\"> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Transform",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'story-transform', tags: ['hidden'], render: (_, { id }) => ` <style data-dartbot-remove> #${id} { overflow: hidden; seven-segment { transition: transform .5s ease-out; } } </style> <style> #${id} { seven-segment:hover { transform: unset!important; } seven-segment:nth-child(1) { transform: rotate(360deg); } seven-segment:nth-child(2) { transform: rotate3d(0, 1, 0, 180deg) } seven-segment:nth-child(3) { transform: shear(10deg, 5deg); } } </style> <div id=\"${id}\"> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> <seven-segment displayText=\"1234\"></seven-segment> </div> `, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/css.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Padding",
          "declaration": {
            "name": "Padding",
            "module": "stories/css.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Margin",
          "declaration": {
            "name": "Margin",
            "module": "stories/css.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Border",
          "declaration": {
            "name": "Border",
            "module": "stories/css.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Filters",
          "declaration": {
            "name": "Filters",
            "module": "stories/css.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Transform",
          "declaration": {
            "name": "Transform",
            "module": "stories/css.stories.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/styles.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "default": "{ title: 'Components/Dartboard', decorators: [zoomDecorator, baseDecorator], parameters: { docs: { source: { transform } }, }, } satisfies Meta<DartboardProps>"
        },
        {
          "kind": "variable",
          "name": "Default",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'color-pallets', tags: ['hidden'], render: () => `<seven-segment></seven-segment>`, }"
        },
        {
          "kind": "variable",
          "name": "SegmentWidth",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'segment-width', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-segment-width: 1; } seven-segment:nth-child(2) { --dartbot-segment-width: 4; } seven-segment:nth-child(3) { --dartbot-segment-width: 8; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "StrokeWidth",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'stroke-width', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.fillOn}: transparent; ${Token.fillOff}: transparent; ${Token.strokeOn}:rgb(255, 255, 255); ${Token.strokeOff}:rgb(48, 48, 48); ${Token.strokeWidth}: 4; ${Token.segmentInterval}: 3; } seven-segment:nth-child(1) { ${Token.strokeWidth}: 1; } seven-segment:nth-child(2) { ${Token.strokeWidth}: 5; } seven-segment:nth-child(3) { ${Token.strokeWidth}: 8; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "SegmentInterval",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'segment-interval', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { --dartbot-segment-interval: 0; } seven-segment:nth-child(2) { --dartbot-segment-interval: 2; } seven-segment:nth-child(3) { --dartbot-segment-interval: 5; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "SegmentBevelWidth",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'segment-bevel-width', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { ${Token.bevelWidth}: 0; } seven-segment:nth-child(2) { ${Token.bevelWidth}: .25; } seven-segment:nth-child(3) { ${Token.bevelWidth}: .7; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ElementShear",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'element-shear', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { ${Token.shear}: 0; } seven-segment:nth-child(2) { ${Token.shear}: 20; } seven-segment:nth-child(3) { ${Token.shear}: -20; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ElementSpacing",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'element-spacing', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment { ${Token.bevelWidth}: 0; } seven-segment:nth-child(1) { ${Token.elementSpacing}: 0; } seven-segment:nth-child(2) { ${Token.elementSpacing}: 2; } seven-segment:nth-child(3) { ${Token.elementSpacing}: 5; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ElementPadding",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'element-padding', tags: ['hidden'], render: (_, { id }) => ` <style> #${id} { seven-segment:nth-child(1) { ${Token.elementPadding}: 0; } seven-segment:nth-child(2) { ${Token.elementPadding}: 2; } seven-segment:nth-child(3) { ${Token.elementPadding}: 5; } } </style> <div id=\"${id}\"> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> <seven-segment displaytext=\"hello\"></seven-segment> </div> `, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Default",
          "declaration": {
            "name": "Default",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "SegmentWidth",
          "declaration": {
            "name": "SegmentWidth",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "StrokeWidth",
          "declaration": {
            "name": "StrokeWidth",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "SegmentInterval",
          "declaration": {
            "name": "SegmentInterval",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "SegmentBevelWidth",
          "declaration": {
            "name": "SegmentBevelWidth",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ElementShear",
          "declaration": {
            "name": "ElementShear",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ElementSpacing",
          "declaration": {
            "name": "ElementSpacing",
            "module": "stories/styles.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ElementPadding",
          "declaration": {
            "name": "ElementPadding",
            "module": "stories/styles.stories.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/values.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "default": "{ title: 'Components/Dartboard', } satisfies Meta<DartboardProps>"
        },
        {
          "kind": "variable",
          "name": "AttributeText",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'attribute-text', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment displayText=\"hello\"></seven-segment> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ApiText",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'api-text', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment></seven-segment> </div> <script defer> (() => { const segments = document.querySelectorAll('#${id} seven-segment'); segments[0].setText('hello'); })(); </script> `, }"
        },
        {
          "kind": "variable",
          "name": "ApiMask",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'api-mask', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment></seven-segment> </div> <script defer> (() => { const segments = document.querySelectorAll('#${id} seven-segment'); segments[0].setMask([ 0b1110110, 0b1111001, 0b0111000, 0b0111000, 0b0111111 ]); })(); </script> `, }"
        },
        {
          "kind": "variable",
          "name": "ApiSegment",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'api-segment', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment format=\"#######\"></seven-segment> </div> <script defer> (() => { const segments = document.querySelectorAll('#${id} seven-segment'); segments[0].setMask([ 0b0000001, 0b0000010, 0b0000100, 0b0001000, 0b0010000, 0b0100000, 0b1000000 ]); })(); </script> `, }"
        },
        {
          "kind": "variable",
          "name": "Format",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'format', tags: ['hidden'], render: (_, { id }) => ` <div id=\"${id}\"> <seven-segment format=\"#######\" displayText=\"1234567890\"></seven-segment> <seven-segment format=\"##############\" displayText=\"1234567890\"></seven-segment> </div> `, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/values.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "AttributeText",
          "declaration": {
            "name": "AttributeText",
            "module": "stories/values.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ApiText",
          "declaration": {
            "name": "ApiText",
            "module": "stories/values.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ApiMask",
          "declaration": {
            "name": "ApiMask",
            "module": "stories/values.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ApiSegment",
          "declaration": {
            "name": "ApiSegment",
            "module": "stories/values.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Format",
          "declaration": {
            "name": "Format",
            "module": "stories/values.stories.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/render-segment/calc-points.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "calcPoints",
          "parameters": [
            {
              "name": "theme",
              "type": {
                "text": "Theme"
              }
            },
            {
              "name": "width",
              "type": {
                "text": "number"
              }
            },
            {
              "name": "height",
              "type": {
                "text": "number"
              }
            },
            {
              "name": "context",
              "type": {
                "text": "CanvasRenderingContext2D"
              }
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "calcPoints",
          "declaration": {
            "name": "calcPoints",
            "module": "src/render-segment/calc-points.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/render-segment/char-masks.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "charMasks",
          "type": {
            "text": "{ [key: string]: number }"
          },
          "default": "{ ' ': 0b0000000, '': 0b0000000, '0': 0b0111111, '1': 0b0000110, '2': 0b1011011, '3': 0b1001111, '4': 0b1100110, '5': 0b1101101, '6': 0b1111101, '7': 0b0000111, '8': 0b1111111, '9': 0b1100111, A: 0b1110111, B: 0b1111111, C: 0b0111001, D: 0b0111111, E: 0b1111001, F: 0b1110001, G: 0b1111101, H: 0b1110110, I: 0b0000110, J: 0b0011110, K: 0b1110000, L: 0b0111000, M: 0b0110111, N: 0b0110111, O: 0b0111111, P: 0b1110011, Q: 0b0111111, R: 0b1110111, S: 0b1101101, T: 0b0000111, U: 0b0111110, V: 0b0111110, W: 0b0111110, X: 0b1110000, Y: 0b1110010, Z: 0b1011011, '-': 0b1000000, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "charMasks",
          "declaration": {
            "name": "charMasks",
            "module": "src/render-segment/char-masks.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/render-segment/render-segment.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "render",
          "parameters": [
            {
              "name": "theme",
              "type": {
                "text": "Theme"
              }
            },
            {
              "name": "props",
              "type": {
                "text": "SegmentProps"
              }
            },
            {
              "name": "context",
              "type": {
                "text": "CanvasRenderingContext2D"
              }
            },
            {
              "name": "mask",
              "type": {
                "text": "number[]"
              }
            }
          ]
        },
        {
          "kind": "function",
          "name": "drawSegments",
          "parameters": [
            {
              "name": "theme",
              "type": {
                "text": "Theme"
              }
            },
            {
              "name": "props",
              "type": {
                "text": "SegmentProps"
              }
            },
            {
              "name": "context",
              "type": {
                "text": "CanvasRenderingContext2D"
              }
            },
            {
              "name": "mask",
              "type": {
                "text": "number[]"
              }
            }
          ]
        },
        {
          "kind": "function",
          "name": "drawSegment",
          "parameters": [
            {
              "name": "theme",
              "type": {
                "text": "Theme"
              }
            },
            {
              "name": "width",
              "type": {
                "text": "number"
              }
            },
            {
              "name": "height",
              "type": {
                "text": "number"
              }
            },
            {
              "name": "context",
              "type": {
                "text": "CanvasRenderingContext2D"
              }
            },
            {
              "name": "mask",
              "type": {
                "text": "number"
              }
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "render",
          "declaration": {
            "name": "render",
            "module": "src/render-segment/render-segment.ts"
          }
        },
        {
          "kind": "js",
          "name": "drawSegments",
          "declaration": {
            "name": "drawSegments",
            "module": "src/render-segment/render-segment.ts"
          }
        },
        {
          "kind": "js",
          "name": "drawSegment",
          "declaration": {
            "name": "drawSegment",
            "module": "src/render-segment/render-segment.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/render-segment/token.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "tokenDefaults",
          "type": {
            "text": "object"
          },
          "default": "{ [Token.elementSpacing]: '2', [Token.elementPadding]: '2', [Token.segmentBackground]: '#000', [Token.segmentWidth]: '6', [Token.segmentInterval]: '.75', [Token.bevelWidth]: '.1', [Token.sideBevelEnabled]: '1', [Token.fillOn]: '#7f0', [Token.fillOff]: '#030', [Token.strokeOn]: 'black', [Token.strokeOff]: 'black', [Token.strokeWidth]: '0', [Token.shear]: '0', }"
        },
        {
          "kind": "function",
          "name": "createTheme",
          "return": {
            "type": {
              "text": "Theme"
            }
          },
          "parameters": [
            {
              "name": "style",
              "type": {
                "text": "CSSStyleDeclaration"
              }
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "tokenDefaults",
          "declaration": {
            "name": "tokenDefaults",
            "module": "src/render-segment/token.ts"
          }
        },
        {
          "kind": "js",
          "name": "createTheme",
          "declaration": {
            "name": "createTheme",
            "module": "src/render-segment/token.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/utils/debounce.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "debounce",
          "parameters": [
            {
              "name": "func",
              "type": {
                "text": "any"
              }
            },
            {
              "name": "delay",
              "type": {
                "text": "number"
              }
            },
            {
              "name": "options",
              "optional": true,
              "type": {
                "text": "{ leading?: boolean; trailing?: boolean }"
              }
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "debounce",
          "declaration": {
            "name": "debounce",
            "module": "src/utils/debounce.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/utils/index.ts",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "*",
          "declaration": {
            "name": "*",
            "package": "./debounce"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/utils/throttle.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "throttle",
          "parameters": [
            {
              "name": "func",
              "type": {
                "text": "Function"
              }
            },
            {
              "name": "delay",
              "type": {
                "text": "number"
              }
            }
          ]
        },
        {
          "kind": "function",
          "name": "throttleAnimation",
          "parameters": [
            {
              "name": "func",
              "type": {
                "text": "Function"
              }
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "throttle",
          "declaration": {
            "name": "throttle",
            "module": "src/utils/throttle.ts"
          }
        },
        {
          "kind": "js",
          "name": "throttleAnimation",
          "declaration": {
            "name": "throttleAnimation",
            "module": "src/utils/throttle.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/decorators/base.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "baseDecorator",
          "parameters": [
            {
              "name": "story"
            },
            {
              "name": "context"
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "baseDecorator",
          "declaration": {
            "name": "baseDecorator",
            "module": "stories/decorators/base.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/decorators/index.ts",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "*",
          "declaration": {
            "name": "*",
            "package": "./base"
          }
        },
        {
          "kind": "js",
          "name": "*",
          "declaration": {
            "name": "*",
            "package": "./zoom"
          }
        },
        {
          "kind": "js",
          "name": "*",
          "declaration": {
            "name": "*",
            "package": "./theme"
          }
        },
        {
          "kind": "js",
          "name": "*",
          "declaration": {
            "name": "*",
            "package": "./transform"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/decorators/theme.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "themeDecorator",
          "parameters": [
            {
              "name": "story"
            },
            {
              "name": "context"
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "themeDecorator",
          "declaration": {
            "name": "themeDecorator",
            "module": "stories/decorators/theme.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/decorators/transform.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "transform",
          "parameters": [
            {
              "name": "source",
              "type": {
                "text": "string"
              }
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "transform",
          "declaration": {
            "name": "transform",
            "module": "stories/decorators/transform.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/decorators/zoom.ts",
      "declarations": [
        {
          "kind": "function",
          "name": "zoomDecorator",
          "parameters": [
            {
              "name": "story"
            },
            {
              "name": "context"
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "zoomDecorator",
          "declaration": {
            "name": "zoomDecorator",
            "module": "stories/decorators/zoom.ts"
          }
        }
      ]
    }
  ]
}