@trimble-oss/moduswebcomponents-mcp 1.0.0 → 1.2.0

package/versions/1.2.0/component-docs/modus-wc-date.json

@@ -0,0 +1,227 @@
+{
+  "description": "A customizable date picker component used to create date inputs. Adheres to WCAG 2.2 standards.",
+  "properties": [
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Indicates that the input should have a border.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 79
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the input.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 82
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Whether the form control is disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 85
+    },
+    {
+      "name": "feedback",
+      "type": "IInputFeedbackProp",
+      "description": "Feedback to render below the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 88
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 91
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).",
+      "default": null,
+      "mutable": false,
+      "end_line": 94
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 97
+    },
+    {
+      "name": "max",
+      "type": "string",
+      "description": "Maximum date value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 100
+    },
+    {
+      "name": "min",
+      "type": "string",
+      "description": "Minimum date value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 103
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+      "default": null,
+      "mutable": false,
+      "end_line": 106
+    },
+    {
+      "name": "readOnly",
+      "type": "boolean",
+      "description": "Whether the value is editable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 109
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required or must be checked for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 112
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 115
+    },
+    {
+      "name": "format",
+      "type": "| 'yyyy-mm-dd'     | 'dd-mm-yyyy'     | 'mm-dd-yyyy'     | 'yyyy/mm/dd'     | 'dd/mm/yyyy'     | 'mm/dd/yyyy'     | 'MMM DD, YYYY'",
+      "description": "The date format for display and input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 125
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The value of the control.",
+      "default": "''",
+      "mutable": true,
+      "end_line": 128
+    },
+    {
+      "name": "weekStartDay",
+      "type": "WeekStartDay",
+      "description": "The first day of the week for the calendar display",
+      "default": "'sunday'",
+      "mutable": false,
+      "end_line": 131
+    },
+    {
+      "name": "showWeekNumbers",
+      "type": "boolean",
+      "description": "Displays ISO 8601 week numbers in the calendar. Week numbers are calculated with Monday as the first day of the week.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 134
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input loses focus.",
+      "end_line": 137
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Event emitted when the input value changes. `target.value` is always ISO 8601 (YYYY-MM-DD), or empty string when incomplete or invalid.",
+      "end_line": 140
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input gains focus.",
+      "end_line": 143
+    },
+    {
+      "name": "calendarMonthChange",
+      "detail": "number",
+      "description": "Event emitted when the calendar month selection changes.",
+      "end_line": 146
+    },
+    {
+      "name": "calendarYearChange",
+      "detail": "number",
+      "description": "Event emitted when the calendar year selection changes.",
+      "end_line": 149
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<style>\n        div[id^='story--components-forms-date--default'] {\n          min-height: 400px;\n          width: 300px;\n        }\n      </style>\n      <modus-wc-date\n        aria-label=\"Date input\"\n        ?bordered=${args.bordered}\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .feedback=${args.feedback}\n        format=${ifDefined(args.format)}\n        input-id=${ifDefined(args['input-id'])}\n        input-tab-index=${ifDefined(args['input-tab-index'])}\n        label=${ifDefined(args.label)}\n        max=${ifDefined(args.max)}\n        min=${ifDefined(args.min)}\n        name=${ifDefined(args.name)}\n        ?read-only=${args['read-only']}\n        ?required=${args.required}\n        ?show-week-numbers=${args['show-week-numbers']}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n        week-start-day=${ifDefined(args['week-start-day'])}\n      ></modus-wc-date>",
+    "variations": [],
+    "args": {
+      "bordered": "true",
+      "custom-class": "''",
+      "disabled": "false",
+      "label": "'Label'",
+      "read-only": "false",
+      "required": "false",
+      "show-week-numbers": "false",
+      "size": "'md'",
+      "value": "''",
+      "week-start-day": "'sunday'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus",
+      "calendarMonthChange",
+      "calendarYearChange",
+      ""
+    ]
+  },
+  "tag": "modus-wc-date",
+  "storyExample": {
+    "template": "<style>\n        div[id^='story--components-forms-date--default'] {\n          min-height: 400px;\n          width: 300px;\n        }\n      </style>\n      <modus-wc-date\n        aria-label=\"Date input\"\n        ?bordered=${args.bordered}\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .feedback=${args.feedback}\n        format=${ifDefined(args.format)}\n        input-id=${ifDefined(args['input-id'])}\n        input-tab-index=${ifDefined(args['input-tab-index'])}\n        label=${ifDefined(args.label)}\n        max=${ifDefined(args.max)}\n        min=${ifDefined(args.min)}\n        name=${ifDefined(args.name)}\n        ?read-only=${args['read-only']}\n        ?required=${args.required}\n        ?show-week-numbers=${args['show-week-numbers']}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n        week-start-day=${ifDefined(args['week-start-day'])}\n      ></modus-wc-date>",
+    "args": {
+      "bordered": "true",
+      "custom-class": "''",
+      "disabled": "false",
+      "label": "'Label'",
+      "read-only": "false",
+      "required": "false",
+      "show-week-numbers": "false",
+      "size": "'md'",
+      "value": "''",
+      "week-start-day": "'sunday'"
+    },
+    "argTypes": {},
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus",
+      "calendarMonthChange",
+      "calendarYearChange",
+      ""
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { IInputFeedbackProp, ModusSize, WeekStartDay } from '../types';\n\ninterface DateArgs {\n  bordered?: boolean;\n  'custom-class'?: string;\n  disabled?: boolean;\n  feedback?: IInputFeedbackProp;\n  format?:\n    | 'yyyy-mm-dd'\n    | 'dd-mm-yyyy'\n    | 'mm-dd-yyyy'\n    | 'yyyy/mm/dd'\n    | 'dd/mm/yyyy'\n    | 'mm/dd/yyyy'\n    | 'MMM DD, YYYY';\n  'input-id'?: string;\n  'input-tab-index'?: number;\n  label?: string;\n  max?: string;\n  min?: string;\n  name?: string;\n  'read-only'?: boolean;\n  required?: boolean;\n  'show-week-numbers'?: boolean;\n  size?: ModusSize;\n  value: string;\n  'week-start-day'?: WeekStartDay;\n}\n\nconst meta: Meta<DateArgs> = {\n  title: 'Components/Forms/Date',\n  component: 'modus-wc-date',\n  args: {\n    bordered: true,\n    'custom-class': '',\n    disabled: false,\n    label: 'Label',\n    'read-only': false,\n    required: false,\n    'show-week-numbers': false,\n    size: 'md',\n    value: '',\n    'week-start-day': 'sunday',\n  },\n  argTypes: {\n    feedback: {\n      table: {\n        type: {\n          detail: `\n            Interface: IInputFeedbackProp\n            Properties:\n            - level ('error' | 'info' | 'success' | 'warning'): The feedback level\n            - message (string, optional): The feedback message\n          `,\n        },\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    format: {\n      control: { type: 'select' },\n      options: [\n        undefined,\n        'yyyy-mm-dd',\n        'dd-mm-yyyy',\n        'mm-dd-yyyy',\n        'yyyy/mm/dd',\n        'dd/mm/yyyy',\n        'mm/dd/yyyy',\n        'MMM DD, YYYY',\n      ],\n    },\n    'week-start-day': {\n      control: { type: 'select' },\n      options: [\n        'sunday',\n        'monday',\n        'tuesday',\n        'wednesday',\n        'thursday',\n        'friday',\n        'saturday',\n      ],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: [\n        'inputBlur',\n        'inputChange',\n        'inputFocus',\n        'calendarMonthChange',\n        'calendarYearChange',\n      ],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<DateArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    return html`\n      <style>\n        div[id^='story--components-forms-date--default'] {\n          min-height: 400px;\n          width: 300px;\n        }\n      </style>\n      <modus-wc-date\n        aria-label=\"Date input\"\n        ?bordered=${args.bordered}\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .feedback=${args.feedback}\n        format=${ifDefined(args.format)}\n        input-id=${ifDefined(args['input-id'])}\n        input-tab-index=${ifDefined(args['input-tab-index'])}\n        label=${ifDefined(args.label)}\n        max=${ifDefined(args.max)}\n        min=${ifDefined(args.min)}\n        name=${ifDefined(args.name)}\n        ?read-only=${args['read-only']}\n        ?required=${args.required}\n        ?show-week-numbers=${args['show-week-numbers']}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n        week-start-day=${ifDefined(args['week-start-day'])}\n      ></modus-wc-date>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nconst errorFeedback: IInputFeedbackProp = {\n  level: 'error',\n  message: 'Value is required.',\n};\n\nexport const WithErrorFeedback: Story = {\n  ...Template,\n  args: { feedback: errorFeedback, required: true },\n  parameters: {\n    docs: {\n      source: {\n        transform: (src) => `${src}\n<script>\n  const dateInputElement = document.querySelector('modus-wc-date');\n  dateInputElement.feedback = {\n    level: 'error',\n    message: 'Value is required.'\n  };\n</script>`,\n      },\n    },\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for date component\n    if (!customElements.get('date-shadow-host')) {\n      const DateShadowHost = createShadowHostClass<DateArgs>({\n        componentTag: 'modus-wc-date',\n        propsMapper: (v: DateArgs, el: HTMLElement) => {\n          const dateEl = el as unknown as {\n            bordered: boolean;\n            customClass: string;\n            disabled: boolean;\n            feedback: IInputFeedbackProp;\n            format?:\n              | 'yyyy-mm-dd'\n              | 'dd-mm-yyyy'\n              | 'mm-dd-yyyy'\n              | 'yyyy/mm/dd'\n              | 'dd/mm/yyyy'\n              | 'mm/dd/yyyy'\n              | 'MMM DD, YYYY';\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            max: string;\n            min: string;\n            name: string;\n            readOnly: boolean;\n            required: boolean;\n            showWeekNumbers: boolean;\n            size: string;\n            value: string;\n            weekStartDay: string;\n          };\n          dateEl.bordered = Boolean(v.bordered);\n          dateEl.customClass = v['custom-class'] || '';\n          dateEl.disabled = Boolean(v.disabled);\n          dateEl.format = v.format;\n          dateEl.inputId = v['input-id'] ?? '';\n          dateEl.inputTabIndex = v['input-tab-index'] ?? -1;\n          dateEl.label = v.label ?? '';\n          dateEl.max = v.max ?? '';\n          dateEl.min = v.min ?? '';\n          dateEl.name = v.name ?? '';\n          dateEl.readOnly = Boolean(v['read-only']);\n          dateEl.required = Boolean(v.required);\n          dateEl.showWeekNumbers = Boolean(v['show-week-numbers']);\n          dateEl.size = v.size ?? '';\n          dateEl.value = v.value ?? '';\n          dateEl.weekStartDay = v['week-start-day'] ?? '';\n        },\n      });\n      customElements.define('date-shadow-host', DateShadowHost);\n    }\n\n    return html`<date-shadow-host .props=${{ ...args }}></date-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled\n  input model. See the Form Inputs [documentation]([Angular](?path=/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - Size values have changed from verbose names (\\`medium\\`, \\`large\\`) to abbreviations (\\`sm\\`, \\`md\\`, \\`lg\\`).\n  - The \\`value\\` prop now always outputs **ISO 8601 format** (\\`YYYY-MM-DD\\`), regardless of the display format.\n  Previously, \\`value\\` matched the display format (e.g. \\`dd-mm-yyyy\\`).\n  - The \\`format\\` prop is now automatically derived from the user's locale when not explicitly set.\n  Previously, it defaulted to \\`dd-mm-yyyy\\`. The accepted values remain the same fixed union\n  (\\`'yyyy-mm-dd'\\`, \\`'dd-mm-yyyy'\\`, \\`'mm-dd-yyyy'\\`, \\`'yyyy/mm/dd'\\`, \\`'dd/mm/yyyy'\\`, \\`'mm/dd/yyyy'\\`, \\`'MMM DD, YYYY'\\`).\n\n#### Prop Mapping\n\n| 1.0 Prop           | 2.0 Prop         | Notes                                   |\n|--------------------|------------------|-----------------------------------------|\n| allow-chars-regex  |                  | Not carried over                        |\n| alt-formats        |                  | Not carried over                        |\n| aria-label         | aria-label       |                                         |\n| auto-focus-input   |                  | Not carried over                        |\n| disabled           | disabled         |                                         |\n| disable-validation |                  | Not carried over                        |\n| error-text         | feedback.message | Use \\`feedback\\` level                  |\n| filler-date        |                  | Not carried over                        |\n| format             | format           | Auto-derived from locale when not set; union type unchanged |\n| helper-text        |                  | Not carried over                        |\n| label              | label            |                                         |\n| max                | max              |                                         |\n| min                | min              |                                         |\n| placeholder        |                  | Not carried over                        |\n| read-only          | read-only        |                                         |\n| required           | required         |                                         |\n| show-calendar-icon |                  | Not carried over                        |\n| size               | size             | \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\` |\n| type               |                  | Not carried over                        |\n| valid-text         | feedback.message | Use \\`feedback\\` level                  |\n| value              | value            | Now outputs ISO 8601 (\\`YYYY-MM-DD\\`)   |\n\n#### Event Mapping\n\n| 1.0 Event           | 2.0 Event   | Notes            |\n|---------------------|-------------|------------------|\n| calendarIconClicked |             | Not carried over |\n| dateInputBlur       | inputBlur   |                  |\n| valueChange         | inputChange |                  |\n| valueError          |             | Not carried over |\n        `,\n      },\n    },\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  render: () => html`<div></div>`,\n};\n"
+  }
+}

package/versions/1.2.0/component-docs/modus-wc-dropdown-menu.json

@@ -0,0 +1,164 @@
+{
+  "description": "A customizable dropdown menu component used to render a button and toggleable menu. The component supports a 'button' and 'menu' `<slot>` for injecting custom HTML content.",
+  "properties": [
+    {
+      "name": "buttonAriaLabel",
+      "type": "string",
+      "description": "The aria-label for the dropdown button.",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "buttonColor",
+      "type": "| 'primary'     | 'secondary'     | 'tertiary'     | 'warning'     | 'danger'",
+      "description": "The color variant of the button.",
+      "default": "'primary'",
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "buttonShape",
+      "type": "'circle' | 'ellipse' | 'rectangle' | 'square'",
+      "description": "The shape of the button.",
+      "default": "'rectangle'",
+      "mutable": false,
+      "end_line": 47
+    },
+    {
+      "name": "buttonSize",
+      "type": "DaisySize",
+      "description": "The size of the button.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 50
+    },
+    {
+      "name": "buttonVariant",
+      "type": "'borderless' | 'filled' | 'outlined'",
+      "description": "The variant of the button.",
+      "default": "'filled'",
+      "mutable": false,
+      "end_line": 53
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the host element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 56
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "If true, the button will be disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 59
+    },
+    {
+      "name": "menuBordered",
+      "type": "boolean",
+      "description": "Indicates that the menu should have a border.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 62
+    },
+    {
+      "name": "menuOffset",
+      "type": "number",
+      "description": "Distance between the button and menu in pixels.",
+      "default": "10",
+      "mutable": false,
+      "end_line": 65
+    },
+    {
+      "name": "menuPlacement",
+      "type": "PopoverPlacement",
+      "description": "The placement of the menu relative to the button.",
+      "default": "'bottom-start'",
+      "mutable": false,
+      "end_line": 68
+    },
+    {
+      "name": "menuSize",
+      "type": "ModusSize",
+      "description": "The size of the menu.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 71
+    },
+    {
+      "name": "menuVisible",
+      "type": "boolean",
+      "description": "Indicates that the menu is visible.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 74
+    }
+  ],
+  "events": [
+    {
+      "name": "menuVisibilityChange",
+      "detail": "{ isVisible: boolean }",
+      "description": "Event emitted when the menuVisible prop changes.",
+      "end_line": 77
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "button",
+      "description": "Slot for button content"
+    },
+    {
+      "name": "menu",
+      "description": "Slot for menu content"
+    }
+  ],
+  "examples": {
+    "basic": "<style>\n  /* Storybook styling */\n  div#story--components-dropdown-menu--default--primary-inner {\n    display: flex;\n    align-items: center;\n    height: 240px;\n  }\n\n  [slot=\"button\"] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .value {\n    font-size: 14px;\n    padding-top: 12px;\n  }\n</style>\n\n\n\n<modus-wc-dropdown-menu\n  button-aria-label=${ifDefined(args['button-aria-label'])}\n  button-color=${ifDefined(args['button-color'])}\n  button-shape=${ifDefined(args['button-shape'])}\n  button-size=${ifDefined(args['button-size'])}\n  button-variant=${ifDefined(args['button-variant'])}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?disabled=${args.disabled}\n  ?menu-bordered=${args['menu-bordered']}\n  menu-offset=${ifDefined(args['menu-offset'])}\n  menu-placement=${ifDefined(args['menu-placement'])}\n  menu-size=${ifDefined(args['menu-size'])}\n  ?menu-visible=${args['menu-visible']}\n>\n  <div slot=\"button\">\n    Button\n    <modus-wc-icon name=\"expand_more\" size=\"sm\" />\n  </div>\n\n  <div slot=\"menu\">\n    <modus-wc-menu-item label=\"Item One\" value=\"1\" @itemSelect=${handleItemSelect}></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Two\" value=\"2\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Three\" value=\"3\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n  </div>\n</modus-wc-dropdown-menu>\n<script>\n  // //  Adding this block to handle menu item selection to update a label and close the dropdown via JS.\n  // let selectedValue = '';\n\n  // const handleItemSelect = (event) => {\n  // //  Update the \"Selected Value\" label\n  //   selectedValue = event.detail.value;\n  //   const displayElement = document.querySelector('#selected-value');\n  //   if (displayElement) {\n  //     displayElement.textContent = selectedValue;\n  //   }\n\n  //   // Close the dropdown menu when an item is selected\n  //   const dropdownMenu = event.target;\n  //   const dropdownMenuElement = dropdownMenu.closest(\n  //     'modus-wc-dropdown-menu'\n  //   );\n  //   if (dropdownMenuElement) {\n  //     dropdownMenuElement.menuVisible = false;\n  //   }\n  // };\n  //  const menuItems = document.querySelectorAll('modus-wc-menu-item');\n  //   menuItems.forEach(item => {\n  //     item.addEventListener('itemSelect', handleItemSelect);\n  //   });\n</script>\n\n<div class=\"value\">\n  Selected Value:\n  <span id=\"selected-value\"></span>\n</div>",
+    "variations": [],
+    "args": {
+      "button-aria-label": "'Dropdown menu button'",
+      "button-color": "'primary'",
+      "button-shape": "'rectangle'",
+      "button-size": "'md'",
+      "button-variant": "'filled'",
+      "disabled": "false",
+      "menu-bordered": "true",
+      "menu-offset": "14",
+      "menu-placement": "'bottom-start'",
+      "menu-size": "'md'",
+      "menu-visible": "false"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "menuVisibilityChange"
+    ]
+  },
+  "tag": "modus-wc-dropdown-menu",
+  "storyExample": {
+    "template": "<style>\n  /* Storybook styling */\n  div#story--components-dropdown-menu--default--primary-inner {\n    display: flex;\n    align-items: center;\n    height: 240px;\n  }\n\n  [slot=\"button\"] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .value {\n    font-size: 14px;\n    padding-top: 12px;\n  }\n</style>\n\n\n\n<modus-wc-dropdown-menu\n  button-aria-label=${ifDefined(args['button-aria-label'])}\n  button-color=${ifDefined(args['button-color'])}\n  button-shape=${ifDefined(args['button-shape'])}\n  button-size=${ifDefined(args['button-size'])}\n  button-variant=${ifDefined(args['button-variant'])}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?disabled=${args.disabled}\n  ?menu-bordered=${args['menu-bordered']}\n  menu-offset=${ifDefined(args['menu-offset'])}\n  menu-placement=${ifDefined(args['menu-placement'])}\n  menu-size=${ifDefined(args['menu-size'])}\n  ?menu-visible=${args['menu-visible']}\n>\n  <div slot=\"button\">\n    Button\n    <modus-wc-icon name=\"expand_more\" size=\"sm\" />\n  </div>\n\n  <div slot=\"menu\">\n    <modus-wc-menu-item label=\"Item One\" value=\"1\" @itemSelect=${handleItemSelect}></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Two\" value=\"2\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Three\" value=\"3\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n  </div>\n</modus-wc-dropdown-menu>\n<script>\n  // //  Adding this block to handle menu item selection to update a label and close the dropdown via JS.\n  // let selectedValue = '';\n\n  // const handleItemSelect = (event) => {\n  // //  Update the \"Selected Value\" label\n  //   selectedValue = event.detail.value;\n  //   const displayElement = document.querySelector('#selected-value');\n  //   if (displayElement) {\n  //     displayElement.textContent = selectedValue;\n  //   }\n\n  //   // Close the dropdown menu when an item is selected\n  //   const dropdownMenu = event.target;\n  //   const dropdownMenuElement = dropdownMenu.closest(\n  //     'modus-wc-dropdown-menu'\n  //   );\n  //   if (dropdownMenuElement) {\n  //     dropdownMenuElement.menuVisible = false;\n  //   }\n  // };\n  //  const menuItems = document.querySelectorAll('modus-wc-menu-item');\n  //   menuItems.forEach(item => {\n  //     item.addEventListener('itemSelect', handleItemSelect);\n  //   });\n</script>\n\n<div class=\"value\">\n  Selected Value:\n  <span id=\"selected-value\"></span>\n</div>",
+    "args": {
+      "button-aria-label": "'Dropdown menu button'",
+      "button-color": "'primary'",
+      "button-shape": "'rectangle'",
+      "button-size": "'md'",
+      "button-variant": "'filled'",
+      "disabled": "false",
+      "menu-bordered": "true",
+      "menu-offset": "14",
+      "menu-placement": "'bottom-start'",
+      "menu-size": "'md'",
+      "menu-visible": "false"
+    },
+    "argTypes": {},
+    "events": [
+      "menuVisibilityChange"
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { DaisySize, ModusSize, PopoverPlacement } from '../types';\n\ninterface DropdownMenuArgs {\n  'button-aria-label'?: string;\n  'button-color'?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';\n  'button-shape'?: 'circle' | 'ellipse' | 'rectangle' | 'square';\n  'button-size'?: DaisySize;\n  'button-variant'?: 'borderless' | 'filled' | 'outlined';\n  'custom-class'?: string;\n  disabled?: boolean;\n  'menu-bordered'?: boolean;\n  'menu-offset'?: number;\n  'menu-placement'?: PopoverPlacement;\n  'menu-size'?: ModusSize;\n  'menu-visible': boolean;\n}\n\nconst meta: Meta<DropdownMenuArgs> = {\n  title: 'Components/Dropdown Menu',\n  component: 'modus-wc-dropdown-menu',\n  args: {\n    'button-aria-label': 'Dropdown menu button',\n    'button-color': 'primary',\n    'button-shape': 'rectangle',\n    'button-size': 'md',\n    'button-variant': 'filled',\n    disabled: false,\n    'menu-bordered': true,\n    'menu-offset': 14,\n    'menu-placement': 'bottom-start',\n    'menu-size': 'md',\n    'menu-visible': false,\n  },\n  argTypes: {\n    'button-color': {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],\n    },\n    'button-size': {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n    'button-shape': {\n      control: { type: 'select' },\n      options: ['circle', 'ellipse', 'rectangle', 'square'],\n    },\n    'button-variant': {\n      control: { type: 'select' },\n      options: ['borderless', 'filled', 'outlined'],\n    },\n    'menu-placement': {\n      control: { type: 'select' },\n      options: [\n        'top',\n        'top-start',\n        'top-end',\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'left',\n        'left-start',\n        'left-end',\n        'right',\n        'right-start',\n        'right-end',\n      ],\n    },\n    'menu-size': {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['menuVisibilityChange'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<DropdownMenuArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    let selectedValue = '';\n\n    const handleItemSelect = (event: CustomEvent) => {\n      selectedValue = event.detail.value;\n      const displayElement = document.querySelector('#selected-value');\n      if (displayElement) {\n        displayElement.textContent = selectedValue;\n      }\n\n      // Close the dropdown menu when an item is selected\n      const dropdownMenu = event.target as HTMLElement;\n      const dropdownMenuElement = dropdownMenu.closest(\n        'modus-wc-dropdown-menu'\n      );\n      if (dropdownMenuElement) {\n        dropdownMenuElement.menuVisible = false;\n      }\n    };\n\n    // prettier-ignore\n    return html`\n<style>\n  /* Storybook styling */\n  div#story--components-dropdown-menu--default--primary-inner {\n    display: flex;\n    align-items: center;\n    height: 240px;\n  }\n\n  [slot=\"button\"] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .value {\n    font-size: 14px;\n    padding-top: 12px;\n  }\n</style>\n\n\n\n<modus-wc-dropdown-menu\n  button-aria-label=${ifDefined(args['button-aria-label'])}\n  button-color=${ifDefined(args['button-color'])}\n  button-shape=${ifDefined(args['button-shape'])}\n  button-size=${ifDefined(args['button-size'])}\n  button-variant=${ifDefined(args['button-variant'])}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?disabled=${args.disabled}\n  ?menu-bordered=${args['menu-bordered']}\n  menu-offset=${ifDefined(args['menu-offset'])}\n  menu-placement=${ifDefined(args['menu-placement'])}\n  menu-size=${ifDefined(args['menu-size'])}\n  ?menu-visible=${args['menu-visible']}\n>\n  <div slot=\"button\">\n    Button\n    <modus-wc-icon name=\"expand_more\" size=\"sm\" />\n  </div>\n\n  <div slot=\"menu\">\n    <modus-wc-menu-item label=\"Item One\" value=\"1\" @itemSelect=${handleItemSelect}></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Two\" value=\"2\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Three\" value=\"3\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n  </div>\n</modus-wc-dropdown-menu>\n<script>\n  // //  Adding this block to handle menu item selection to update a label and close the dropdown via JS.\n  // let selectedValue = '';\n\n  // const handleItemSelect = (event) => {\n  // //  Update the \"Selected Value\" label\n  //   selectedValue = event.detail.value;\n  //   const displayElement = document.querySelector('#selected-value');\n  //   if (displayElement) {\n  //     displayElement.textContent = selectedValue;\n  //   }\n\n  //   // Close the dropdown menu when an item is selected\n  //   const dropdownMenu = event.target;\n  //   const dropdownMenuElement = dropdownMenu.closest(\n  //     'modus-wc-dropdown-menu'\n  //   );\n  //   if (dropdownMenuElement) {\n  //     dropdownMenuElement.menuVisible = false;\n  //   }\n  // };\n  //  const menuItems = document.querySelectorAll('modus-wc-menu-item');\n  //   menuItems.forEach(item => {\n  //     item.addEventListener('itemSelect', handleItemSelect);\n  //   });\n</script>\n\n<div class=\"value\">\n  Selected Value:\n  <span id=\"selected-value\"></span>\n</div>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const IconOnlyDropdownMenu: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<style>\n  /* Storybook styling */\n  div[id^='story--components-dropdown-menu--icon-only-dropdown-menu'] {\n    height: 60px;\n  }\n</style>\n\n<modus-wc-dropdown-menu button-shape=\"square\">\n  <div slot=\"button\">\n    <modus-wc-icon decorative name=\"more_vertical\"></modus-wc-icon>\n  </div>\n  <div slot=\"menu\">\n    <modus-wc-menu-item label=\"Item One\"></modus-wc-menu-item>\n  </div>\n</modus-wc-dropdown-menu>\n    `;\n  },\n};\n"
+  }
+}

package/versions/1.2.0/component-docs/modus-wc-logo.json

@@ -0,0 +1,61 @@
+{
+  "description": "A component for displaying Trimble product logos with support for both fixed and scalable sizing. Provides consistent branding across applications with various product logo options. Logo colors automatically adapt to the active Modus theme via CSS variables.",
+  "properties": [
+    {
+      "name": "name",
+      "type": "LogoName",
+      "description": "The name of the logo to display. Accepts values like 'trimble', 'viewpoint_field_view', etc.",
+      "default": null,
+      "mutable": false,
+      "end_line": 37
+    },
+    {
+      "name": "emblem",
+      "type": "boolean",
+      "description": "Show emblem version (icon only) instead of full logo",
+      "default": "false",
+      "mutable": false,
+      "end_line": 40
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the logo container.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "description": "The alt text for accessibility. If not provided, defaults to the logo name.",
+      "default": null,
+      "mutable": false,
+      "end_line": 46
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-logo\n        name=\"${args.name}\"\n        ?emblem=\"${args.emblem}\"\n        alt=\"${ifDefined(args.alt)}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n      ></modus-wc-logo>",
+    "variations": [],
+    "args": {
+      "name": "'trimble'",
+      "emblem": "false"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-logo",
+  "storyExample": {
+    "template": "<modus-wc-logo\n        name=\"${args.name}\"\n        ?emblem=\"${args.emblem}\"\n        alt=\"${ifDefined(args.alt)}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n      ></modus-wc-logo>",
+    "args": {
+      "name": "'trimble'",
+      "emblem": "false"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { getAvailableLogos, LogoName } from './logo-constants';\n\ninterface LogoArgs {\n  name: LogoName;\n  emblem: boolean;\n  alt?: string;\n  'custom-class'?: string;\n}\n\nconst meta: Meta<LogoArgs> = {\n  title: 'Components/Logo',\n  component: 'modus-wc-logo',\n  args: {\n    name: 'trimble',\n    emblem: false,\n  },\n  argTypes: {\n    name: {\n      control: { type: 'select' },\n      options: getAvailableLogos(),\n    },\n    emblem: {\n      control: { type: 'boolean' },\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<LogoArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-logo\n        name=\"${args.name}\"\n        ?emblem=\"${args.emblem}\"\n        alt=\"${ifDefined(args.alt)}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n      ></modus-wc-logo>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const CustomSizeWithClass: Story = {\n  render: () => {\n    return html`\n      <style>\n        .logo-small {\n          width: 80px;\n        }\n        .logo-medium {\n          width: 150px;\n        }\n        .logo-large {\n          width: 250px;\n        }\n        .emblem-xs {\n          width: 80px;\n          height: 80px;\n        }\n        .emblem-sm {\n          width: 150px;\n          height: 150px;\n        }\n        .emblem-lg {\n          width: 250px;\n          height: 250px;\n        }\n      </style>\n      <div style=\"display: flex; flex-direction: column; gap: 3rem;\">\n        <div>\n          <h4>Full Logos - Custom Sizes</h4>\n          <div\n            style=\"display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;\"\n          >\n            <modus-wc-logo\n              name=\"trimble\"\n              custom-class=\"logo-small\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              custom-class=\"logo-medium\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              custom-class=\"logo-large\"\n            ></modus-wc-logo>\n          </div>\n        </div>\n\n        <div>\n          <h4>Emblems - Custom Sizes</h4>\n          <div\n            style=\"display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;\"\n          >\n            <modus-wc-logo\n              name=\"trimble\"\n              emblem\n              custom-class=\"emblem-xs\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              emblem\n              custom-class=\"emblem-sm\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              emblem\n              custom-class=\"emblem-lg\"\n            ></modus-wc-logo>\n          </div>\n        </div>\n        </div>\n      </div>\n    `;\n  },\n};\n"
+  }
+}