Color Picker Widget (v8)

Interactive color picker demonstrating:

• vars for static color list and labels
• state for reactive selected color and scroll mode
• forEach to render a dynamic swatch grid from a var array
• Dynamic Tailwind classes via {{interpolation}} (bg-clrs-{{item}})
• Parameterized setState action shared across all 17 swatches
• State-reactive showToast and emitEvent actions triggered by state changes
• ds:switch bound to a boolean state key
• marketing:hero for the branded header

# Juris-Native Color Picker Widget v8
# Now using colorKeys from named-colors.js with bg-clrs-* classes!

name: "ColorPickerWidget"
description: "Interactive color picker using semantic color keys from proto-tailwindcss-clrs plugin"
tagName: "color-picker-v8-wc"

vars:
  colors:
    type: array
    defaultValue:
      - bada55
      - navy
      - blue
      - aqua
      - teal
      - olive
      - green
      - lime
      - yellow
      - orange
      - red
      - maroon
      - fuchsia
      - purple
      - black
      - gray
      - silver

  labels:
    type: object
    defaultValue:
      title: "Technology Demo"
      subTitle: "Color Picker Widget v8"

state:
  selectedColor:
    type: string
    defaultValue: "bada55"
  globalScrollMode:
    type: boolean
    defaultValue: false

elements:
  - type: div
    classes: [bg-white, rounded-lg]
    children:
      - type: marketing:hero
        title: "{{vars.labels.title}}"
        subtitle: "{{vars.labels.subTitle}}"

      - type: div
        classes: [mb-4]
        children:
          - type: ds:switch
            id: globalScrollMode
            description: Page Scroll
            size: md
            color: purple

      - type: div
        classes: [space-y-4]
        children:
          # Color selection section
          - type: div
            children:
              - type: div
                classes: [text-lg, font-medium, mb-3, flex, items-center, gap-2]
                children:
                  - type: md:icon
                    name: "palette"
                    library: mdi
                    classes: [w-5, h-5, text-clrs-primary, flex]
                  - type: div
                    content: "Choose Color (17 colors from clrs.cc)"

              # All named colors from named-colors.js colorKeys with semantic bg-clrs-* classes
              - type: div
                classes: [flex, flex-wrap, gap-3, mb-4]
                children:
                  - type: forEach
                    collection: "{{vars.colors}}"
                    as: item
                    template:
                      type: div
                      classes: [w-12, h-12, rounded-lg, border-2, border-gray-300, cursor-pointer, hover:border-gray-400, hover:scale-110, transition-all, "bg-clrs-{{item}}"]
                      actions:
                        click: "selectColor('{{item}}')"

          # Selected color display
          - type: div
            children:
              - type: div
                classes: [text-sm, font-medium, text-gray-600, mb-2]
                content: "Selected Color:"

              - type: div
                classes: [w-full, h-20, rounded-lg, border-2, border-gray-300, flex, items-center, justify-center, transition-colors, "bg-clrs-{{selectedColor}}"]
                children:
                  - type: div
                    classes: [text-white, font-medium, text-lg, bg-black, bg-opacity-50, px-3, py-2, rounded]
                    content: "{{selectedColor}}"

actions:
  # Single parameterized action for ALL 17 colors!
  selectColor:
    type: setState
    target: selectedColor
    # value comes from parameter, not hardcoded!

  # State-reactive toast that triggers when color changes
  showColorToast:
    type: showToast
    stateKey: selectedColor
    toastType: info
    message: "Color changed to {{selectedColor}}"
    duration: 2000

  handleScrollModeToast:
    type: showToast
    stateKey: globalScrollMode    # State-reactive - triggers when globalScrollMode changes
    toastType: warning
    message: "Scroll mode changed! Layout updated via event bus."
    duration: 3000

  handleScrollModeEvent:
    type: emitEvent
    stateKey: globalScrollMode    # State-reactive - triggers when globalScrollMode changes
    eventName: globalScrollMode-changed
    # eventData will default to the globalScrollMode state value